Help with rotation and transformorigin

[Eugene Rayner]

Hi there,

 

Im essentially trying to create some cool rotation effect animations.
I have linked my codepen.

 

I want the top box to roll back out another way when you click '.top'. Roll our to the right would be perfect.

I'm also trying to reduce my code footprint.. any help as to how I could possibly use more variable or a loop etc would be greatly appreciated.

 

Cheers

See the Pen boZZRv by erayner (@erayner) on CodePen

[Carl]

I think a problem is that you are setting the x and y to -100%.

The transformOrigin of an element is always relative to where it is naturally in its "un-transformed" state.

 

With out any prior transforms what you want to do is pretty straightforward:

 

See the Pen wrOZBR?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Visit: https://greensock.com/svg-tips

Scroll to the section named Challenge: set transformOrigin without unsightly jumps

Watch the video and and demo.

They demonstrate how DOM elements make it very problematic to alter / track the transformOrigin once an element has been transformed. 

with smoothOrigin for SVG we are able to overcome that weirdness.

 

It can all be kind of confusing, but my advice is to not do any transforms before the element rotates in.  Position your elements so that you can just have them rotate in and out as shown in my demo by just moving the transformOrigin relative to the natural state of the element. In my demo the "natural state" of the green div is where it is when the k is upright.