Jump to content

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

Text Glow

Recommended Posts

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

Share this post

Link to post
Share on other sites

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 CodePen.


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


Happy tweening ...


  • Like 3

Share this post

Link to post
Share on other sites

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

Share this post

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

Share this post

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.