Tweens with different transformOrigins

[gpalmer]

Hello,

I am trying to tween a shape that does the following:

• scales at its center point
• rotates around some external point
• moves the external point that it rotates around along a curved path

To give a clearer picture of what I am trying to accomplish I have included a sample code pen demonstrating the animation requirements. The target shape is the red box where the line and blue box are there only as guides.  

 

I was hoping to find a way to tween the red box without having to wrap it in the positionDiv and rotationDiv divs used in the sample.

Thanks for your help,

 

Gerry

See the Pen vLpGPV by anon (@anon) on CodePen

[Carl]

Thanks so much for the cool demo. Very helpful.

 

Frankly, nothing comes to mind that doesn't involve some sort of nesting like you have. It's possible someone else may have an idea, but I'm not seeing it at the moment.

 

As a side note, if you want to use an SVG path as the actual motion guide for an object check out Animate along an SVG path: http://greensock.com/morphsvg-update 

[gpalmer]

Thanks Carl, I thought that was the case but I figured it didn't hurt to ask . Also appreciate the link to the morph plugin, I'm sure that will come in handy in the future.