GSAP 3.5.1 ( latest version ) is now included in Storyline 360
Nov 22, 2020
A few months ago i discovered Storyline uses the GSAP Tweening library for all its animation features. Any animation you make in Storyline somehow is triggered by GSAP under the hood of Storyline. Then i noticed that Articulate still was using TweenLite a very old and limited version of GSAP... back from 2014 :-)
Well today i discovered Storyline updated the GSAP libraries and from this day on you can animate your objects with GSAP javascript code.
For example:
Give any object in your Storyline the 'accessibility name' of "myName"
Then add a trigger to call this Javascript:var myElement = document.querySelectorAll("[data-acc-text='myName']");gsap.to(myElement, {duration: 2,scaleX:2,autoAlpha:0.5, x: "+=500"});
Your Element will move and fade and scale over the x-axis.
Really great news Articulate acted and updated GSAP.
I will check whats possible with the built-in GSAP code and what not and show that here...
60 Replies
Hi Math, thanks for posting this, you've helped me before with moving an element. I've now figured out how to rotate but I'm having trouble looping the animation.
The element basically rotates clockwise 12 degrees, then with a cue point I have it rotate counterclockwise -24, then +24 and that's where I want it to loop but it breaks upon timeline looping. I want it to rotate back and forth smoothly and endlessly.
Possible?
Hi D R,
For sure possible. Let me first explain what is causing the glitch in your animation.
For a seamless loop, start and end need to be exactly the same. As you end differently then you begin...a glitch will always be visible. So you need to end it exactly the same or change the beginning so it will fit.
Using a Storyline layer,timeline and cuepoints also makes it harder then needed. You can as easily use GSAPs buildin timelines to do this.
So lets see how to get this done perfectly.
Approach 1:
Using your Storyline i changed the jump at the end of the layer to go to cuepoint #1.
Prolonged the timeline on the layer a bit, so you see it happening better...
And added a cuepoint where the animation is set to 12 degrees.
As you can see when publishing, there is still a glitch when looping. I do think this is SlideLayer and Cuepoint related as Storyline is not precise enough to get this working perfectly.
Approach 2:
Jumping back to 0 is often better for Storyline timelines. And setting the green Blooddrip to 0 at cuepoint 5 shows that the loop now is seamless. But we want it to loop at 12 degrees.. How to do that ?
Approach 3:
Tried to add a Boolean variable (True/False) that will be set to True when the SlideLayers timeline ends...and then at start sets the drip to 12 degrees. At first this failed too... so i changed the trigger you had jumping back on the timeline into 2 triggers...hiding and showing the timeline at the end. This worked well and now it is looping nicely. This fix might work on your original too.
Approach 4:
Using GSAP's timeline to control all. As you can see here...this is really powerfull and easy.. Using yoyo to go back and forth.
Here you can see all approaches and the Storyline changed is attached.
https://360.articulate.com/review/content/b276fadf-093d-4578-8f3f-95daa2d47a41/review
Do hope this helps you to continue your yourney :-)
Oh there's a "yoyo" function in gsap, nice! Yeah that solution works well. downloading the story file now. Thanks so much.
I tried setting yoyo to false so that it just goes left right over and over without that little bounce and it seemed to work smoothly at first but now it jumps upon the loop.
var tl = gsap.timeline({repeat:-1,yoyo:true});
What does the repeat:-1 mean?
Also what ease parameters are there?
thx for your help!
Repeat -1 is an infinite repeat. All you want to learn and discover you can get from the Gsap site.
https://greensock.com/gsap/
I recommend to start with this step by step.
https://greensock.com/get-started/
You can test eases here...
https://greensock.com/docs/v3/Eases
A few caveats to be aware of.
Text in Storyline are lines of SVG. And selecting a SVG properly to animate its attributes ( color, line width etc. ) is tough. You can do it, but you need to select the path.
Nice, I'm checking out that Gsap site.
Am I able to remove the yoyo:true? It seems to make it glitch:
https://360.articulate.com/review/content/718337d1-4b18-4fa0-be73-82b430383c50/review
Edit: after reading the site, I realized that yoyo is what makes it play backwards so it's necessary. But why does it do that little half-way bounce? I want it to just go from -24 to 24 degrees like a clock.
Probably an ease you have. Try setting ease:"none".
Do share a sample of your story, as its only guessing like this..
Hey Math, I've read this thread with interest and I am very jealous of what you can do with GSAP/Javascript. I know nothing about either but would like to learn more - can you recommend a good resource to start learning more about GSAP/Javascript?
Thanks
Alex
Javascript sources all around the web to find and learn. But the biggest issue is figuring out what Storyline supports and what not... how to debug your code in Storyline and figure out whether something might work or not... i just gave a few weeks workshops for Ideas ,some of them no Javascript knowledge, some more advanced. I am planning advanced workshops for multiplayer games in Storyline in the summer, but thats advanced indeed. If enough people are interested i can plan 1 or 2 online workshops getting started with JS and GSAP in Storyline.
I'm a +1 for that workshop Math!