Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

One timeline and only one of elements repeats animation with interval

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I have one timeline(Max) and animating three elements sequentially. 

I want 2nd element to fade-in and also want it to animate(shake) endlessly with interval immediately after fade-in.


I have an example code in codepen. If someone got some time please take a look.

I thought repeatDelay property would work but it comes in every yoyo animation.

What I want is 5 yoyo animations then 2 second break and so forth.



名称未設定 2018-09-26 18-44-52.png

See the Pen xavdgR?editors=1010 by nori2tae (@nori2tae) on CodePen

Link to comment
Share on other sites

Hi @Norixxx :)


If I understand your desired result correctly, I'd probably go with an onComplete call when that 2nd element completes its fade-in on the main timeline. Maybe something like this:



See the Pen bxXMXj by PointC (@PointC) on CodePen


Does that help?


Happy tweening.



  • Like 4
Link to comment
Share on other sites

@PointC Thank you!! That's exactly what I was looking for. Callback it is.

I tweaked a little so that I can restart animation via button.


One question though.

I put kill() method to 2nd timeline when I hit the restart button.

Does this reset everything(include repeat) and gives it a clean start without overlapping repeat animation?

It looks OK but i want to make sure.


See the Pen eLqjVe?editors=1010 by nori2tae (@nori2tae) on CodePen


Link to comment
Share on other sites

You can kill() it if you want. But since you're just creating the same timeline over and over, my personal preference would be to create it once and then play/pause/restart it etc. 


See the Pen xyKwMa by PointC (@PointC) on CodePen

Also keep in mind that killing a timeline won't automatically reset elements to their starting points. So if you need to animate them again, they may not be where you expect them to be.  In this case it works fine because you're using a fromTo() tween on the main timeline for that element. 


Happy tweening.




  • Like 1
Link to comment
Share on other sites

Thanks again!


Pause(0), then play(). How simple was that :-)

I realized that I need to practice and improvise more.


You are my big help!

Link to comment
Share on other sites

Glad you figured it out. And you don't need to pause(0).play() - you can simply play(0) :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.