jdw Posted November 9, 2019 Share Posted November 9, 2019 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 Link to comment Share on other sites More sharing options...
mikel Posted November 9, 2019 Share Posted November 9, 2019 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 9, 2019 Share Posted November 9, 2019 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. 2 Link to comment Share on other sites More sharing options...
Jonathan Posted November 11, 2019 Share Posted November 11, 2019 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now