Jump to content
Search Community

Weird bug with TweenLite and transform:rotate

sourpatchkid test
Moderator Tag

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



I don't know if someone can help me but here's my bug.


I used TweenLite to make a small 3d transition to show a box. The box itself is slightly rotated using css3 transform:rotate properties.


When the tween finish, the box has a weird position glitch. It move down a little bit.

If i remove the rotate properties, everything is fine.


Here's the CodePen :

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


I've seen this glitch in all Major Browser


Sorry for my english, is not my native language.


Thanks in advance for your help

Link to comment
Share on other sites

I wouldn't say there's a bug, but if you want to make this behave more uniformly, I would adjust this:

transformOrigin: "right center",


transformOrigin: "center center",

I'm not sure why it's happening that way.

  • Like 1
Link to comment
Share on other sites

GSAP intentionally doesn't support animating transformOrigin itself because we thought it was more intuitive that way. Remember, by default transformOrigin is "center center" (which has nothing to do with GSAP - that's just what the CSS spec calls for), so imagine if you did this:

TweenLite.to(element, 1, {rotation:180, transformOrigin:"top right"});

Most people would want that to simply use the top right corner as the pivot point around which the rotation occurs, but if we ANIMATED the transformOrigin from "center center" to "top right", you'd see a very different effect as the pivot point continuously changes over the course of the tween. See the problem? So when you define a "transformOrigin" in a GSAP tween, it immediately applies that at the beginning of the tween. 


So in your case, the "jump" was because during the tween the transformOrigin was "center right" and then at the end it was reset to the original value ("center center") because GSAP cleans up after itself (meaning a from() tween will always return to exactly what the original values were). 


Does that clear things up?


The other option is that you could set the transform-origin to "center right" in your css (or TweenLite.set(element, {transformOrigin:"center right"}) before you run your other tween. 

  • 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...