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...
GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. Here are the steps to use GSAP for animation in Storyline:
-
Open the Storyline project and create a new slide where you want to add the animation.
-
Click on the "Insert" tab in the Storyline ribbon and select "Web Object."
-
In the "Web Object" dialog box, enter the URL for the HTML file that contains your GSAP animation code. You can also choose to display the HTML file in a new browser window or within the Storyline slide.
-
Click on "OK" to insert the web object into your Storyline slide.
-
Open the HTML file in a text editor and add the necessary GSAP animation code. For example, you can use the TweenMax library to animate objects on the screen.
-
Save the HTML file and preview the Storyline slide to see the animation in action.
Note that the exact implementation of GSAP in Storyline may vary depending on your specific project and animation requirements. However, these basic steps should give you a starting point for integrating GSAP into your Storyline project.
Comeon David, dont dump generic info thats incorrect too.
GSAP is included in Storyline360 and you can use it right of the bat with simple JS code i show abudantly.Hi Math,
I've been reading through your posts about GSAP and it looks great. I tried some of them and it looks really nice. Thanks for all the info.
However, I have problem with responsiveness and I cannot find a solution. Is it possible to use an object, like a rectangle to limit the playground for the animation to just take place inside that box? Now, I am using vw & vh but as soon as I change the size of the browser window the animation ends up in the wrong place.
Hope you can help me.
Hi David,
Thats one of the big issues of the Storyline player. Would be great if Articulate gave us access to a function that calculates x/y the way they do in the player...then you could use that ;-)
You can easily use a rectangle to limit your animation. Some calculations needed on the x/y/width/height of your boundary/rectangle and use that as reference for your animation instead of vw & vh. In fact that probably immediately solves your responsive player issue as your boundary/rectangle will be properly positioned/scaled. But you do have to recalculate the position of your animated element on a browser change.Kind regards,
Math
