Forum Discussion
GSAP 3.5.1 ( latest version ) is now included in Storyline 360
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. T...
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.
