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.

31 Replies
Math Notermans

Hi Jake,
For clicking outside an object you would need to add custom mouse-event Storyline doesnot have these default. When you add a custom mouse-event 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 use gsap.getPropery( clickedElement, "scale") to check the size...and when that is not 1.... well scale it back to 1., {duration:0.5, scale:1 });

Math Notermans

Recently someone asked me whether its possible to trigger elements on SlideLayers with Javascript from the main layer. In fact thats easy with Javascript as the SlideLayers are treated as separate DIVs, nothing more , nothing less. So the selector(s) you use on the main timeline will also work on SlideLayers... if they are visible ofcourse.

Here you can see the sample i made for that.

Adding the story of that to this post too.

What i wanted to make however was a rotating animation of a child around a parent. Earth around the sun... and with that i encountered the issue that the transformation point needed to be outside the bounds of the element....

to be continued...

Math Notermans

Next one in this series is about animating groups in Storyline with GSAP. For now only a Review link,  more complete post including source file in progress...

A post about GSAP for groups in Storyline is now here available.