Jump to content
Search Community

Using Greensock in Storyline

cwiens test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 

Link to comment
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. 

Link to comment
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. 

Link to comment
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});

Link to comment
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
Link to comment
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
Link to comment
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. 

Link to comment
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

 

Link to comment
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. 

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...