[Animating REM and EM units unexpected behavior]

Hmm it's too bad. For this particular circumstance I need to go back to using jquery animate (never thought I'd say that) I guess as it is able to properly handle REM units.

[Animating REM and EM units unexpected behavior]

Thanks for the response, that seems to work for EM,

 

but for REM, using the set method sets it to top:0, left:0 still. In this pen I simply set the position to be exactly the same as its starting position, and yet we see it move to top:0px left:0px. What's up with that? 

 

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

 

Thanks

[Animating REM and EM units unexpected behavior]

Hello,

 

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?

 

Thanks!

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