I just added the third effect (3. Glowing Text) to my site as the idea works well with my current font (which is kind of Alien/Space inspired). My goodness, that looks great on a single letter but trying to apply it to a 30+ character string, Chrome turns really sluggish. I was quite surprised to see such bad performance on what seems a very simple effect.
Just wanted to say thank you anyway for the inspiration, I ended up just doing a single shadow (even with 2 shadows it's noticeably slower on hover even without the transition effect), I think it looks great still. I have pushed the changes already so it is live here: michaelfasani.com
Awesome! Am so glad it worked out for your website 🐱👤.
Now as a suggestion for the slowness detected it could be because of the huge transition we are applying. So why don't you try adding this will-change: text-shadow to the glow span selector. This will tell the browser to render the effect with the help of the GPU. Thereby reducing the load on browser thread.
I will try to write a small write-up for GPU forced rendering in CSS someday ✌
For now, read this awesome article in Smashing Magazine
I will give it a shot. Just checked caniuse.com it looks like it’s a no go for IE11 but I will see how performance is there and in other places with that prop and get back to you.
I mapped the number of animation states (3) to the timing in ms (0.3) as this seemed to have better performance. If you have 4 states, I think 0.4 may be a better time choice and so on, but I can't verify that claim it is just my subjective opinion.
Hi @akhilarjun ,
I just added the third effect (3. Glowing Text) to my site as the idea works well with my current font (which is kind of Alien/Space inspired). My goodness, that looks great on a single letter but trying to apply it to a 30+ character string, Chrome turns really sluggish. I was quite surprised to see such bad performance on what seems a very simple effect.
Just wanted to say thank you anyway for the inspiration, I ended up just doing a single shadow (even with 2 shadows it's noticeably slower on hover even without the transition effect), I think it looks great still. I have pushed the changes already so it is live here: michaelfasani.com
Awesome! Am so glad it worked out for your website 🐱👤.
Now as a suggestion for the slowness detected it could be because of the huge transition we are applying. So why don't you try adding this
will-change: text-shadowto theglow spanselector. This will tell the browser to render the effect with the help of the GPU. Thereby reducing the load on browser thread.I will try to write a small write-up for GPU forced rendering in CSS someday ✌
For now, read this awesome article in Smashing Magazine
I will give it a shot. Just checked caniuse.com it looks like it’s a no go for IE11 but I will see how performance is there and in other places with that prop and get back to you.
And by the way i checked out the site. It is dope 😍👾
Hey, thanks, I tried
will-change: text-shadow;but it did not seem to make a difference tbh.I did, however, come up with the following with
@keyframeswhich I think looks great, exactly the kind of thing I was trying to achieve.I mapped the number of animation states (3) to the timing in ms (0.3) as this seemed to have better performance. If you have 4 states, I think 0.4 may be a better time choice and so on, but I can't verify that claim it is just my subjective opinion.
New demo: michaelfasani.com