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-shadow
to theglow 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.
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
@keyframes
which 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