jiggy1965 Posted May 13, 2023 Share Posted May 13, 2023 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...
Cassie Posted May 13, 2023 Share Posted May 13, 2023 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...
jiggy1965 Posted May 13, 2023 Author Share Posted May 13, 2023 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