Share Posted June 5, 2015 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 Link to post Share on other sites
Share Posted June 5, 2015 This happens with special units because the computed style is in px. If you set the start values before tweening, it should work. See the Pen GJmoJR by osublake (@osublake) on CodePen 3 Link to post Share on other sites
Author Share Posted June 5, 2015 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 Link to post Share on other sites
Share Posted June 5, 2015 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 post Share on other sites
Author Share Posted June 5, 2015 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. Link to post Share on other sites
Share Posted June 5, 2015 The only other thing I can think of is to tween an object and update the css in the onUpdate callback or by using a getter/setter. See the Pen doWGQP by osublake (@osublake) on CodePen 2 Link to post Share on other sites
Share Posted June 9, 2015 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 post Share on other sites
Share Posted July 29, 2015 I second the request for REM support, it's my favorite unit and an absolute joy to use to make responsive websites Link to post Share on other sites
Share Posted September 6, 2015 FYI, the upcoming 1.18.0 has better support for rem units - feel free to give the beta [uncompressed] version of TweenMax a try: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better? 2 Link to post Share on other sites
Share Posted March 11, 2020 +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. Link to post Share on other sites
Share Posted March 11, 2020 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? 1 Link to post Share on other sites
Share Posted March 11, 2020 Ah, I was using ".5rem" instead of "0.5rem" which was actually causing the problem. Link to post Share on other sites
Share Posted March 11, 2020 3 minutes ago, InTheOne said: I was using ".5rem" instead of "0.5rem" which was actually causing the problem. Hmm. That still works in the demo above. Any idea how to reproduce the error? Link to post Share on other sites
Share Posted March 18, 2020 Hi, sorry for the slow responce. This issue was that I did not have a 0 in front of my .5rem. When I added that it solved the issue. Link to post Share on other sites
Share Posted March 18, 2020 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 post Share on other sites
Share Posted March 18, 2020 Oh, no that fixed the issue for me in my application. I'm not sure what would be different about my setup to where I needed the 0 for it to work. 1 Link to post Share on other sites
