Jump to content
Search Community

Replay not continuously

jiggy1965 test
Moderator Tag

Recommended Posts

I'm a bit puzzled... I've got this red element that should move down, up and back to the middle of the container div again. 

So I start by setting it to y:75. Then a second later it moves down to the bottom. When the timeline is at second 2 it moves up to the top and when the timeline is at second 3 it moves to the middle again. And then it should repeat, for which I've used repeat:-1. 

The problem is that there seems to be a slight delay before the animation starts from the start again. When it repeats it should wait  until 1 second pas past (to run the y:150 line) etc. But it look like it is waiting a second or 2 before it restarts again. What am I doing wrong?

See the Pen bGxJaKd by coder1965 (@coder1965) on CodePen

Link to comment
Share on other sites

Hi there!

 

I'm confused by this 
 

Quote

When it repeats it should wait  until 1 second pas past (to run the y:150 line) etc. But it look like it is waiting a second or 2 before it restarts again.

When it repeats you want it to wait for one second, but currently it looks like it's waiting 2 seconds? Is that what you're saying?

 

If so, it is waiting for 1 second -  It's behaving as I'd expect, maybe you can explain a little more clearly what you're expecting?

I would also probably write it like this - you don't need position parameters here as you've set them all up to play immediately after the previous tween which is the default.
 

See the Pen gOBKVqM?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

What I expected was for the animation to repeat fluently without delays, but apparently I used 'start' wrong.  Or rather the timing of it. When I used this:
 

tl.set('#red', {y:75}, 'start'); 
tl.to('#red', {y:150, duration:1}, 'start+=1');
tl.to('#red', {y:0, duration:1}, 'start+=3');
tl.to('#red', {y:75, duration:1}, 'start+=5')

It worked like I expected. With 1 second between each frame and when it repeats it starts with that same 1 second delay. In my first code it appears like somehow an extra second was added before the start of the repeat, but what was because of that start+=1 in the first tween (while the other 2 tweens followed up on each other directly without a 1 second pause).

 

So that is solved.

 

  • Like 3
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...