Animation is a good web designer’s secret weapon. To animate means to bring to life, and a few little animated touches can liven up even the dullest content.
Creating a site or a page with animation doesn’t have to mean building the whole thing in some big, complicated animation app or framework. Even something as simple as animating a link hover effect with CSS adds a bit of visual spark.
Before you start looking for a library, it helps to be clear on what you are looking for. Think about what animation effects you want, then break them into their constituent parts. All simple animation breaks down to fading, sliding, scaling, or rotating, controlled by timers that handle delays, easing, and playing order, and triggers (events) — such as scrolling, tapping, or page loading — that start and stop the animation running. The more of these functions you combine, the more complex the animation becomes.
Now we’ve got that out of the way, let’s look at some libraries, starting with the simplest and moving on to the more challenging (but still manageable) offerings.
There are lots of demos and examples, and it has a resource page — the AniCollection — which has a ton of ready-made animations you can download and use.
Another way to get started with animation is to try a library that concentrates on one thing. These micro libraries have the advantage of being small, and because they are limited in their functionality, they’re usually easy to get the hang of implementing. Here are some suggestions for you to try:
ScrollReveal does pretty much what it says on the tin — elements are animated as they appear or leave the viewport. This is a popular effect that can delight the user while being subtle.
One potential drawback is that you must load it in the head of the document to avoid a content ‘flicker.’ This is addressed in its documentation.
AOS stands for animate on scroll, and it is for — yes, you guessed it — animating targeted elements as the user scrolls. This popular effect can have a practical function and add visual interest.
Granim.js allows you to animate color gradients. You can control colors, direction, and blending modes and use it with image masks. Initially, this one seems purely decorative, but you can apply it to user interactions such as mouse events.
TypeIt creates typewriter-effect animations. This is an effect that we see pretty often on portfolio sites. It helps engage the user and can assist with content hierarchy by drawing attention to the animated text.
Vivus animates SVGs, making them look like they are being drawn. This one may be a little more complicated to get to grips with, but the results are pretty excellent.
Rough Notation adds animated text annotations and decorations. You can add hand-drawn brackets, strike-throughs, underlines, highlights, cross-out effects, and circles. You can also combine different effects.
barba.js animates transitions between pages, giving the impression of a single-page application. Be warned, its documentation assumes familiarity with JS syntax and advises you to ensure you are comfortable with it before attempting to use it.
TweenJS is a tweening library that supports the tweening of both numeric object properties and CSS style properties. Commands can be chained together to create complex tweens.
If you find you need to use upwards of 4 or 5 micro libraries at once, it might be time to look at a slightly more extensive library, or even a whole framework, that can handle everything you want to do by itself.
Be prepared for things to get a bit more complicated now, but these animation libraries tend to have good documentation and community support.
It is modular, using plugins to add optional functionality to the core. That means you only add what you actually need, without ending up with any extraneous code. It is very fast, robust, and light, given its power.
Again, it may seem somewhat complicated, but the documentation is very well done, with clear demos next to each item covered.
Mo.js has a declarative API to make it easy to create custom motion graphics. It is modular, with built-in components you can use as a starting point. The Burst module is particularly delightful.
How To Animate Web Pages
Web animations tend to fall into two main categories:
- Incidental: where animations play regardless of what the user does. Incidental animations are not necessarily just decorations; they could be slideshows or demos.
- Interactive: which are caused by events such as hovering, scrolling, and tapping. These can be used to help guide users and to encourage them to perform actions.
When animations are an integral part of the UI, triggered by user interaction events, they can improve user engagement as the user feels they control what happens on the screen.
Use them to reinforce the design, to encourage and reassure users, and, when it’s called for, to delight them.
When used well, animation adds an extra dimension to a design, but you should not use it to compensate for poor UI design. If you rely entirely on animation to make a design work, you need to rethink the design.
In the vast majority of cases, less is definitely more. Bombarding the user with too much movement gets irritating. You should also keep your animations consistent and aesthetically cohesive.
Micro libraries tend to be around 5 to 7kb Gzipped, but even the more extensive libraries we’ve looked at here are under 30kb Gzipped. When you compare that to the size of image files, it is pretty negligible. Even compared to CSS files, it’s not exactly huge.
We’ve already mentioned this, but it’s worth saying again: load as few external files as possible. If you are using more than one micro library, concatenate them. The fewer calls to the server, the faster the load time.
One of the larger libraries we’ve looked at here, GreenSock, contains extra code to ensure the animations run smoothly. So a few extra milliseconds on the initial load pays for users not being distracted by poor performance on the page itself.
Size is not the same thing as bloat - bloat is the stuff you don’t need.
Size matters, but eliminating redundant code possibly matters even more.
You should always use the smallest library you can to eliminate unused code, not least because Google takes note of unused code. It could count against you. Many of these libraries are modular and allow you to only load the stuff you actually need.
These tools aren’t just for non-coders. They are great time-savers for front-end developers too.
Simon Sterne is a staff writer at WebdesignerDepot. He’s interested in technology, WordPress, and all things UX. In his spare time he enjoys photography.