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 point can be set by Gsap and thus change the effect of your animation completely.

Here you can see how this works. To be continued.

https://360.articulate.com/review/content/8b6932db-b253-4e60-b0df-e7569a2cf0ea/review

25 Replies
Math Notermans

Added a next step in animation with GSAP. Sequencing of animations. When animation A is done, start animation B. All this is built into GSAP and im quite sure the Storyline timeline makes use of this. In the end you can build your own custom timeline.

sequence

As especially the custom code part needs some extra explanation how it works and what you can test... i made an extra video showing that.

Math Notermans

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.

Math Notermans

As said local scope was the main issue why your setup didnot work. The simplest way to solve that in simple projects is by using variables to pass along your tweens.

https://360.articulate.com/review/content/c033023b-7734-4cab-982c-b51a21412560/review

scope1

As you see here i added a variable 'redAnim' to which i write the tween for the red circle.
Now i can call any GSAP call on it at the buttons.

var redAnim = player.GetVar("redAnim");
redAnim.restart();

Luckily GSAP is that intelligent it recognizes its a GSAP tween, nevertheless its just a text variable.
When clicking pause you will notice some weird things when playing or reverting...somehow the tween gets changed and the start / endpoint change somewhat. I guess using GSAP timelines would be better for this kind of setup.

As said when time permits this weekend i make a setup with WebObjects to show the perfect setup.

Math Notermans

https://community.articulate.com/discussions/building-better-courses/scrolling-course

The link

GSAP uses ScrollTrigger plugin for the effect you aim at. In Storyline you need to add a event for scrolling... and best way to create a scrolling page is adding elements to scroll ( not 3 as in my sample...but all you need ) on a single slide. 

Math Notermans

I checked the Atmos experience somewhat better, and clearly a few options to achieve something alike in Storyline with GSAP and ScrollTrigger. Make the flythrough as a movie ( mp4 ) and use ScrollTrigger to go through it step by step when scrolling. For sure possible... you need to add all content in your movie except for static elements that show on top on specific triggerpoints. I suspect the ATMOS experience is SVG animation. Maybe all 3d rendered with Three JS directly on Canvas. Thats possible too with Storyline, as my samples on the forum show quite some possibilities, but is way more complicated to get right.

Here for example you can see a 'StarWars' text intro look-a-like. All GSAP offcourse.
I do think this is easy to combine with ScrollTrigger.
https://community.articulate.com/discussions/articulate-storyline/3d-rotation-on-x-y-z-axis-of-shapes-and-texts
https://360.articulate.com/review/content/ba69712d-da72-41b0-9326-88523d89a8e9/review

Math Notermans

I got a first simple sample of Three JS in combination with GSAP working in Storyline. Nothing more then a simple rotating 3d cube, but its a start. I wanted to add it to Review but alas Review gives masses of errors with it. So screencaptured showing it as Web only.

Also figured out that Atmos uses GLTF format to load 3d models and animate those. Exported with Khronos from Blender to GLTF and those are imported into a browser to animate with Three JS.

Math Notermans

Have to say i love these kind of experiments. Three.js is really great and has lots of possibilities. Seen complete games with it.... really cool. But its a steep learning curve... Trying to create something of a cloud results in this ;-) But you can indeed zoom in and out...and basically turn around as its a 3d object...

Ali Nasser

Hi Math,

How do you address the broken animations that you get when you adjust window size? Storyline re-writes inline styles as the window size changes since it is responsive but that overwrites the inline styles that gsap adds to the element. You can see an example of that if you run the animation, resize the page, then run the animation again.