Forum Discussion
How to use GSAP for animation in Storyline
As i get this question quit often, i am making a online tester for Gsap animation in Storyline. First step is scaling an image. And defining where you want to scale it from. This transformation poin...
Hi Math,
Thank you so much for all your demos! I've learned a ton. I was trying to see if I could use buttons to control the animation but my logic is not working. I tried returning an animation and setting another javascript trigger on a button to access the play method, but nothing happened.
Biggest issue in your setup is scope. As Storyline on publish creates a user.js file in which every trigger is setup in its own function...well all triggers are thus locally scoped and what you do in one trigger is totally unknown to any other trigger.
There are several workarounds for this. Offcourse the most simple one is calling all needed code in any trigger where you need it. However this can cause unneccessary duplicates of code. You need selectors on any trigger eg. Other solution is passing along values to Storyline variables. Disadvantage of this is you need to read and write those variables anytime you need them.
Here im showing a solution i use a lot. Creating global variables on top of Storyline, in the index.html in fact. These will be available to any trigger on any page/slide/layer in Storyline.
https://community.articulate.com/discussions/articulate-storyline/global-scope-for-javascript-variables-in-storyline
Disadvantage offcourse is the tedious way WebObjects work when adding/updating them.
Easiest solution for your .story is doing all in 1 trigger, but as said above, that makes it less reusable and in complexer projects will get unmanageable. So when i do have some time this weekend, i make 2 samples showing the workarounds. One as said, all in 1 trigger and one with my own solution using global scope in WebObjects.
