Forum Discussion
How GSAP can Transform Storyline Animations
GreenSock Animation Platform (GSAP) is a JavaScript animation library that can be used to create dynamic and engaging animations in e-learning courses built using Storyline. While Storyline provides built-in animation tools, many e-learning developers prefer to use GSAP due to its robust features and flexibility.
What are the essential steps involved in incorporating GSAP into Storyline, and what are some best practices that developers should keep in mind while using this animation library? What are the potential challenges that developers might face while integrating GSAP with Storyline, and how can they overcome these challenges? Additionally, what are some examples of animations that can be created using GSAP in Storyline, and how can developers use the full range of features offered by GSAP to create dynamic and interactive e-learning experiences?
Storyline360 has the GSAP engine build in. So you can use it directly. In fact most of Storyline's build-in animations are controlled by GSAP.
2 main issues using GSAP in Storyline. Scope...as each trigger has its own scope, it can be tricky. And when using Javascript Storyline's own timeline doesnot have any knowledge of any animations you do with JS and GSAP. Only way to give Storyline a clue about what is happening are variables. So scaling an element and then scaling the browserwindow will result in wrong positioning and scale of your GSAP controlled element. You can however tackle that. On my posts on the forum a lot about Javascript and GSAP as i use it in everything i do.If you check my posts, you find a lot GSAP related tips and tricks, inclusief sample. Due to everchanging Html setup Articulate does, some onder sample might need some troubleshooting. Here eg. Is one of them.
Checking that one you can see its as easy as this:
gsap.to(yourselector,{duration:1,scale:2.45});
I made a few examples using GSAP. In this example, I explained how to integrate GSAP into Storyline, you can review it here. Link
Amazing what one can accomplish with GSAP in Storyline. While Math's posts have been very very useful, I wish Articulate would come up with a mini-guide on using GSAP.
As Articulate offers little or no Javascript support, its up to us in the community. GSAP itself has great tutorials, Snorkl-TV especially is a great resource. Biggest problem however is Storyline itself and its pecularities regarding HTML , CSS and Javascript. Nevertheless the mentioned resources should help greatly. And as i always help, do ask if you need particular help.
I've been searching for some sort of code, script, etc. that will allow me to scale an image to large to smaller, or vice versa, but I can't seem to find one anywhere. Any suggestions?
