Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Eugene Rayner

Help with rotation and transformorigin

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×