Repeat animation uneven times

[ludo]

Hi, 

 

New to the forums, but awesome community you have going on. 

 

Just started dabbling in GSAP, and I am sure this is a quite easy question - but having some issues with trying to achieve the effect I am after...

I am creating a banner, which should animate for X number of repeats (elements sliding in, then out). The final iteration I want the elements to only slide in, and not slide out. 

 

I have three timelines: 

1. Intro - managing the sliding in of elements

2. Outro - managing the sliding out of elements

3. Master - chaining these two together

 

I tried using the onComplete   callback function to run the intro() a final time before completing the iterations.
However, when doing so the whole animation somehow bugs out and elements appear and reappear randomly. 

 

Another bonus effect which I am after (not sure if possible?) is to run the full animation for a maximum of 30 seconds, adjusting the number of repeats accordingly. 

 

Anyone has some good input on this one? 

 

Thanks!

See the Pen OJaLOwZ by codepenuser9 (@codepenuser9) on CodePen

[Rodrigo]

Hi @ludo and welcome to the GreenSock forums!

 

Maybe you're looking for yoyo and repeatDelay:

var master = gsap.timeline({
  repeat: 2,
  repeatDelay: 2,
  yoyo: true,
});
master.add(intro());

Here is a fork of your codepen:

See the Pen bGQbjmx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[ludo]

Hi @Rodrigo, 

 

Thank you very much for the input!

I did investigate Yoyo, however the image animation needs to go out to the left rather than right otherwise it would have been the perfect option

 

I believe I managed to solve it by returning a new timeline from each function call, rather than setting global vars, and modifying the onComplete function like so (initializing a new copy of the intro() timeline, passing paused:true and starting it through .play() function). 

 

...

onComplete: function () {

    intro({ paused: true, delay: "2" }).play();

},

});

 

[Rodrigo]

Hi,

 

Yeah I see what you mean. Maybe this approach works:

See the Pen bGQbjmx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!