peter. Posted February 27 Share Posted February 27 Trying to basically "walk" a square across the screen the way you'd tip a heavy box across a room to move it. For it to work, I need to update the transform origin (i.e. rotation point) of the box for each step but since the origin is relative to the original box position, it doesn't quite work. Any thoughts on getting this to work? Currently I'm just using a div but I'm open to SVG solution. See the Pen ExJYNvy by pfbarnet (@pfbarnet) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted February 27 Solution Share Posted February 27 Hi @peter. welcome to the forum! I've used the smooth origin helper function and one tween on a timeline that gets its transformOrigin updated on each repeat. I'm not sure what you want to do with the rest of the animation, but this show you how you can update the origin (smooth) on each tween. You can also set an onComplete: on each subsequent tween (not on the timeline) and do the same logic. Hope it helps and happy tweening! Edit: I’ve placed some comments in your JS to better explain things, please be sure to read through them! See the Pen ZEZzeWj?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 2 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