An Introduction to Thinking About Animation on the Web

Movement is everywhere around us, and sometimes we forget it as a form of communication. From body language to the way gravity works — movement can tell us a person's emotions and what actions are about to occur. 

This is no different on the web. Abrupt interactions and page loads are jarring and create a disjointed experience. With the growth of web technology, animation on the web is becoming much easier. We can use Javascript, CSS, and a slew of programs to help showcase dynamic and subtle interactions to tell more compelling stories on the web. There are great articles that compile the different technologies we can use. However, thinking about animation for the first time can be difficult.

• Where should we have animation?
• How fast should this move?
• Should it feel bouncy or rigid?
• Should it ease in or ease out?
• Should we have animation at all?

Goal Oriented Animation

If you can't rationalize any of the above questions, animations can easily become "delighters" and are seen as subjective fluff, easily dismissed or neglected. To avoid this, we should communicate project problems and goals effectively and rationalize animation as a means to solve problems or achieve project goals. To start, here are some general questions to guide you:

What do users need to do?

1. What is the most important action to users?

2. How do they do it?

3. What are they expecting when they take that action?

4. Did the animation fulfill its purpose?

How do users get to specific actions?

1. Does the layout spatially make sense?

2. Can motion help create a sense of depth to communicate hierarchy?

Do we need to reinforce any ideas?

1. Do interactions need to show a reaction to feel responsive?

2. Does interaction success need to be verified?

3. How do we show site performance speed and quality through interactions?

If you can start to answer these questions, animation becomes less subjective, and more objective. If you can start to answer these questions, animation becomes less subjective, and more objective. This is where we can have fun communicating brand voice and tone through our animations.

 

What makes good animation?

If you do a bit of research, the 12 Principles of Animation will be mentioned wherever you go. These are principles that have been observed in human movement for decades and shows us what makes an animation feel “real.” Looking for these patterns of movement in real life is the first step to understanding motion design. Every movement has an action and reaction.

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead Action and Pose to Pose

5. Follow Through and Overlapping Motion

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal
    

How does this apply to interaction design?

Buttons, links, blocks of text, and web pages don’t move like humans. However, we can use movement to design the way a user consumes and interacts with a page. Every movement has an action and reaction, and so should your interface. Planning these movements allows users to understand some key things:

1. Orient users to the layout of the page

2. Tell them can be interacted with

3. Visually guide users through content

4. Call attention to the most important content

5. Give feedback to the actions users take

6. Give visual appeal to the interface

How do we bring this into the interactive space?

If you’re working with a team, you need to intentionally and responsibly design every animated action and reaction. Here are four tips to incorporate animation in any upcoming projects:

1. Start talking about animations and interactions early

2. Determine the most important actions that need to be taken on the page

3. Use animation principles to define how interactions can reflect real-world gestures

4. Create an animation style guide for common interaction patterns

How can we execute these animations?

It’s easy to visualize the way things move in our minds but difficult to talk through in words. Prototyping animations is very visual. Here are a few suggestions on how to communicate your animation intentions.

1. Storyboarding / Sketching

1. Pencil

2. Whiteboard

3. Illustrator

4. Keynote

2. Rough Prototyping

1. After Effects

2. Flash

3. Principle

4. Keynote

3. Hi-Fidelity Prototyping

1. FramerJS

2. Principle

3. HTML / CSS / JS

Animations are a tool.

Like other design skills, animation is a tool for communicating clearly and communicating well. When done well, animation can provide more clarity than anything static. Rationalize animation through your project goals and primary calls to action. Remember that your goal is good communication, not good animation.