Text Glow

[jdw]

I am trying to get a constant pulsing  neon glow effect working using GSAP and text shadow but it looks a bit rubbish, any advice on what I am doing wrong here?

See the Pen wvvXXdv by jonathan-werrey-easterbrook (@jonathan-werrey-easterbrook) on CodePen

[mikel]

Hey @jdw,

 

Welcome to the GreenSock Forum.

 

Your code is working as expected.
Should it flicker? Or what ...

 

Examples of how 'neon font' can be implemented
you can find on

See the Pen by search (@search) on CodePen

.

 

See the Pen ae5576e80f4f8d25a946fc4c657d8810 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[ZachSaucier]

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.

[Jonathan]

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