Create a set of micro-animations

Donovan Hutchinson discusses how we can create a bank of small, simple animations that can be applied in multiple situations

Animations can help our user understand our designs. They can also add polish and even make your site feel faster. We can have animations that introduce the page content, or animations that activate when we interact with the UI or when we scroll.

Big, splashy animations are great for attracting attention and making our sites more fun, but it’s the small ones that really boost the quality of our work. We can call these ‘micro-animations’: the small animations that achieve one single purpose, as opposed to larger ones that tell stories through multiple sequences of movements.

These subtle movements draw visitors to what we want them to see or understand. A micro-animation might be a list of links fading in, or a Submit button changing from ‘Submitting’ to ‘Done’.

These simple animations may not be the main reason people visit your site, but they can make the difference between an average and an exceptional experience. Each one plays a part in communicating your brand.

Ever wonder how you can bring animation into the workflow of a larger project and keep it consistent? Donovan Hutchinson explains how in this video from Defuse Dublin

Animation libraries

As we develop our projects and they get bigger and more complex, it’s easy for all these microanimations to become inconsistent. Different timings, easing and styles can add up to problems when conveying a unified brand. We can solve this problem with a little forward-planning.

In this article, I’ll look at how we can create a library of small, generic micro-animations that can be applied to our projects as needed and reused many times. This common set of source animations can be used across multiple scenarios, and adjusted as necessary by overriding and changing specific properties.

It’s almost like an object-oriented approach, where we create generic animations and associated classes, and modify them as required. This saves the creator from having to reinvent an animation each time one is needed, and also ensures they remain consistent across a project.

Once we’ve decided what sort of movements we want to put across, how do we deliver these micro-animations? Putting animations in your style guide is a great way to start. We can define a range of animations, and set out rules for how they are used in our projects.

Animating Your Brand

Simple animations

Creating your own library may seem a large task, but we can start with basic examples and build them up. Let’s begin by creating some simple animations, and looking at ways we can apply them.

Note: In this article I’ve omitted prefixes such as -webkit- from the examples. I’d recommend including these on production code. You can use a service such as Prefix-Free or AutoPrefixer to help streamline this process.

Fading in

In our first example, we’ll take a look at the fade-in class, which we can use to cause elements to fade into view.

@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in {
animation: fade-in 1s forwards linear;
}

This example is made up of two parts. The first sets out what the animation will do, using keyframes. It’s a simple fading-in animation, going from an opacity of 0 to 1 . The keyframes define the animation, and we then apply it to a class using the animation property.

Here the animation fade-in takes one second, and plays just the once. We’ll go on to extend this example so it does more interesting things, but first let’s explore how we can apply the basic version in various ways.

Triggering animations

A simple way to trigger an animation is by adding a class to an element. We can apply the fade-in class to a div element (here I’m just using a circle) so it fades in on load.

The HTML looks like this:

<div class=”fade-in”></div>

Let’s try triggering the animation when the user clicks a button. For brevity, we’ll use jQuery.

First update the HTML to include a button, and hide the circle:

<div id=”show-me” class=”hidden”></div>
<button id=”click-me” class=”fade-in”>Press</button>

I’ve added a class of hidden that applies an initial opacity of 0. We can then use JavaScript to toggle the fade-in class on click:

$(‘#click-me’).click(function() {
$(‘#show-me’).toggleClass(‘fade-in’);
});

Transitions

We aren’t limited to using key frames. While these are well suited to standalone animations, if we’re dealing with a situation where we want to change an object from one state to another, transitions are a better option.

A popular example is the hover state, where a second state is described within the CSS. Adding a transition tells the browser to animate to this second state. In the example below, the hover effect causes a link to animate from blue to red when the user hovers over it.

a {
color: blue;
transition: all 0.2s ease-out;
}
a:hover { color: red; }

Let’s recreate the fade-in animation from earlier, using transitions rather than key frames.

We’ll adjust the code to use opacity and a transition. The CSS becomes:

.fade-in {
opacity: 1;
transition: all 1s ease-out;
}

Rather than reinventing the wheel when we want to detect when an element scrolls onto the page, I recommend using a utility such as Wow.js.

To set it up, download the script and reference it on your page:

<script src=”js/wow.min.js”></script>

Activate the script by declaring the following code in JavaScript:

<script>
new WOW().init();
</script>

We can now add the class wow to any element we want to detect on scroll, along with the class of animation we want to apply.

<div class=”wow fade-in”></div>

This will apply the fade-in animation when the element is visible.

More complex animations

If we want to be able to apply these animation effects to as wide a range of objects as possible, we should try and stick to the transform and opacity properties. As it happens, these are the properties that perform best.

