Jump to content
Search Community

Animating REM and EM units unexpected behavior

DanTheProgrammerMan 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 am trying to animate using rem units and am encountering unexpected behavior. In short, I'm doing this tween:


    TweenLite.to("#blue-circle-1", 1.2, {
      delay: 0.2,
      left: '-1rem',
      top: '4rem',
      ease: Elastic.easeOut
But the blue circle actually ends up at top:0px, left:0px instead of the expected left: -1rem, top: 4rem. This is demonstrated in the codepen . Interestingly, if I run the same exact Tween again, after the first failed Tween, it will go to the proper position.
In addition, when trying to do the same thing with EM units, as seen at this codepen

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

we see that the element does reach the correct position of  left: -1rem, top: 4rem, but the animation itself is not fluid, it looks like it has teleported. 
And finally, the same animation works perfectly using the jquery animate function, doing what I'd expect it to do. See at this codepen:

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

Can anyone explain why this is happening, or is this a bug?

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

Link to comment
Share on other sites

I don't know if its even recognizing "rem" as a unit. I think Jack will probably have to answer that, as I really couldn't find an answer by just skimming through the source code.


I don't know of an easy fix for you at the moment. You might just have to convert the units manually. For what its worth, I ran into a similar problem before, and raised an issue on GitHub.

Link to comment
Share on other sites

Sorry about the em/rem hassles. We will consider adding support in a future CSSPlugin update, but this is the first request we've had and we have a number of high priority features in the works right now. 

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...
  • 4 years later...
7 minutes ago, InTheOne said:

+1 for full rem support ?, I just spent an hour and a half trying to figure out why my animation did not look right only to find out it was related to use rem.

rem units should be supported for the most part at least: 

See the Pen WNvMyeb by GreenSock (@GreenSock) on CodePen


What situation are they not working in? Can you provide a minimal demo?

  • Like 1
Link to comment
Share on other sites

2 minutes ago, InTheOne said:

This issue was that I did not have a 0 in front of my .5rem. When I added that it solved the issue. 

Right but I'm saying that if I leave out the 0 in front in the demo above it doesn't reproduce the issue. So do you know of a way to reproduce the issue in CodePen?

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