Intro to Web Animations
Tags: beginners, css
Published: 2022-06-27 12:24:33

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](https://climatehistory.webflow.io/)

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. 

![button hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73spykum5aatyfl4dgr9.gif) image credit:[Nikola Popovic](https://dribbble.com/NikolaPopovic)
    
**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. 

![Hamburger Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgeu9vbhiedupjjg9g46.gif)


## 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. 

![real-time animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmd000j587pvwogrcvyz.gif)image credit: [UX in Motion](https://www.uxinmotion.com/).

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

![delayed animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0todo3xwvjeizqwjchs.gif)image credit: [UX in Motion](https://www.uxinmotion.com/).

## 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. 


![12 Principles of Motion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipw87t0201tuxza39oid.gif) image credit: [UX in Motion](https://www.uxinmotion.com/)

If you’re really curious about UX motion, I encourage you to follow [Issara Willenskomer](https://medium.com/@ux_in_motion), the founder of UX in Motion, and read more about the 12 Principles of Motion in [Issara’s post here](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc).

## 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](https://easings.net/) 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:

```html
<!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:**

![Demonstrate Easing with CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f768l35i18494yibj2rf.gif)


**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](https://www.behance.net/), [Dribbble.com](https://dribbble.com/), [Webflow.com](https://webflow.com/made-in-webflow), [awwwards.com/](https://www.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](https://project-awesome.org/fliptheweb/motion-ui-design)

PageCloud: [https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02](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](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/](https://animate.style/)tool for making basic animations. Primarily for transitions.

Bounce.js: [https://github.com/tictail/bounce.js/blob/master/README.md](https://github.com/tictail/bounce.js/blob/master/README.md)library that lets you create and embed animations into CSS.