Kevin Powell - Community•2y ago

Pseudo-class: Letter-by-letter Animation

I'm trying to replicate the style and animation of the outline text behind a subheading on this page: https://wilmer.qodeinteractive.com/. For SEO and cleanliness of HTML, I decided to only use a pseudo-class. Now the only thing I need is to animate the letters one-by-one. Can you please suggest how can I possibly do that?

#services h2:after {
    content: 'Services';
}

#services h2:after {
    content: 'Services';
}

Wilmer

Main Home

8 Replies

Jochem•2y ago

the only way I know of is to have the letters in separate spans and target them with :nth-child()

Chris Bolson•2y ago

You could use JavaScript to read the value of the pseudo content and then animate each character

Jochem•2y ago

that would keep the HTML clean, but you'd still have to wrap each character in its own element and animate that, right?

Chris Bolson•2y ago

Yes, true. Getting the content itself is straight forward enough , the problem is how to actually animate each letter… I suppose you could reinsert them into the DOM one by one. It would probably be simpler just to take the hit on the html and add the spans there.

Jochem•2y ago

that's what I'd do, unless it was very important to keep it clean. Getting the HTML in JS shouldn't be too hard though, something like

target.innerHTML = '<span>' + content.split('').join('</span><span>') + '</span>';

target.innerHTML = '<span>' + content.split('').join('</span><span>') + '</span>';

You could then just use CSS with a selector on the parent (target in this case), where you set the animation you want in .target span, and then have an appropriate number of :nth-child() selectors where you increase the delay for each subsequent one the text effect of just having the outline can probably just be text-stroke and text-fill. Prefixed they have decent support https://caniuse.com/text-stroke I've never used them myself though, so there might be something I'm missing

Daryl MOP•2y ago

I can't find the right JavaScript selector for this. Can you please give me a clue?

Chris Bolson•2y ago

window.getComputedStyle() https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle https://codepen.io/cbolson/pen/RwqRgXv I did this quickly to get the pseudo content but then couldn’t work out a way to animate each letter without generating spans and replacing the pseudo element which meant that there is no need for the pseudo element in the first place

Daryl MOP•2y ago

🤯 Thank you so much! I'll take it from here. 🙏

Gaming

Programming

Pseudo-class: Letter-by-letter Animation