Animated Words: 10 Effects For More Fluid Websites

Animated words breathe life into content and add a sense of character.

For headers, titles, and short sections of writing, animating these text elements will grab your visitors’ attention and be the first thing they notice as they scroll on through.

If you feel like a website you built is a bit boring, adding animated text can do so much in awakening your design and making it a more engaging user experience. These micro-interactions can be anything from subtle shifts in letterforms to large and shouty declarations. They take what would otherwise be static text and set them into motion.

Animation also goes a long way in making your design look more professional. The extra effort pays off with a more visually dynamic user experience that visitors can’t help but notice.

How to Create Animated Text

There are so many ways to create animated words. Software apps like After Effects, Motion, and Lottie Editor make it possible to craft complex animations with many moving parts. For a low-barrier alternative, you can also find stripped-down free animated text editors that can also get the job done.

More web creators are increasingly also using no-code platforms to create animated text. These offer pre-coded text animations that you can easily add and customize within the context of your design without having to dive into any code.

Animated Word Triggers

Animated words can be triggered through interactions, but may also be automated. Some of the most common text animation triggers that make up the slickest content you'll find on the web include:

• Load animations that kick into action when a page starts loading.
• Click animations that visitors trigger by clicking on text or other visual elements.
• Hover animations that activate when a user moves the cursor over an element or set trigger.
• Scroll into view animations that engage when a visitor scrolls up or down.

Popular Word Animations

For designers looking to spruce up their work with movement, animated text is a great way to amp up the energy in a design. Let’s take a look at several dynamic word animations you should check out and potentially try out in your next project.

Slide Text Animation

Whether it’s coming in from the left, right, top, or bottom, sliding text makes a huge impact. The example above takes advantage of Vev's animation add-on "Slide in" preset, resulting in this fluid marquee of text. This can be further styled with fade-ins, changing the direction and the rate that the text comes into view, adding a pulsating effect, as well as scaling up the text as it slides in.

Slide text animations range from simple to more complex. The website for the record label Gass not only juxtaposes text sliding in from both the left and right, but also has a hover effect that changes the background color.

Animated Typing Text

Live typing materializes words on the screen as if they’re being inputted in real time. This style of animated words can add a sense of nostalgia, mimicking the letter strikes of an antiquated typewriter, or take on a modern look appearing like text being entered into a terminal command line.

If you’re using Vev, all you need to do to create a typewriter effect is to select Add Typewriter from the Add Menu, drag it into place and then style it however you’d like it to appear. Here we’re using a monospace typeface similar to what was used in mechanical typewriters to give it a nostalgic feel.

Text Writing Animation

Text writing animations often employ calligraphy handwritten styled letterforms that appear as if they’re being drawn by an invisible hand across the screen.

With its wonderfully inky letterforms and lush brush-like strokes this animated text created by visual designer Keeli McCarthy for Anti-Heroes, an exhibition on cartoonists that took place in New Zealand, captures the physicality and charm of hand lettering. Text effects like this can be created with apps like Motion, After Effects, and Lottie. To use this in Vev, simply export your effect via After Effects and upload it using Vev's "Lottie animation" element.

Animate Text Word By Word

When headlines and other important text stand still, it’s easy to rush right over them. Revealing words one at a time creates a sense of immediacy and brings attention to the text that you don’t want people to skip over.

Above, Vev's Animated Words element rolls out text at a smooth and patient pace. In Vev, there are several pre-sets for animating text word by word with options in how much delay you’d like, adjusting the rate of transitions, adding fade-ins, and other configuration options giving you plenty of control over how you’d like it to appear.

Letter-By-Letter Text Animation

Similar to a word by word animation, animating each letter is a more granular way to add motion. This type of animation works well on a large scale, like in headlines or titles. In the example above made with Vev’s animated letters element, letters rise up and unveil themselves in one fluid action. Vev offers several presets for styling letter-by-letter animations including Pop-up, Scale-in, and Fade-in letting you customize how they appear on the screen.

In this example above, illustrator and designer Sarah Fatmi opens up her portfolio with each letter of her name wiggling into place. It’s a playful and cartoonish opening that fits right in with the style of her work in this brilliant horizontally scrolled design.

Scale Word Animation

This effect takes words or letters and increases or decreases them in size while hovering, clicking, or scrolling.

Belle Epoque, a Paris-based agency, takes the word "Aerate" and splashes it across the screen in huge letters. Scrolling then shrinks it down into the header. It centers your attention, bringing your right to Belle Epoque’s message.

If you’re creating a website with Vev, there are a number of effects pre-sets you can use to scale the sizing of text including "Scale up" and "pulsate".

Fade-In Word Animation

A fade-in gently brings text or numbers into focus. This example above from the United Nations Office on Drugs and Crime synthetic drug report was built with Vev and utilizes our fade-in preset in revealing facts and figures about the global problem of synthetic drugs.

Fade-ins add a smooth sense of movement which especially helps text-heavy designs, like the above report, in flowing better.

Change Word Background Color

Triggering a background color change brings attention to whatever content may be layered over it. This not only brightens up a design with color but makes scrolling through content more active and engaging. Changing the background color on hover especially works well for more vibrant color palettes, which are less restrictive, allowing you to push things even further.

The above example from web design agency Create Captivate Close reveals a vibrant array of different colors when hovering over the squares of featured projects.

This effect is also a great choice for burger menus, where hovering on linked text shifts the background, guiding users to click. In Vev’s animation add-ons, you can utilize this effect by using the "Change bg" color preset.

Glitch Text Animation

For those looking to instill their web design with a bit of cyberpunk, glitching text brings a beautiful sense of malfunction.

With jittery motion and alternating lines of blue and red blinking on its letterforms, this opening for the audio earbud company Halo looks like it’s being rattled by bass-heavy music.

In Vev, adding a glitch animation to your text is easy. Just add the Glitch Text option from the Add Menu to your page.

Number Counter Animation

There’s something inherently satisfying about numbers ticking upwards. Animated counters show just how big numbers are as they flip by, making them a great choice for data storytelling.

Vev’s Number Counter elements enable you to add a counting feature to a website through a few simple steps. Using a counter for quantifying things like unique visitors, money saved, or products sold, makes these numbers have a bigger impact.

The Easy Way to Animate Anything

Vev’s animation add-ons empower you with what you need to create eye-catching animated web content—animating images, videos, graphics, and 3D objects, as well as words. You can also integrate Lottie animations, and use the "Embed anything" widget to easily incorporate animations made with other tools. Design visually and publish your creation directly to the web when you're ready.