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.
You can use % or em in GSAP, that fixes it. Or use elements in Storyline to get the needed x/y values. With getAttribute in GSAP you can get the needed values.
Hello Math, Is there a way to get the shape/png/object to return to its original scale when clicking outside the object again? Or maybe when the user clicks it again after it has been clicked and animation completes?
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 });
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!!!
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.
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....
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...
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!
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...
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.
Thats for sure possible too. You have to communicate somehow from Storyline to the WebObject and back. I am gonna work on the sample above as i do like WebGL for 3d on the Web, and as you can control it with Javascript.
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?
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.
Ah well that the sizing / repositioning issue, using % and/or vw/vh calculations fixes that. You can add a eventhandler to check whether the window is changing and change the image while changing the window.
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.
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.
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.
54 Replies
You can use % or em in GSAP, that fixes it. Or use elements in Storyline to get the needed x/y values. With getAttribute in GSAP you can get the needed values.
Hello Math,
Is there a way to get the shape/png/object to return to its original scale when clicking outside the object again? Or maybe when the user clicks it again after it has been clicked and animation completes?
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 });
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!!!
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!
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.
Hello, could we use it to make a webObject rotate ? (I think of a 3d model for example)
Thank you for all your tips !
For sure... the biggest issue is getting a selector for the WebObject. If you have that...you can simply use GSAP to rotate it.
If you however mean control animation inside a WebObject... so the html in it..from Storyline..well thats possible too, but what more complex.
As you can see here... thats easy.
https://360.articulate.com/review/content/7db4273f-fc1b-4558-928c-7117be2d0d81/review
Im gonna make a sample where i change the settings of the animation in the WebGL-WebObject. Stopping it, changing rotation speed and things like that.
Thank you Math, it's really awesome !
You know, what I would like is to manipulate a 3d object by sliding the object (with gesture or mouse).
I am into interactive module atm (like everybody ?).
Thank you for your help !
Thats for sure possible too. You have to communicate somehow from Storyline to the WebObject and back. I am gonna work on the sample above as i do like WebGL for 3d on the Web, and as you can control it with Javascript.
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?
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
What I want to tell is actually as in the image below. This kind of corruption happens when I change the window size while the file is open.
Ah well that the sizing / repositioning issue, using % and/or vw/vh calculations fixes that.
You can add a eventhandler to check whether the window is changing and change the image while changing the window.
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
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 David,
It looks like you're missing some quotes:
OMG!!! It actually works :-) Thank you so much Jordan.. Can't wait to do more :-)