Jump to content
GreenSock

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

How to loop with overlap?

Recommended Posts

Following my previous question about looping. After I tryed to modify it a little bit to add overlaping (so the next animation trigger not after previous completely ends, but slightly earlier) I have issue that I can't solve.

 

First I tried to use simple setInterval. Works fine on first sight, until I switch browser tabs. After that looks like asynchronisation is happens. 

 

My question is, how do I loop animation, but add some shift on next animation start? delay is not helping in this case -  

 

What I need is both elements start to animate in the same time (one leaving, the other entering). Is there some native API for this? because setInterval is not working.

See the Pen EJReev by bdrtsky (@bdrtsky) on CodePen

Link to comment
Share on other sites

Ok, I fix it by using Vue.js `transition` 

Still wonder about `vanilla` way ?

Link to comment
Share on other sites

If I understand your question correctly, calling the function after each element finishes won't give you the desired behavior here. A timeline could work, but the problem with that is a timeline is linear and the playhead can't be in two places at once so the first element won't restart until the last completes. You won't get that overlap of the last and the first. (I assume that's what you're going for here.)

 

When I need to have the first element restart before the last finishes I'll usually loop through and create separate timelines for each element and adjust the repeatDelay so the 1st element timeline restarts before the last one ends. Here's a quick example:

 

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

 

I also added the element timelines to a master for extra control, but that's not necessary to make this work. Obviously you can adjust the delay and repeatDelay to your liking. Hopefully that helps a bit. Happy tweening.

  • Like 3
Link to comment
Share on other sites

Hi @bdrtsky

 

This would be my option: 2 x staggerTo, slightly offset by position parameter 'testIt' - more here

 

See the Pen jRKQBK by mikeK (@mikeK) on CodePen

 

 

Happy tweening ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

Ok my take on this is to use onStart instead of onComplete in the out animation instance and in that callback use a delayedCall which is a timer but it runs with GSAP ticker so everything will be synced perfectly if you change browser tabs:

 

See the Pen KYerxb?editors=0010 by rhernando (@rhernando) on CodePen

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

Pretty fancy for holiday weekend coding @Rodrigo;) 

  • Haha 1
Link to comment
Share on other sites

Ha!! yeah the extra rest can do that ;) 

  • Like 2
Link to comment
Share on other sites

Thank you for your answers and examples, guys! Very helpful.

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