Share Posted May 13 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 More sharing options...
Share Posted May 13 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 13 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now