Jump to content
Search Community

One timeline and only one of elements repeats animation with interval

Norixxx test
Moderator Tag

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

Hi.

 

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.

 

Thanks

名称未設定 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

@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

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.
×
×
  • Create New...