Even when limiting ourselves to these two properties, there are lots of effects we can create. Opacity can be used to pulse objects or show and hide them at will. Transform can scale, rotate and move objects. Let’s put these together to create some more interesting effects.

Introducing page content

We can use a fade animation to add some polish to our page load. Rather than suddenly showing all the content at once, we can make it transition into place. In this example, the content all fades and slides into place at the same time:

Let’s create the animation and a corresponding class to go with it.

@keyframes fade-up {
0% {
opacity: 0; transform: translateY(3em);
}
100% {
opacity: 1; transform: translateY(none);
}
}
.fade-up {
animation: fade-up 3s cubic-bezier(.05,.98,.17,.97) forwards;
}

Here we’ve created a new animation, fade-up, that uses a transform to position the object lower on the Y-axis before animating. It’s called through
the class fade-up.

Notice we’re using a custom Bézier curve for this animation. All preset CSS animation easing values are based on Bézier curves, and the built-in values (ease-out and so on) are a little staid and robotic. It’s worth taking the time to create your own easing rules. You can find out more at cubic-bezier.com.

In the previous example I applied our animation to the containing content element so the entire page would load as one element. Let’s take this further by making the elements slide into place independently.

We apply the fade-in class to each element, then specify an animation-delay value for each.

fade-up { opacity: 0; }
h1.fade-up { animation-delay: 0.1s; }
p.fade-up { animation-delay: 0.25s;}
.image { animation-delay: 0.6s; }

First of all we need to set the fade-up items’ opacity to 0 in order to delay when the animation starts. The delay is then specified in fractions of seconds. The result is that the various elements fade in at different times, but all use the same fade-in animation.

We’re overriding the animation-delay value but retaining the original properties of the animation so it remains consistent. This ensures if we were to change the animation duration or easing, it would change for all places the animation was used.

Overriding the timings

We can continue this idea of overriding the animation-delay property when introducing a list of items. Let’s set up a list of Star Wars movies so each one
appears after the previous one.

To achieve this, we set up initial key frames for a fade-right animation.

@keyframes fade-right {
0% { opacity: 0; transform: translateX(-3em); }
100% { opacity: 1; transform: translateX(0); }
}

We can then apply this animation to the li elements and use a nth-child() selector to add a delay to each.

li {
opacity: 0; animation: fade-right 12s cubicbezier(.
05,.98,.17,.97) forwards;
}
li:nth-child(1) { animation-delay: 1s; }
li:nth-child(2) { animation-delay: 1.2s; }
… and so on …

This means if we want to adjust the timings of the fade-right animation, we only need to change one set of key frames.

A simple, reusable fade animation causes this light bulb to light up on page load

Getting attention

Animations can also be handy for attracting the attention of the user. Let’s create an example where a button will shake when scrolled into view.

To begin, we’ll create the key frame animation:

@keyframes wiggle {
0%, 7% { transform: rotateZ(0); opacity: 0; }
15% { transform: rotateZ(-15deg); opacity: 1; }
20% { transform: rotateZ(10deg); }
25% { transform: rotateZ(-10deg); }
30% { transform: rotateZ(6deg); }
35% { transform: rotateZ(-4deg); }
40%, 100% { transform: rotateZ(0); }
}

We’re using opacity to fade the button in, while also applying rotation to shake the button left and right as it appears.

We can apply this to the class wiggle using the animation property:

<button class=”wow wiggle”>Look at me!</button>

The Wow.js script takes care of hiding the button, and when we scroll to it, we see the wiggle animation. We could use this technique to introduce content — for example when sliding in a link to another article when the reader reaches the end of their current reading. Alternatively, we could use it to draw attention to a mailing list sign-up form. CodePen uses a similar animation to remind people to save their work.

CSS Animations: A Pocket Guide - Val Head, Author

Taking it further

If you’re approaching a large project, or just want a handy toolset of animations available to reach for as needed, this is an approach worth considering. It can help take a hassle and effort out of animation, and keep things consistent, too.

Think about what sorts of animations might best represent your brand. You can then consider how content might be introduced, such as sliding up, appearing from the sides or flying around in 3D. Put together little animations that enable each behaviour. Then you can apply these animations as and when they are needed, either directly to your classes, or by dynamically adding and removing classes using JavaScript.

Even if you’re starting with an existing CSS framework, taking the time to learn how to create your own animations is a great way to really personalise your designs and add some individual character.

Donovan is a Dublin-based frontend designer and developer. He runs CSS Animation, a site full of articles, tips and tutorials, as well as the accompanying newsletter

This article originally appeared in issue 279 of net magazine