When you think of engaging websites, chances are text is not the first thing that springs to mind.
Yet aside from being an essential part of any design, text is also extremely versatile. It can even be used as the visual centerpiece of your web experience—particularly when it’s animated.
When used in the right context, animations and other effects can improve a user’s experience, as well as make your designs more visually interesting. We’ve pulled together some of the most inspiring text animation examples to showcase the power of the written word in web design.
While there are a few best practices around how to use text animation, there really is no “correct” way to go about it. As with most design elements, the more you play and explore, the more interesting and unique your results will be.
A word on the best practices. Many text effects play an important part in establishing hierarchy, helping your reader quickly distinguish between the different sections of information and identify key messages. As such, you’ll generally want to add the big, eye-catching text animations to your H2s and call-out text.
Of course, some text animations serve no other purpose than to add a bit of dazzle. These are the sparkling transitions, the engaging nudges, and the subtle movements that make web experience seem to breathe and flex. Used sympathetically, text animation can even provide an exciting, dynamic background for your main content.
[image/graphic relating to above]
Applying text animation to everything could quickly overwhelm your reader or make them blind to important information.
Some of the popular text effects we see designers putting into action include:
[image/graphic relating to above]
Enough about theory—let’s take a look at text animation in action. Here are a few websites that use text effects in fresh and inventive ways to inspire your next web project.
It’s unusual to see animated text as a background element, but Change by Design has pulled it off in this event website built in Vev—filling the screen with giant text to create a colorful and lively effect.
There are contrasting colors and offset letters, giving it a strong sense of dimensionality. As you scroll down, the text colors gently shift and different words appear as you move between sections, cleverly showing you exactly where you are in the website.
It can be hard to impress other web designers, but Change by Design does so with inventive text effects and an off-beat color palette, making for a fun, exciting user experience.
This 2021 recap for the agency January 3rd begins with a jumble of letters that move like they’re in water. Embellishments like this that may not serve any practical purpose, but they go a long way in capturing our attention. The rest of the design is filled with quirky colors, huge text, and a host of other scroll-triggered effects.
Designed with Vev, Mirrows draws us into a hypnotic side-scrolling NFT website full of attention-grabbing visuals.
We love the variety of scroll-triggered animations and the mix of gigantic and smaller font sizes. Text materializes and moves into place. There are vertical marquees of moving text, with some moving opposite each other. Each section is full of action making us want to scroll more and more.
Mirrows shows us the creative possibilities of text, with an ambitious design that never feels dull or repetitive. It’s a great example of how text can be the centerpiece of your website, and lure you into reading all the way to the end.
Pienso offers machine learning tools that don’t require you to be an expert in data science to use. With a modern design sensibility, it reflects the technological products that they’ve developed so well.
There are a few smooth text effects throughout this design, and we’re especially fond of their opening screen, where the words of the header come in from different directions as if they’re magnetically attracted to each other. This animated effect makes it impossible not to read this introductory message.
Animated text doesn’t have to be overly complicated to be effective. This UNDOC website about the worldwide proliferation of synthetic narcotics relies on a simple fade-in for most of the content that makes up this report.
With more serious topics, it can be hard to add creative flourishes that don’t diminish the messaging being conveyed. Yet in this website, the fade-in not only adds to the design but lends the statistics and key information an even bigger impact.
Waltz Creative starts this design with a horizontally scrolled hero section. As you move through it the words “Rally”, “Revive”, and “Resonate” appear. This messaging follows the undulating wave of lines in the foreground. Each letter fades in and out as you pass through this space. Right at the top of the design, they communicate what their agency is about. They waste no time and keep us engaged from the very first letter that shifts into place.
This website for the environmentally-minded clothing brand Hajk utilizes animated text to mark the change from one section to the next.
Moving down the page moves text horizontally into place. They employ this effect to also highlight important points like, “The fashion industry has an important role to play in the transition towards a sustainable future” and facts about their organization like, “We apply longevity in the design phase”.
Animated text can be more than ornamentation, and here it serves a major role in communicating important details as well as brand messaging.
Bison Studio has an active user experience guided by scroll-triggered text and visuals. Almost every header and block of body copy has a sense of motion. With both horizontal and vertical movement, none of it sits still. With a fair amount of text occupying this space, animation keeps it from feeling like too much.
Smartup Visuals specializes in visual storytelling, with a focus on illustrations and other artistry. This is a gorgeous website, that’s right in line with who they are, demonstrating both their talents and expertise.
We especially like the text on this opening screen. Hovering over “Live Scribing”, “Animation”, and “Infographics” italicizes the text. Instead of quickly navigating past this hero section, this microinteraction causes us to linger over each word, making sure that we don’t gloss over them.
This is a great example of how animated text can help to create a visual hierarchy, pointing us to what we should pay attention to first.
North Sea is a Nordic action film about a fictional oil disaster. We’re fans of the cinematic feel of this web design. Centered text fades in over shots from the film as one scrolls down. It’s like the opening credits of a film, building anticipation about what’s to come.
This combination showcases how well video and overlaid text animation can work together—a scrollytelling technique that is great for immersive editorial and visual storytelling.
Looking for an easy way to apply text effects to your projects? You should check out Vev! From typewriter and glitch effects, to animated words and letters, we have a whole library of pre-coded text animation elements that you can quickly customise and drag-and-drop within a visual canvas.