Jump to content
GreenSock

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

One timeline and only one of elements repeats animation with interval

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 post
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 post
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 post
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 post
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 post
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 post
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.

×