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

Using pure CSS and pseudo-elements (as opposed to JavaScript libraries and an abundance of different elements and selectors) will minimize page slow-down. Pseudo-elements contain no real content but through their property values, they can affect their parent element without affecting its content. With the help of modern CSS transform properties, it’s possible to rotate, skew, move, or scale elements, just by modifying their state (on hover, mouse over, or click). When it comes to CSS optimization using transform and opacity changes exclusively will improve your page speed. They make your browser work less hard on loading the page than the translate properties (that are using the X/Y axis). The usage of vector elements instead of pixel ones will also help with page speed simply because the file size will be smaller.

There is a lot that can be done with pure HTML and CSS but there’s a line. If you need any of these functions, you’ll have to use JavaScript.

  • 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)

However, in this case, you still can go for vanilla JavaScript instead of one of the libraries. That will alone also help with page speed.

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.

Transitional 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.

Feedback animations

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

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

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 animations

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.

Summary

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!