Peach2tm Posted July 19, 2021 Share Posted July 19, 2021 Am I doing this correct - or is there a better way? I have this Timeline which is stepped by clicking ">". The following is what i would like to have happen: Click ">" to start TL: Box 1 moves up and starts yoyo'ing Timeline pauses but Box 1 keeps yoyo'ing Click ">" to start TL again: Box 2 moves up and the yoyo stops Timeline pauses Click ">" to start TL: Box 3 moves up and Box 1 starts yoyo'ing Timeline pauses but Box 1 keeps yoyo'ing I've put the start and stop yoyo on a separate TL. Is this how you would do it? See the Pen KKmddQR by anders-wibroe (@anders-wibroe) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 19, 2021 Share Posted July 19, 2021 Hi @Peach2tm I was going to suggest creating a standalone yoyo tween and calling play() and pause() on it from the callback, but I've stumbled on something that's not behaving as I assume it would. Double checking some things and I'll get back to you 👀 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 19, 2021 Share Posted July 19, 2021 Hey again @Peach2tm Sorry for the delay! Here you go, I'd probably do this... using a standalone yoyo tween and calling play() and pause() on it from the callback. See the Pen b366615be0fd15f52b61fc22746d793b?editors=0010 by cassie-codes (@cassie-codes) on CodePen 4 Link to comment Share on other sites More sharing options...
Cassie Posted July 19, 2021 Share Posted July 19, 2021 If the first green box isn't pausing in the desired position, there's all sorts of other methods you can use. You could pause it at a certain point in the animation, seek to a point, resume instead of restart from the beginning. All sorts. All the different methods are in the side menu of the docs here 1 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 20, 2021 Author Share Posted July 20, 2021 @Cassie Thx for your replies. Great input! One thing I can't figure out is why y: (or translateY for that matter) works the way it works in this example: See the Pen ExmvjjZ by anders-wibroe (@anders-wibroe) on CodePen I'll admit, I'm pretty new to css transforms, but it seems that setting y: is relative to the elements original position and not it's current. As you can see in the example the box moves from y=200 to y=100 and then starts yoyoing between y=100 and y=300 as the yoyo's y:-100 seems to be from the elements starting position. Is there anyway to make the yoyo's y:-100 based on the elements current position - or should i simply use top: and then calculate the offset? Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 20, 2021 Solution Share Posted July 20, 2021 Pleasure! Glad it helped. Yep, you're right there. You can use relative values to add or subtract an amount from the current position - like this? See the Pen 7489b3289231eba638515977090a6c71?editors=1010 by cassie-codes (@cassie-codes) on CodePen Is that what you're after? 3 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 20, 2021 Author Share Posted July 20, 2021 That is perfect. Thank you so much! 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