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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.