Jump to content
Search Community

Inherited height change disturbs the expected behaviour of "rotation" with "transformOrigin"

bds test
Moderator Tag

Go to solution Solved by bds,

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

CodePen should demonstrate the issue I am facing.

 

Clicking on RED should ideally rotate the "+" sign into an "x" sign by applying "rotation":45. However, this rotation must be done alongside changes in inherited height, which, as you can see, totally disturbs the rotation matrix.

 

I am expecting the scale of the icon to change with relative box-position unchanged, i.e. the center of the icon as per transformOrigin property should stay the same relative to the parent box.

 

Any help would be appreciated!

See the Pen apVPdP by IGaMbLeRI (@IGaMbLeRI) on CodePen

Link to comment
Share on other sites

  • Solution

Ok. It seems that applying the animation to the "<use>" element produces a different result than when applying it to the parent "<svg>". Applying it to the "<svg>" produces the expected result.

Link to comment
Share on other sites

HI bds :)

 

I'm glad you figured it out. I took a look at your pen and just to throw my 2 cents worth out there for you - I think you may be over engineering this animation. There wouldn't be any need to use the symbol and drop that into another div. You can also simplify your code by using a timeline and play()/reverse() on click.

 

Here's a fork of your pen:

 

See the Pen egebMQ by PointC (@PointC) on CodePen

 

The JavaScript has been reduced to this:

var a = $('#a');
var tl = new TimelineMax({paused:true, reversed:true});
tl.to(a, 0.5, {height:800})
tl.to(".open", 0.5, {rotation:45}, 0);

a.click(function () {
     tl.reversed() ? tl.play() : tl.reverse();
});

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 3
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.
×
×
  • Create New...