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,
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
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
