Animated site elements became a big trend in recent years of web design. It’s a modern, playful touch and a simple way of adding interactive elements to your pages. As a result, your visitors can feel more entertained and involved and they will likely spend more time on your site. With the aid of modern HTML and CSS techniques, they also don’t need to be too heavy on your site performance.
I’ll introduce here the best practices and some stand-out examples.
Designing web animations
The predisposition of animations is that there is a before and an after stage, with a given number of in-between stages. In some cases, the before and the after state is the same, like in the case of some on-hoover animations where the main event is the in-between state. In other cases, the element changes its properties permanently, like in the case of some on-click events. In any case, a simple script on all the different phases will be helpful, and in the case of more complex animations if it’s even better to visualize that in some way.
When the starting and ending state is the same, and the in-between is a purely visual change, it’s part pour l’art. Animations can have value as simple entertainment, but it’s also possible to include additional information through them or to incorporate them into your navigation system. That way they will probably feel more authentic.
The practical guide to web animations
- scrolling of the entire body
- gradient animation (as they are not supported in almost any browser yet)
- modifications of the properties of the background or background image (background-position can be animated)
- animating the height of an element (it is possible to animate its min-height)
Eye-catching and entertaining web animation examples
In this section, we will look at shortly the most used web animation types and list some examples. After that, we will focus on our main topic, text animations.
The most basic use of web animations is probably the animation of block transitions. They are especially important on mobile, where hover animations need to be replaced by elevations. UI blocks give space to each other by changing their hierarchy on the X-axis. But even in desktop view tabs, hidden menus, and slides are commonly used. The role of animations here is to ease the transitions because sudden changes in the layout are not pleasant to the eye. Some simple transition examples are fading, scaling, and fly-in animations.
A landing page with scroll transitions by Mason Yarnell.
A landing page with background transitions Yalantis.
The second most common and easiest use of web animations is the little movements UI elements make to give feedback on user interactions. Something like a mouse movement, text input, or a tap can trigger a response like a little shake, color transitions, or opacity change. These responses show the users intuitively how their interaction is received. It can serve as a small reward for a finished interaction.
Login Form Shake Effect by Meyghani Meyghani.
Food Delivery Animation by Pavan Mahale.
Loading animations have the main purpose of distracting and entertaining users while they wait. In many cases, it’s not needed anymore, because the pages load fast enough. But there are some functions, like filtering large databases that still nowadays take some time. In those cases, loading animations are important. However, it doesn’t have to be just a simple loading bar.
Loading animation Ferdi Jajai.
Loading Animation by Daniel Outeiro.
Progress animations are helpful when users must go through a multiple-step process. In these cases, they might lose patience if it’s not clear how long the process will take. Traditionally this was also a problem that developers could solve with a loading bar, but there are more advanced options. It can show the number of stages, their number or theme, and their status as well.
Multi-step linear progress animation by Joshua Sortino.
Illustrated progress animation by Supi.
Text animation is a great way to highlight parts of the content but can also have practical functions like in the case of footnotes, expanding paragraphs, and stories loading on a scroll. They can be purely decorative as well just as certain fonts alone are.
Here I’ll take some examples and explain what I find great about them.
Decorative Text animation background by Anton Skvortsov
It’s essentially just a fancy background but works very well in a simple and nicely flowing way.
Strikethrough Text With Explanations by Del Ins
Adding animated footnotes to your text is like offering a sneak peek into the thinking process – it’s probably not for everyone, but in some cases, it’s an exciting opportunity.
Burning text effect by Hakkam Abdullah
It’s a subtle and very decorative kind of text reveal effect, similar to popular ink- and smoke reveal effects.
reveals the effect of Nooray Yemon
This one is super simple and elegant, it reminds me of Apple’s designs.
The text reveals the effect of Alvaro Montoro
This is an actual Apple design recorded, something nice and minimalistic that’s also not boring. Ideal for big headlines.
Text Trail Effect by Mary Lou
This animation could work well for movie titles, but if a retro cinematic style is something that first your website, it can be a great effect on the web as well.
“Matrix” Text Scramble Effect by Justin Windle
The famous Matrix-style text reveals that anyone would recognize. Those cultural references are safe to make (it’s not polarization). They can strengthen your message and create a special bond with your audience when done right, like a shared secret.
Silent Movie Text Effect by Dimitra Vasilopoulou
Another cinematic effect, so it’s not for every purpose, but it’s pretty, fun, and very artsy.
Montserrat Text Animation by Claire Larsen
This text effect created with the Montserrat font is like a crossover between modernism and the 70s rainbow-disco style, but because it’s so well done, it could be used for more generic purposes.
As you see there is a text animation effect for every purpose and I hope you’ll find your best match! At the Cecily Group, we are dedicated to forming a consistent brand strategy from the smallest details up to the big picture, because we believe it helps to create and maintain customer trust. We wish you the best of success in finding your path!