How to use GSAP for animation in Storyline

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

Nice!

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

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!

Hello, could we use it to make a webObject rotate ? (I think of a 3d model for example)

Thank you for all your tips !

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?

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.

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

Hi. I want to create a color filling animation inside the svg object on Articulate. The svg element is a letter and I am trying to give the effect that this letter is written when the interaction starts. Do you have any ideas about this?