Fix for loss of jQuery and GSAP in new update

Jan 27, 2020

Hey all,

If you used to use jQuery and GSAP, it has been removed in the latest update. I've found a work around for anyone that wants to keep using it.

Simply add this code into your slide when timeline starts:

function dynamicallyLoadScript(url) {

var script = document.createElement("script");

script.src = url;

document.head.appendChild(script);
}

dynamicallyLoadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js");

dynamicallyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js");

To target elements on the page which you used to do with:

var obj = $('[aria-label= "obj"] svg');

You now can use:

var obj = $('[data-acc-text = "obj"] svg');

Cheers,

Andrew

15 Replies

Curtis Wiens

4 years ago01/31/20 at 8:45 pm (UTC)

Thanks! There is also an issue with tweening SL objects using GSAP, specifically to an X value. I have the fix for that. Got it from a Articulate Engineer.

Natascha Matthes

4 years ago02/04/20 at 3:05 am (UTC)

Thanks a lot for sharing this, it's a big help!

And Zand

almost 4 years ago05/02/20 at 12:16 pm (UTC)

Hello, thank you for sharing. I'm trying to use the updated method but keep getting an error. Storyline v.3.39.21985.0

actionator::exeJavaScript - $ is not defined

Here is the code I used:

function dynamicallyLoadScript(url) {

var script = document.createElement("script");

script.src = url;

document.head.appendChild(script);
}

dynamicallyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js");

var square = $('[data-acc-text = "square"] svg');

TweenLite.to(square, 1, {rotation: 360});

almost 4 years ago05/02/20 at 1:53 pm (UTC)

Curtis,

Can you share that?

Phil Mayor
Hero

almost 4 years ago05/02/20 at 6:29 pm (UTC)

You need to load jquery as well and ensure that the librrays are loaded before firing your javascript, do not put them in the same triigger or add code to ensure the libarary is loaded.

And Zand

almost 4 years ago05/02/20 at 7:53 pm (UTC)

Phil, you are genius. It works.

And Zand

almost 4 years ago05/02/20 at 10:51 pm (UTC)

Just one more question more specifically about using functions with GSAP. I'm trying to create a timeline to sequence multiple animations, but it doesn't seem to work properly. Here is the code:

var tl = gsap.timeline();

tl.from(obj1, 1 {y: 100, stagger: 0.2});

tl.from(obj2, 1 {y: 100, stagger: 0.2});

tl.from(obj3, 1 {y: 100, stagger: 0.2});

Error:

Uncaught SyntaxError: missing ) after argument list

It seems like it cannot use the function properly. Has anyone found a solution?

Paul Westlake

almost 4 years ago05/08/20 at 2:05 pm (UTC)

Hi - It is possible to use this method to share a Storyline 360 course via Review 360 to embed into a RISE course?

Jonathan Hill
Hero

almost 4 years ago07/10/20 at 8:33 am (UTC)

Only just found this post and wanted to say THANK YOU VERY MUCH! No more 'hacking' the published file to re-insert jQuery 👍🏻

And Zand

over 3 years ago11/06/20 at 4:51 pm (UTC)

Hello,

has anyone noticed that since one of the last updates of the SL, the objects moved with JS would leave vertical lines behind. Look at the picture: the red ball, which is a circle that I drew in SL, is being moved from right to left with GSAP and there are narrow lines behind.

Any idea how to prevent them from appearing?

Leslie McKerchie
Staff

over 3 years ago11/09/20 at 6:03 pm (UTC)

Hello And,

Thank you for reaching out and sharing what you are experiencing in your project file.

With your permission, I'd like you to share your project file with our support engineers to investigate what's happening. You can share it privately by uploading it here. It will be deleted when troubleshooting is complete.