Jump to content
Search Community

unexpected behavior of border with rem units

Sophia 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

Hello all,

 

In my new project, I am trying to make animations with rem units, but I have encountered a problem. I code an example on codepen.io:

 

In this case, the 'width' animates normally, but the 'border' has an unexpected behavior, which changes from a very big value, not the value of css.

 

 I found if I use px units or set the start values before tweening, it worked. But it's a bit complicated when I make some complex animation.

 

Is this a minor bug? And whether it will be fixed in the next version ?

 

Any help very much appreciated! 

 

Looking forward to your reply. :)

See the Pen jqewJN?editors=1111 by Sophia-xueer (@Sophia-xueer) on CodePen

Link to comment
Share on other sites

Hello Sophia,

 

This is not a GSAP bug!

 

I'm not at my computer right now, but the reason why you get inconsistent results is that you are not defining your default font-size on the root element (html) ;)

 

When using rem units you must define your default font-size on the root <html> element, that being the CSS rule for the html tag.

 

So by not specifying your default font-size on the root html element you are basically leaving it up to the browser defined style-sheet, which sometimes does not have a root element font-size set for rems to be used.

 

REM units require a default font-size on the root element in order to use it correctly, especially cross browser. Otherwise it will not know what is the default font-size for the root.

 

I suggest you look at some resources regarding CSS rems (root ems). :)

 

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

  • Rems
    rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

    For example to setup REM units you need to define your root font-size on the html element in your style-sheet. In this example it is defined as a percentage, but could also be defined using pixels (px)
    html {
      font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
    }
    
    span {
      font-size: 1.6rem;
    }
    

On a side note:

 

When animating in CSS.. you want animate x instead of left and y instead of top. x and y animate on a sub-pixel level whereas position offsets like left and top only animate on a pixel level which can cause your animation to not be smooth.

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Also you might want to make sure that anytime you have an element with position absolute, that you want a parent element that is not the body tag, that has CSS position relative on it. This way when you position your element with CSS position absolute,  it will be absolutely position relative to its parent that has CSS position relative. That will help so the browser know how to position your elements cross browser.

 

:)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

 

Thank you for your reply, I try to set the 'font-size:62.5%' or 'font-size:16px' in the example, but it doesn't work well.

 

And this unexpected behavior only happens on some of the properties like 'border', 'x' and 'box-shadow', while the other properties, such as width, height, top and left,  are all works.

 

I have updated my example, and I set '5rem' to both 'top' and 'x', but the box moves less in the horizontal direction. And the border changes from a very big value to '2rem', not from '1rem' as I set in css.

Link to comment
Share on other sites

It's weird i see it to now since you added the root font-size on the html CSS rule. 

 

While it animates I see the computed values for all 4 border widths interpolating from 2rem to 10px on a sub-pixel level, that might be causing the jump. So it is animating to a value that is computing to the elements border-width of 10px, which is good, since it is the root font-size. But what's weird is that it also reflects that 10px in the inline style, instead of displaying and interpolating 2rem to 1rem. :blink:

Link to comment
Share on other sites

I do see what you mean, and I believe it's resolved in the upcoming 1.18.5 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

I have tried this preview version, and the border works well. It's so exciting for me! :D

But the 'x' still seems to animate with a wrong value.While I set '5rem' to both of 'x' and 'top', the box moves less in the horizontal direction.

Link to comment
Share on other sites

Thanks Jack! ;)

 

Sophia, You might just want to set the initial position of your elements with position offsets like top and left in your stylesheet. But animate your elements using x and y in your tweens. If it was me I would not mix top or left with x and y in your tweens. Since animating css x and y has much better performance than animating css top and left position offsets.

 

:)

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