Headlines are more important than ever. They’re the first thing your prospective customers see. They determine whether your visitor (who you worked so hard to acquire!) will continue reading your landing page or bounce off to find something more interesting. Animated headlines grab the viewer's attention and are far more engaging than traditional ones. Here are three ways you can animate your website's headline to increase clicks, engagement, and sales.
When it comes to SaaS landing pages, the most popular type of headline animation is a typing animation. One letter animates in at a time to look like a person is typing out a word. Gather uses a typing animation on their homepage:
Instead of animating in one letter at a time, you can animate the entire word in at once. This is more user-friendly, since users don't have to wait for the animation to finish before they can read the headline.
Figma uses this kind of headline animation exceptionally well. They use elements of their product UI in the animation, such as their reaction emojis for the word "brainstormed" or the color picker for the word "built". They communicate their typical users by featuring a "PM", "Designer", and "Developer" cursor at different points in the animation. The headline copy and animation work together flawlessly to deliver emotional impact and highlight the product's value.
Another type of headline animation involves highlighting one or more words for emphasis. Google Workspace highlights words in their headline using the same styling as their Google Docs product, infusing their brand and tying in their product:
Your headline is the first impression of your website. It’s the initial handshake that leads to a conversation. When done correctly, it’s an art form — a way to convey your brand’s message in a quick and intriguing way. Animation can draw in your visitor and hold their attention span. Glance has more examples of animated headlines to inspire your next project.
.png){kind=avatar}
