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
Jochem2y ago
the only way I know of is to have the letters in separate spans and target them with :nth-child()
Chris Bolson
Chris Bolson2y ago
You could use JavaScript to read the value of the pseudo content and then animate each character
Jochem
Jochem2y 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
Chris Bolson2y 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
Jochem2y 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 M
Daryl M2y ago
I can't find the right JavaScript selector for this. Can you please give me a clue?
Chris Bolson
Chris Bolson2y 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 M
Daryl M2y ago
🤯 Thank you so much! I'll take it from here. 🙏
Want results from more Discord servers?
Add your server