What You'll Be Creating

When we talk about using animation we often discuss the practical ways we can create transitions, animations, and so on. Animation is a powerful way to make our designs stand out, but rather than focus on how individual animations work, the way multiple animations combine can create something even more powerful.

Appeal

Disney’s 12 basic principles of animation defines “Appeal” as corresponding to “charisma in an actor”. It’s how the realism, style, and substance of animation adds up to create a sense of character that viewers find real and interesting.

The Illusion of Life: Disney Animation in which the 12 basic principles of animation are laid out

It’s a technique used to great effect by Stripe. Stripe is a payments processor, and provides tools for embedding payment forms in sites. These forms are famous for being beautifully designed, particularly their use of animation.

In this article I’ll discuss how multiple animations can be used to create an effect more than the sum of its parts, and show how you can use this knowledge in a practical way.

Social Media Card

In this example we’ll use animation to present a card with details and links to web and other social accounts.

When a button is pressed, it will prompt a card to appear with some follow options. Rather than use a plain old modal window, we’ll use animation to make it more interesting.



To make it appealing, there are several animations taking place. The various pieces animate in and introduce each element in order. This helps the viewer understand the connection between what they’ve pressed and the content and the order of animations helps draw the eye to the follow icons.

Setting up the HTML

To start we need a button to press and a card to show. The card will be hidden when the content is first shown.

The button is an image and some text. When pressed, it'll show the card. The card is made up of four sections; a close button, a details section, headshot and an icon bar containing social icons. For this example we’re using inline SVG icons taken from the Entypo collection.

Styling

Before getting into animations let’s add some style to the button and card. First, the button:

Note: we’ve added an outline: none; to the .show-card element because some browsers add a peculiar glow to buttons’ focus states (which we don’t want):

Then we’ll style the card and each of the sections in it.

Note that we set this card to display: none initially. We will then control this using JavaScript.

The Basic Show and Hide

Rather than dive in to the CSS, we’ll first set up the basic action of showing and hiding the contact information. This will make use of a little JavaScript (and in this case jQuery) to add and remove classes depending on what’s clicked:

We should now be able to show and hide the card using jQuery and the display CSS property.

See the basic show and hide example here:

Before Animating

With the layout in place we need to add a few extra styles to hide the various elements so that we can animate them into view.

These elements will have a delay before their animation takes effect, so need to be out of sight initially.

Basic Animations

With the mechanism in place to show and hide the card, we can begin to attach animations. The JavaScript above adds a show state to the card on show, and we can attach animations to this class which will introduce the individual parts of the card.

To do this we’ll use the CSS animation property and sets of keyframes .

It’s helpful to create general-purpose animations in CSS and reuse them. Simple animations such as fading in and out can be defined once and used in multiple places.

To show how keyframes are defined, let’s create the fade in and fade out animations.

Keyframes are a series of steps, defined as percentages. They can be any number of steps but in our example we only define the start (0%) and end (100%) keyframes. In the fade-in we start with no opacity (0) and end in full opacity (1). The fade-out animation does the opposite.

We can use the animation property to apply these fade animations to the button when it is shown and hidden.

The animation shorthand here tells the card to use the fade-in animation, lasting 0.4 seconds with a 1 second delay. The animation will play once and stop at the end (forwards) and use the ease-out timing function.

When the hide class is applied to the button, the fade-out animation takes effect.

Bouncy Effect Timing Function

The first part we’ll introduce is the icon bar. Since this is where the links will be, we want it to stand out and be the first thing people notice.

When animating we can create interesting effects using the timing function property. In this case we’ll use a cubic-bezier timing function to add some “bounce” when the icon bar appears.

First we’ll create some simple keyframes to have the bar start small and grow in height.

We can now apply this set of keyframes to the icon bar when the show class is added to the card.

The bouncy effect is created by the use of the cubic-bezier timing function. Timing functions describe the changes in speed through an animation, and can be designed to over-shoot the beginning or end of an animation. This animation goes a little over, then corrects, creating a bounce.

Animation Delay

With the icon bar introduced, we need to animate the section that contains the details and headshot. We would like this section to appear after the icon bar has been introduced. To achieve this we’ll use the animation-delay property.

The animation applied to the details section is set to have a duration of 0.7 seconds, and a delay of 0.5 seconds. This means the animation will not begin until after the icon bar has been introduced.

We also use a cubic bezier timing function here to give it some bounce.

Next we define the keyframes for this container’s animation.

The show-detail-container animation keyframes starts with the container invisible with a height of zero, and animates to the full height. The cubic bezier timing function then makes the animation overshoot a little to give it some bounce.

Combining Multiple Animations

Multiple animations can be applied in a single property. As long as the animations don’t conflict with each other (by trying to animate the same property), they can be used to add nuance to an animation. Multiple animations are defined just like single animations, but separated by commas.

In this case we are going to fade in the headshot, name and description content while at the same time using a pop-in function to have them appear to zoom from a distance away.

If we had used one single animation, with a cubic bezier timing function, the fade effect would appear to bounce and look odd. Instead, we’ll have the fade use a linear timing function and the zoom will have the bounce effect.

First we define the pop-in keyframes.

This uses the scale transform to have each element begin smaller and scale up to their normal size.

Let’s bring in the content. Each element has two animations, and each of the elements has a slightly longer animation delay to stagger their appearance.

Close Icon

The close icon animation makes use of the fade-in keyframes we defined earlier.

Calls to Action

We just need to show the icons now. When presenting animations, the last thing animated is where the viewer’s attention will end up. This means that the viewers eye will follow the animation and finish looking at the icons we’d like them to select.

We’ll again make use of the animation delay property for these to ensure they’re introduced last. First we define keyframes of an animation for the icons:

Each icon will spin a little as they fade in. We can now attach this animation to each of the icons, using a delay on each to stagger them.

Put these all together and we now have a card that appears nicely when the button is selected.

One More Thing

Before we can finish, we need to add a hide action to the close button and animate the card away. First we’ll update the JavaScript. On pressing the close icon, the JavaScript waits for one second before removing the card with display: none .

This gives us one second to animate the card–we’ll have it fall off the bottom of the screen. The keyframes that achieve this are as follows:

We then apply this as an animation to the card.

Demo

Putting it all together, you can see the result here.

A Note on Prefixes and Browser Compatibility

Animations are well supported across browsers. Depending on your audience, they should work in most situations. It’s worth making sure the basic show and hide functions work and any animation is added as a progressive enhancement.

Summary

Through the use of multiple animations, and particularly the animation-delay property, we’ve taken what could have been a very simple widget and made it more appealing. The animation guides the viewer through each of the elements and directs them toward the calls to action.

Animation can be a great way to communicate within your designs. This communication helps visitors understand your intent as well as improve credibility and confidence in the quality of your work.