Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Text Glow

Recommended Posts

Hey jdw,


Your tween is a bit misformatted. It seems you have two values for the textShadow in the tween. GSAP does its best at interpreting it, ending up going to the second value, it would be better to use a .fromTo() if you want to animate from one value to another. Secondly, browsers that I know of don't do sub-pixel text-shadows. So that's likely why your animation is "jumpy". GSAP has no control over that. If you look at a demo like the one below, you'll notice their going between larger values so that the animation looks more smooth. 


See the Pen qzfoc?editors=0100 by FelixRilling (@FelixRilling) on CodePen


Also note that animating shadows like text-shadow are performance intensive, so it's likely to not perform well no matter what you're doing :) If you're going to do something like this in production, it might be a good use case for using <canvas> with something like pixi.js or just using a spritesheet of images.

  • Like 2
Link to post
Share on other sites

Hello @jdw and Welcome to the GreenSock Forum!


I noticed that in to() tween, your syntax for text-shadow has a typo with 2 semi-colons. 


You have this with 2 semi-colons:


textShadow: "0px 0px 0px black;, 2px 2px 8px deeppink;",

But it should be like this with just your comma separated values, no semi-colons:

textShadow: "0px 0px 0px black, 2px 2px 8px deeppink",

CSS text-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow


Happy Tweening :)

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