Jump to content
Search Community

em works unexpected in text-shadow

chenxin 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

To illustrate my problem, i made two codepens: 

See the Pen pBKVXE by chenxinnn (@chenxinnn) on CodePen

 and 

See the Pen OGEZKL?editors=0110 by chenxinnn (@chenxinnn) on CodePen

.

 

My problem is, in the first example, where i use em unit for text-shadow. Initially i set text-shadow: 0 0 0.08em #EB509E, and then in JS, I wrote exactly the same property of text-shadow(0 0 0.08em #EB509E). So I expect there will be no animation. However, if you open the pen in the debug mode, you will see the the 0.08em goes up to a very high value and then goes down.

 

In the second example where I use px instead of em, it works properly.

 

Is there any way to fix this? Thank you!

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Sorry about any confusion there, but at this point GSAP only supports px-based textShadow values. The reason things got really big initially is because the browser was reporting it as 30.848px to begin (because the browser always reports computed styles in pixels), and it used your unit (em) so it was animating between 30.0848em and 0.08em. 

 

Just convert your em to a px-based value and you should be fine. 

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