Discussion on: Four subtle Text-Effects to spice up your web-site

[Akhil Arjun]

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

[Michael Fasani]

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.

[Akhil Arjun]

And by the way i checked out the site. It is dope 😍👾

[Michael Fasani]

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.

.header a:hover {
    animation: glow 0.3s linear forwards;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 0px #ffffff;
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 10px #8be9fd;
    }
    100% {
        text-shadow: 0 0 0px #8be9fd;
        color: #8be9fd;
    }
}

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