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 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
Wow! This is so helpful, Math! Thanks for putting this together and for sharing it with the community!
Thanks for sharing, I learned a lot from your previous post. This demo is brilliant.
Just updated it with the next section. How to use 'easing' in Storyline360 with GSAP. Proper use of easing can make the difference in any animation. Slowly starting an animation and then at the end accelerating... to name a basic one.
Love it @Math - Keep them coming!
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.
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.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.
Will check it first thing tomorrow morning Sam
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.
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
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.Thanks Math! That was a fast response. Thank you so much for all the help!
Hi Math,
Do you know how to change an image or slide when user scrolls ?
I'd like to achieve something similar to this : ATMOS - by Leeroy . They've used GSAP to develop the project. And I believe this would be pretty interesting for future elearning projects.
Best regards,
Eloise
Hi Eloise, yes its possible. Do check my posts, i wrote one recently about scrolling pages.
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
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.
