vlad malik

Animated headlines convey more meaning
2 years ago

Animation can convey multiple message using same space, turn a headline into a center-piece, drawing lots of attention to your message, set up a transition or interaction that pulls the user in or guides their gaze, or use the time dimension to convey extra information, like mood.

Reuse space to communicate multiple messages

The Spotify website does a nice job of synchronizing alternating color, alternating text, and background video:

2014 was magic, was waves, was summer...

Headline animation combined with an animated background

Sebastiano Guerriero has a great tutorial on JavaScript and CSS techniques for animating text like Spotify did and many other styles.

Here’s a similar example from Lucky Orange:


Here’s a similar example from CrossBrowserTesting.com:

Animated Heading

This next example is hastily adapted from an old Sapient Nitro home page. Here too the same space is used to communicate multiple messages, while the accelerating pace of the animation communicates breadth and excitement:

Headline showing alternating benefits of a plant-based diet

Multiple messages in one space

A simple example from Designlab:

Headline showing alternating benefits of a plant-based diet

Multiple messages in one space

Convey extra information and mood

A slow animation can communicate weight or importance. A fast animation can communicate urgency. Animating a headline adds meaning.

On my breath-hold diving site, the countdown starts slow to create tension or suspense. Then it speeds up to create excitement, illustrate the sheer duration of the world breath hold record, and of course avoid boring the visitor. The headline animation also doubles as a delay for showing the intro paragraph, which becomes a visual cue to continue downward.

Animated counter from zero to 11:35

This counter turns the headline into a center-piece, communicates mood, and guides the visitor’s gaze downward.


On the same site, I added a breathing animation to draw attention to a fact about breathing:

Expanding and contracting headline saying 22:32 = hold 300 breaths

A headline that might otherwise be overlooked draws attention with a breathing motion.

Writer uses a typewriter effect on the home page:


Show a dynamic calculation

On the Helpthechickens.ca site, I used animation to show a real-time calculation rather than a static headline. The pace of the animation was chosen for optimum effect:

Animated count of chickens killed since page was opened

This counter shows a real-time calculation that is constantly updating

Get inspired by 1482 curated rooms (number highlighted)

On a project with @jlinowski, we experimented with using animation to highlight social proof. In this screen, the number of rooms was animated.

Get creative and use the time dimension to give added meaning to your headlines. If you find more examples, do share!

@VladMalik is an interaction designer and musician based in Toronto.
I enjoy breath-hold diving, weight-lifting, and chopping wood. I am vegan.

Get Update Every Month or Two

Share your thoughts!

© 2018 No commercial use.