Intro to Web Animations

Everyone loves web animations. Why? because they provide users with perceptual context so that digital interactions look and feel like physical, real-world ones.

That being said… one shouldn’t ambush their users with animations that don’t enhance the user’s experience. The best web animations have real-world feel, are well-timed, and demonstrate purpose.

Purpose-driven Web Animations:

Web Animations or Motion UI ideally supports usability. Here are a few goals to keep usability in mind:

1. Reinforce what our user EXPECTS to happen minimizing the gap between user expectations and experience. i.e. Clicking on a hamburger menu should expand a user’s next available options.

2. Guides users through a continual NARRATIVE of events, or a series of scenes we create that culminates in the user experience of the product. i.e. using scroll-in animations to guide the user experience narrative. For Example

3. Develop CONSISTENT relationships between web elements to guide user understanding. i.e. create a system for how animations engage users by, for example, building consistent button hover events in regards to potential color change, timing, and easing (we’ll focus more on Easing below).

Using Animation or Motion UI to Guide User Experience:

Provide a Visual Response

Animations that reveal state transitions indicating that an interaction has taken place and gives users a response for their engagement. Hover on a button. Color change on a link.

image credit:Nikola Popovic

Emphasize Elements for User Engagement

Animations that bring attention to specific elements to draw users in towards engagement. An indicator to click. A Call-to-Action horizontal scroll banner. A chatbot nudge. An toggle arrow to keep scrolling.

Guide User Focus: Hide / Reveal

Animations that are called upon when information is needed. Navigation menu. Appear on Scroll web elements. Expandable / Collapsable tabs. Elements that reveal themselves upon page scroll.

The Importance of Timing

Most importantly, no animation or motion UI interaction should take more time than a user might reasonably expect. Creating interactions that have long load-times may cause users to disengage with your content, or just keep scrolling, or in the worst case, leave the page or app entirely.

There’s also a key difference between realtime interactions and delayed Interactions.

A real-time interaction or ‘direct manipulation’ is when the user is engaging with web elements directly and those elements respond immediately.

image credit: UX in Motion.

A delayed interaction occur after user input is received, and momentarily pauses the user’s direct engagement until after the interaction transitions.

image credit: UX in Motion.

The Principles of Motion:

The 12 Principles of Motion draws its origins from the 12 Principles of Animation… and I mean animation in the traditional cartoon definition of the word. The principles of animation have been used by Disney animators since the 1930s and were outlined by Ollie Johnson and Frank Thomas in a book called The Illusion of Life: Disney Animation in 1981. While similar conceptually to the Principles of Animation, the Principles of Motion focus on animated interactions that drive user engagement and usability.

image credit: UX in Motion

If you’re really curious about UX motion, I encourage you to follow Issara Willenskomer, the founder of UX in Motion, and read more about the 12 Principles of Motion in Issara’s post here.

Easing Animations in CSS

Starting with the basics and probably the most commonly utilized principle, let’s use CSS transition properties to demonstrate the Easing interactions on few div elements. Again, timing is everything. Here's a little easing cheatsheet to help.

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end

EASING Code Example with CSS:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
    border-radius: 50%;
  background: #0075F2;
  transition: width 1.5s;
  margin-bottom: 1em;
  margin-left: 2em;
  text-align: center;
  line-height: 100px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  color: #FFEAEE;
}

div:hover {
  width: 700px;
}

h1 {
  color: #0075F2;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

#cir2 {transition-timing-function: ease;}
#cir3 {transition-timing-function: ease-in;}
#cir4 {transition-timing-function: ease-out;}
#cir5 {transition-timing-function: ease-in-out;}


</style>
</head>
<body>

<h1>CSS transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="cir2">EASE</div><br>
<div id="cir3">EASE-IN</div><br>
<div id="cir4">EASE-OUT</div><br>
<div id="cir5">EASE-IN-OUT</div><br>

</body>
</html>

What you see in the browser:

Get Inspired. Follow other creators.

I highly recommend following designers, animators, and web developers who design and develop projects that you admire. There are some really talented folks on Behance.net, Dribbble.com, Webflow.com, awwwards.com/, etc.

Sources and More Info:

If you’re just getting started or what to learn more about UX/UI, I would highly recommend checking out the following resources. Thanks for reading.

Awesome: curated list for Motion UI Design: https://project-awesome.org/fliptheweb/motion-ui-design

PageCloud: https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02

Creating Usability with Motion: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

Tools for Animating through CSS:

Animate.css: https://animate.style/tool for making basic animations. Primarily for transitions.

Bounce.js: https://github.com/tictail/bounce.js/blob/master/README.mdlibrary that lets you create and embed animations into CSS.