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
Will show how to use ScrollTrigger soon...
Thanks for the fast answer ! I'll check this out.
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.
You can use % or em in GSAP, that fixes it. Or use elements in Storyline to get the needed x/y values. With getAttribute in GSAP you can get the needed values.
Hello Math,
Is there a way to get the shape/png/object to return to its original scale when clicking outside the object again? Or maybe when the user clicks it again after it has been clicked and animation completes?Hi Jake,
Offcourse.
For clicking outside an object you would need to add custom mouse-event handlers...as Storyline doesnot have these default. When you add a custom mouse-event handler...you can either loop all elements and check whether they are not at scale 100% (1) and reset them...or add a custom variable of the last clicked element and only scale that back to 1.
Clicking an object again to reset scale you can use a Boolean variable to check if it has been clicked...or even better usegsap.getPropery( clickedElement, "scale")to check the size...and when that is not 1.... well scale it back to 1.gsap.to(clickedElement, {duration:0.5, scale:1 });Thanks Math,
I'm currently working through Javascript, html, and css course through udemy hopefully I'll be able to piece together a good string for the boolean once im done. In the mean time I can move forward with this training without any resets. I appreciate your help!!!
