Jump to content
GreenSock

Oliver Chen

Could the first target repeat start before the last one finish timeline animation?

Recommended Posts

Hi everyone

it's me again, thanks Zach Sucier and Cassie help me compelete last Issue, result like this url:
https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js

 

 I face another question is could timeline animation repeat start before the last item finish animation?

 

lastItem(first round timeline animation) ---- firstItem(second round timeline animation)----secondItem(second round timeline animation)

 

should I add another timeline follow the previous one?

Link to comment
Share on other sites

Hi @Oliver Chen. I read your question a few times but I don't understand, sorry. 

 

A repeat will always repeat the whole animation, of course, but if you need to loop over a subset of an animation, you can pause it and then use another tween to animate its playhead, sorta like:

let tl = gsap.timeline({paused: true});
tl.to(...);

// only animate to the 10-second spot, and repeat.
gsap.to(tl, {time: 10, repeat: -1}); 

 

Link to comment
Share on other sites

Thanks for the reply, let me think about it

 

Maybe it would be better to use pic to describe my question.
1990511424_2021-12-081_56_41.thumb.png.5385a458555176cd73147283c6b39924.png

Link to comment
Share on other sites

Sorry, that didn't help me understand. I think I'm even more confused now :) 

 

You can have total control over where things are placed in the timeline using the position parameter

 

Perhaps it would help if you simplified things to only 3 boxes and provide a CodePen demo. If you can find a video example of what you're looking for, that would help too (or another web site with a similar effect). 

Link to comment
Share on other sites

https://imgur.com/gallery/BCTwrx2
Here is a shorten version animation, box0 will wait box2 reach the final position, then jump into start position, could I make this animation like a loop, while boxes reach final position, they show on the start position and enter next loop one by one?

 

And here is the codesand box which  I code this animation, it works the same function as codepen.
https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js

 

Thanks.

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