Vuejs loop animation infinitely

[James07]

Hi! Im using gsap in vuejs. I just want to know if there's any way that i can loop infinitely those 2 functions? I already tried using the timeline. But unfortunately, they are animating at the same time. 

See the Pen Exdjmqy by gfifhy (@gfifhy) on CodePen

[Rodrigo]

Hi @James07 and welcome to the GreenSock forums!

 

Indeed a single timeline is the way to go in this case, just need to add the animation for each block on a loop without any delays and then, after the loop, add the blink animation to the same timeline.

 

Here is a fork of your example:

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

 

Also notice that I used GSAP Context in this case, which makes cleanup when a component gets unmounted super easy and also has a few other perks that are worth exploring and using in Vue Apps and Vue environments:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps. If you have more questions let us know.

Happy Tweening!

[James07]

Thank you so much!! It is working now