Jump to content
GreenSock

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

How to infinite timeline loop without gaps

Recommended Posts

Hi all, I'm having trouble with making this feel like a seamless infinite loop, there's a huge gap between repeats. I want this to feel like the avatars that are popping in are endless and at the same frequency as the original timeline without any gaps. How do I go about doing this?

I saw several different examples of infinite carousel approaches with TweenMax + modifiers but I needed to use timeline to finely control how my elements "enter" and "leave" a general scene.

Also, is there a good way to start with the image showing and then moving the elements in an infinite loop based on where their starting position is? This feels like it will become even more complex to achieve.

Cheers,

See the Pen VNJoQr by yoshyosh (@yoshyosh) on CodePen

Link to comment
Share on other sites

Hi @yoshyosh ... you were very, very close!! In the following pen, have a look at lines 10 and 14. Instead of repeating the master timeline (which will wait for all child tweens to complete, resulting in a gap), repeat each child tween independently.

 

See the Pen JVgPLB by sgorneau (@sgorneau) on CodePen

  • Like 3
Link to comment
Share on other sites

3 minutes ago, Shaun Gorneau said:

Hi @yoshyosh ... you were very, very close!! In the following pen, have a look at lines 10 and 14. Instead of repeating the master timeline (which will wait for all child tweens to complete, resulting in a gap), repeat each child tween independently.

Oh man! Awesome, I totally overlooked that :) thank you

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