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?
Wilmer
Main Home
8 Replies
the only way I know of is to have the letters in separate
spans and target them with :nth-child()You could use JavaScript to read the value of the pseudo content and then animate each character
that would keep the HTML clean, but you'd still have to wrap each character in its own element and animate that, right?
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.
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
You could then just use CSS with a selector on the parent (
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 missingI can't find the right JavaScript selector for this. Can you please give me a clue?
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
🤯
Thank you so much!
I'll take it from here.
🙏