Animated Text (is probably wrong)
This is a short post about how text should animate and how most of the time it shouldn't.
Back in ye olde days of the internet, during the First Browser Wars the browsers were 'innovating' by way of creating new features for budding web developers to use on their websites and thus those sites would only function correctly on those browsers. Then developers might put badges on their sites such as the following to recommend the browser that their site displayed on correctly:
One infamous such web feature was the <blink> tag which displays text that blinks in and out so you would do something like <blink>blinking text</blink> and it would look like blinking text. However this was never implemented in any browser other than Netscape and thus fell out of favour. The reason for it being neglected is that it's annoying to read text when there's flickering in and out on the page, it attracts the eye which demonstrates one of the major pitfalls of animated text.
Obviously you can do more fancy things with animated text such as modifying the size or colours of text like I do in the header of this site. I justify this since the header isn't visible if you scroll down sufficiently and it should be separated from the rest of the page enough to be readable. There is a rule in CSS that can be used to support users who don't want to see excessive motion on websites. It's the rule @prefers-reduced-motion and in CSS you could disable/diminish animations but I am not currently using this and I suspect it's not widely used; however it's a potentially useful option.
Another common thing people do with animated text especially on modern websites is to fade in and out text as you scroll. Try checking the checkbox then scrolling up and down the page to see a crude example of this effect.
The main inspiration for this post but one that I somehow forgot to include originally is about text that appears as if it was being written. This is very common in text heavy video games since it assists reading in some ways since you can follow the text as it's drawn. However there are a number of drawbacks.
- If the scrolling is too slow it can be boring to wait for it to load in
- If the scrolling is too fast it becomes moot and just a distraction
- It's easy to do in a way that's annoying; especially if the text needs to wrap onto multiple lines
The issue with this is that it only works for a single line and the timing is per the whole thing rather than per letter.
Of course people have their own special effects that they might use for important pages where they're trying to impress people with dramatics. It does catch your attention and draw attention to it but tends to be a little awkward to read and is overbearing in my opinion such as the following.
Of course there are infinitely many things you can do with text to make it more interesting. I am not against creativity and making things more dynamic and engaging. Heaven knows there's too much text written in a bland and uninteresting style that only appears to exist for the sake of it. However when the style distracts from the substance it tends to detract from the value of the web as a medium. The power of the web means you can do things which aren't advisable. Animated text is almost always trickier to read and distracting.
That being said, if you did want to...
You can do some interesting things with animated text and it depends on the context. For example text sliding in as part of a powerpoint can be cool even if it is quite generic because of it being a built-in transition in most slideshow programs. The key to this being valuable and not a hindrance is that it's triggered by user input and not just aas a result of regular usage where it detracts from being able to read the text clearly.
If I come up with other cool effects I will try to add them here but some examples could be some animated text to simulate neon text for a header such as the following: