Heading Typing Effect

[00:00:00]
>> Here's another demo where I'm using a set of two CSS animations to emulate typing. This is common in some types of websites where you want to apply it to headings and have this progressive reveal one character at a time. Right now, the length of the heading is hard coded which doesn't make it very reusable.

[00:00:23]
I mean I could override some inline styles to reuse it but I would need to override a bunch of things. I will need to override the width, I would need to override the transition to the animation duration, I would need to override the steps. It's messy. However, all we really need to pass to the CSS here is the content length.

[00:00:50]
And we can do this with something like this. We can go over all the elements that have a typing class and just read the length and write it. It's a little more involved if you have like crazy Unicode characters, but the main idea is there. All we need to do is set the length property to how many characters do we actually have?

[00:01:11]
It gets a little bit more complicated if the content can change after load. If the user can modify it or if it can change in response to something, then you would need to use mutation observers. It's still doable. It's a little bit more tricky. But the simple case is where you have headings that don't actually change you load them.

[00:01:34]
That's the content they will have for the entire lifetime of the page. So let's try to apply that. And right now nothing applies to the JavaScript. So we're gonna go here and copy this. And we're gonna go here and run it. And now I should be able to go here and do, length times 1 CH and it seems to work lovely.

[00:02:06]
And similarly. Basically I should replace all these 25's with var length. And now I can apply it to any heading that I want without having to customize any inline styles