Jump to content
cwiens

Using Greensock in Storyline

Recommended Posts

Sorry I am not able to create a CodePen for this because it is happening in storyline. I figured out how to use Greensock directly in Storyline by using this code to get the object name using Jquery. 

var SL1_01 = $('[aria-label="leftIntro"] svg')
TweenMax.set(SL1_01, {transformPerspective:450});
TweenMax.to(SL1_01, 4, {alpha:1, scale:.8, rotationY:45, ease:Back.easeOut});

 

Here is an example in Articulate Review, after you click start the left stripes rotate.

https://360.articulate.com/review/content/28f18475-4a3c-4eef-ba4e-37546b6d5c20/review

For every tween it throws an error, but still works perfectly. 
Uncaught TypeError: Cannot read property 'push' of undefined
    at g.l.render (TweenMax.min.js:14)
    at Object.o.render (app.min.js:3)
    at Object._._updateRoot (app.min.js:3)
    at Object.o.dispatchEvent (app.min.js:3)
    at e (app.min.js:3) 

 

Is it because of the brackets? It does not work without them. The only way to target objects in Storyline is to use the Accessibility feature and name object and include the svg statement at the end. Again this works great but throws the above error with every object we tween. I would love to just ignore the error but would rather solve it :).

 

Thanks for 

Share this post


Link to post
Share on other sites

That's pretty tough to diagnose on a live site like that which is only loading the minified files. I'm not at all familiar with storyline (hadn't heard of it until now). Based on that error message, it almost seems like something outside of GSAP is monkeying with its properties, like by changing TweenLite._internals.lazyTweens to be null/undefined! I've never seen that before, and I'm pretty confident there's nothing inside GSAP that would do that. 

 

There are just too many moving parts and obfuscated code to troubleshoot that URL you provided. Can you isolate things further and remove as much as possible, and use uncompressed JS files? This sure smells like something outside of GSAP is causing the problem but I can't say for sure. 

Share this post


Link to post
Share on other sites

Thanks for the reply. Yes, I agree, Storyline is making it difficult for sure. Since it is a push error I was wondering if Greensock was tripping on the [] in the variable definition. I will try to strip it down further and point to the uncompressed TweenMax. 

Share this post


Link to post
Share on other sites

Here is the most simplified I can get it. There are just two triggers (storyline coding) that first load the CDN and then tween the box on the stage. You can see for all 3 tweens it throws the PUSH error.  https://360.articulate.com/review/content/e71d0732-f5d1-4f16-817f-c7c3a2c5be3d/review

 

var bx = $('[aria-label="box01"] svg')
TweenMax.set(bx, {transformPerspective:450});
TweenMax.to(bx, 4, {alpha:1, scale:.8, rotationY:45, ease:Back.easeOut});
TweenMax.to(bx, 4, {delay:4, scale:1, rotationY:-45, ease:Back.easeOut});
TweenMax.to(bx, 4, {delay:4, scale:5, rotationY:0, ease:Back.easeOut});

Share this post


Link to post
Share on other sites

It works well so I am tempted to just ignore the error. I use GreenSock outside of Storyline all the time and would love to get it working in our eLearning authoring tool, Storyline. The animation tools are weak in Storyline.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

I don't think the brackets have anything to do with the error. I guess you could try targeting something else that doesn't require the brackets just to prove my theory. 

 

This wasn't a very reduced test case - it's still using a ton of minified JS code (including TweenMax.min.js instead of the uncompressed TweenMax.js file). Unfortunately, I don't think I can troubleshoot it in its current state. I really wish I had a great answer for you. It definitely seems like something is messing with GSAP from the outside. 

  • Like 1

Share this post


Link to post
Share on other sites

Yeah, that actually didn't help much because all your other source is still compressed. Plus I was able to figure out which line it was failing on anyway (when you first posted), and the only explanation I can think of is something else is altering GSAP from the outside. Actually, it looks like there's a completely different error that's totally unrelated to GSAP that fires FIRST, which probably halts JS execution, thus the lazyTweens array never gets created: 

 

Uncaught ReferenceError: callFunctionFromScript is not defined
    at HTMLScriptElement.Script1.script.onload

 

I'd recommend digging into that first. Fixing that may resolve the other stuff. 

Share this post


Link to post
Share on other sites

I took that out and it no longer throws the above error. Still the push errors though. 

Share this post


Link to post
Share on other sites

Storyline does not give me any control over publishing min files.

Share this post


Link to post
Share on other sites

Yeah, something odd is happening in your environment. You can look at the GSAP source code and see that lazyTweens gets defined as an array ([]) in the file itself, before any rendering happens, and obviously "push()" is a valid method on any array...so why in the world would lazyTweens be undefined? I've literally never seen that before. It's like something in your environment is messing with properties/values on the GSAP objects. There are almost 3,000 mentions of "prototype" in your minified JS file (excluding GSAP) which makes me nervous like perhaps they're messing with how Arrays/Objects work (that can throw everything off). Again, it's virtually impossible to troubleshoot on a live, compressed site. I wish I had more ideas for you. Have you asked the Storyline folks? 

 

I'm seeing other similar errors that are unrelated to GSAP:

app.min.js:3 Uncaught TypeError: Cannot read property 'request' of undefined
    at e.onVolumeChanged

 

Share this post


Link to post
Share on other sites

I was just trying to un-minify the app.min.js file to see where the heck that error is pointing to. It is hard to get through to someone technical enough on the Storyline end to understand questions like that. 

Share this post


Link to post
Share on other sites
Found the solution. Not completely sure why putting it in a function solved it but this created zero errors. 

var item = $('[aria-label="myElement"] svg')
go();
function go() {
    TweenLite.to(item, 1, {left:"63px"});
}
  • Like 1

Share this post


Link to post
Share on other sites

Glad you got it figured out, @cwiens. Thanks for sharing. 

 

I wonder if your JS was being executed before the entire document was loaded or something. 

Share this post


Link to post
Share on other sites

I was thinking that too. Thanks for jumping in with your expertise!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.