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.

CSS transitions and transformations can be combined to create fantastic effects, including Star Wars-style screen wipes. But you may need to consider using JavaScript for greater flexibility and control.

To a designer, particularly one who doesn’t do a lot of coding, that idea can seem a little off-putting. Helpfully, however, there are a number of JavaScript libraries specifically designed to create animated effects. You will need to get into the code a bit, but the point of these libraries is that someone has already done most of the heavy lifting for you. If you can follow simple instructions, you can use JavaScript libraries to enhance your designs.

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.

AniJS

If you are new to animation or to JavaScript, AniJS is a great place to start. It is a UI interaction library that allows you to use JavaScript to control CSS animations without writing any JavaScript. It turns JavaScript into ‘plain’ language — if: event, do: action, to: element. Since this also mimics JavaScript’s basic syntax, it can help a non-coder get comfortable with JS. Plus, you can get more advanced with it if you want to.

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.

If you want to take advantage of JavaScript but you don’t feel ready to delve into the resources below, AniJS is for you.

Micro Libraries

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

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

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

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

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

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

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

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

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.

It is perfectly possible to use two or more micro libraries simultaneously. They should be namespaced so that they won’t clash with each other. If you want to use two or more libraries on the same web page, you should concatenate all of the JavaScript — that is, put as much of the code as possible into the same file so that it’s only one server request.

Bigger Libraries

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.

GSAP

GSAP, also known as GreenSock, is one of the most popular JavaScript libraries for animation. It can animate almost anything JavaScript can access, including CSS properties and variables, custom object properties, SVG, complex strings, and React components.

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.

It may sound a little intimidating to anyone unfamiliar with JavaScript, but the documentation is straightforward and comprehensive, and the support is good.

Anime.js

Another very popular animation library is Anime.js. It can target CSS properties, SVG, DOM attributes, and JavaScript objects. It has a built-in staggering system to make it easy to overlap animations and great timing controls.

Again, it may seem somewhat complicated, but the documentation is very well done, with clear demos next to each item covered.

Popmotion

Popmotion is written in Typescript but is portable to any JavaScript environment. It is powerful, with support for keyframe and spring animation for numbers, colors, and complex strings. At the same time, it is tiny, and all its functions are individually importable, so there is no unnecessary code.

mo.js

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.

Animation should only ever be an enhancement, both aesthetically and functionally. You should make sure that your site still functions if the animations fail. If, for whatever reason, your JavaScript fails to load or doesn’t run, the user should still be able to see the content and perform any actions.

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.

On the technical side of things, performance is paramount, both in terms of the animation itself and the page overall. You want to keep things as light as possible. If you are doing something straightforward, you could consider writing it in vanilla JavaScript (without any dependencies), as that will be the lightest option. On the other hand, if you don’t know JavaScript, what you save in file size isn’t worth it against what you would save yourself in time and energy by using a micro-library.

There are a few things it is worth considering when it comes to JavaScript files and size issues. These apply to JavaScript generally, not just animations or libraries.

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.

JavaScript is usually loaded as a progressive enhancement at the bottom of the document. That means it loads last and doesn’t block the rest of the page loading, unlike CSS, which is loaded in the head.

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.

If you are having issues with loading times, look to your image files first: Optimizing images will likely save you a lot more than cutting some JavaScript. Also, make sure your CSS files are as light as possible. Make the best use you can of the browser cache. Once a file is loaded, it will be available across your whole site. And keep calls to the server to a minimum. For maximum loading speed, use a CDN for your external resources.

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.

If you want to use animation in your designs regularly, you must get comfortable with JavaScript. You don’t need to be an expert, but you should be able to understand how it works. Besides, having a basic grasp of what is going on under the hood does no harm.