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.
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.
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.
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.
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.
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.
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.
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.
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.
Well the ATMOS version uses Three JS probably in combination with GSAP... You can do something similar with Storyline... trying to get Three JS working in Storyline now, but thats a lot complexer then using a premade movie...
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.
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...
Wow, great job ! I didn't know Three JS. I'm sure a lot can be done on Storyline as long as you know how to code (which, unfortunately, is not my case yet).
Originally im a designer/illustrator too. When flash rose i got interested in scripting. Learned javascript along the way. Working on courses for Javascript in Storyline.
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.
54 Replies
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.
This post was removed by the author
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.
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.
Will show how to use ScrollTrigger soon...
Thanks for the fast answer ! I'll check this out.
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
Hello Math,
Interesting ! I'd love to try that.
How can the plane and background keep moving (slowly) if the scrolltrigger "pauses" the mp4 file ?
Thanks again
Well the ATMOS version uses Three JS probably in combination with GSAP... You can do something similar with Storyline... trying to get Three JS working in Storyline now, but thats a lot complexer then using a premade movie...
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.
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...
Wow, great job ! I didn't know Three JS. I'm sure a lot can be done on Storyline as long as you know how to code (which, unfortunately, is not my case yet).
Originally im a designer/illustrator too. When flash rose i got interested in scripting. Learned javascript along the way. Working on courses for Javascript in Storyline.
Great features in here with wide options!
Thanks Math for sharing this experience.
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.