How to use GSAP for animation in Storyline

Jul 15, 2022

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

54 Replies
Math Notermans

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 use gsap.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 });

Jake Holmberg

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

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.
https://360.articulate.com/review/content/41f9e131-b5ba-4bef-8656-d57cd1d6f526/review

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

https://360.articulate.com/review/content/7224b214-e6bc-4111-9821-9c96c0d0aa03/review

A post about GSAP for groups in Storyline is now here available.
https://community.articulate.com/discussions/building-better-courses/animate-storyline-groups-with-gsap

Jordan Best

Hi Math, I'm enjoying your posts regarding GSAP. I've been messing around quite a bit with them and would love to know if you've implemented some of the other plugins like Pixi or MorphSVG? If you have, I'm wondering if you could share how you get those to work in Storyline? Do you load them locally with JavaScript or is there another way? Thank you!

Math Notermans

Yes i have.

Ofcourse you need a Greensock license for the plugins. Pixi and both MorphSVG work great together with Storyline and GSAP. I do think i have some samples in the forum...

https://community.articulate.com/discussions/articulate-storyline/morphing-animation-in-storyline
https://360.articulate.com/review/content/a447cc04-524a-40cb-8345-aa86660f3637/review

I used Pixi before and indeed love it too. Especially in combination with the GSAP Pixi plugin you can create great things.

As im working on a sprite based approach ( in Storyline360 ) to use in a multiplayer game im planning to show on the Articulate Usersdays overhere in Belgium/Netherlands....i might spent some time in Pixi too...as it has great sprite tools too.

I probably cannot share publicly any tips/tricks with GSAP plugins...as they are licensed... but for sure will explain how to use them. 

Merve Satmaz

Thanks, Math. I have a question, I use  Xpercent 'vw' values to get the x and y positions to work correctly when the screen size changes when using gsap and it works but there is some degradation when the user changes the window size with the course open. I saw that you had the same problem in the example you shared. Do you have a solution for this?

Math Notermans

Hi Merve, i am not sure which example you are referring to... and what degradation.

If its GSAP related im quite sure you find a solution on their forum...or make a sample codepen on their forum showing the issue and im 100% sure either Jack or one of the other GSAP heroes onthere will quickly help and solve it.

If its HTML related or Storyline/Articulate related...well this forum is your only chance :-)
Add a sample showing it clearly and i will help.

Kind regards,
Math

David Oliver

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:

  1. Open the Storyline project and create a new slide where you want to add the animation.

  2. Click on the "Insert" tab in the Storyline ribbon and select "Web Object."

  3. 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.

  4. Click on "OK" to insert the web object into your Storyline slide.

  5. 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.

  6. 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.

Dan Lidholm

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.

Math Notermans

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

David  Holzemer

Hi Math,

I'm super new to javascript, but am trying to learn a little :-) Hope you don't mind if I ask probably an incredibly novice question. 

I want to have a 3 buttons on a screen ... and if you hover over one it grows and bounces just a little bit. 

For the trigger I was just using When user hovers over execute JavaScript

This is the Javascript I was trying to make work


//Reference the object
var theObject1 = document.querySelectorAll("[data-acc-text='bounceMe']");

//Animate in GSAP
gsap.to(theObject1,{scale:1.05,ease:bounce.out})

bounceMe is the name I gave the button in the Accessibility panel

Any chance you coud tell me what I did wrong? I'd be greatful to just get something simple to work..lol! 

David