Update transform origin in Timeline animation to "walk" a square across the screen with rotation

[peter.]

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

[mvaneijgen]

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