3.2: Eases - Adding Character and Style to Motion

$$\newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$$ $$\newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}}$$$$\newcommand{\id}{\mathrm{id}}$$ $$\newcommand{\Span}{\mathrm{span}}$$ $$\newcommand{\kernel}{\mathrm{null}\,}$$ $$\newcommand{\range}{\mathrm{range}\,}$$ $$\newcommand{\RealPart}{\mathrm{Re}}$$ $$\newcommand{\ImaginaryPart}{\mathrm{Im}}$$ $$\newcommand{\Argument}{\mathrm{Arg}}$$ $$\newcommand{\norm}[1]{\| #1 \|}$$ $$\newcommand{\inner}[2]{\langle #1, #2 \rangle}$$ $$\newcommand{\Span}{\mathrm{span}}$$ $$\newcommand{\id}{\mathrm{id}}$$ $$\newcommand{\Span}{\mathrm{span}}$$ $$\newcommand{\kernel}{\mathrm{null}\,}$$ $$\newcommand{\range}{\mathrm{range}\,}$$ $$\newcommand{\RealPart}{\mathrm{Re}}$$ $$\newcommand{\ImaginaryPart}{\mathrm{Im}}$$ $$\newcommand{\Argument}{\mathrm{Arg}}$$ $$\newcommand{\norm}[1]{\| #1 \|}$$ $$\newcommand{\inner}[2]{\langle #1, #2 \rangle}$$ $$\newcommand{\Span}{\mathrm{span}}$$$$\newcommand{\AA}{\unicode[.8,0]{x212B}}$$

Eases

In traditional animations, ease defines an animation's starting and stopping motion. If an animation starts slowly and then speeds up, that is called ease in. If an animation decelerates toward the end of its motion, that animation is said to ease out. Eases are what gives an animation more character and style.

Definition: Ease

The character with which an animation moves.

Definition: Ease-in

An animation that starts slowly and then speeds up.

Definition: Ease-out

An animation that slows down at the end of its motion.

The nice thing about the following video is that it compares no easing at all to other easing types found in Adobe Animate, which we will be using a bit later in the semester. Don't get too wrapped up in the technical details just yet...the takeaway here is to compare no easing to some of the other easing types.

Please watch the first four minutes or so to get a feel for what eases do.

Let's explore the keywords that are associated with the timing-function in the Easing Sampler below. If you have trouble viewing this, feel free to see the original one on my website. All of the coding for the eases below came from the "Easing-function" article on the MDN Web docs site. Play around with the animations below and then go read the article, please.

Interactive Element

The very last timing function in the example above was the cubic-bezier. The cubic-bezier function provides the most flexibility and customization in the motion of an animation. There are four numbers that can be tweaked in setting this up.2 Take a look at the article from W3Schools on the CSS cubic-bezier() Function.

The cubic-bezier timing function provides the most flexibility and customization in the motion of an animation.

Now that you know how the cubic-bezier function works, there are tons of resources where you can see your animations in action. I'm going to share two of these today: Easings.net and Cubic-bezier.com. Take a look at this page from Easings.net. I like the way they visualize the cubic bezier curves.

Warning - Do not use their terms (like easeInQuad) as a keyword in your CSS files. These terms are descriptive only. However, they do have a post where you can copy the correct CSS code, so be sure to look for that instead.

I'd like to show you the final resource for bezier curves: cubic-bezier.com. The site allows you to drag the handles on the bezier curve much like you would do in the pen tool in Illustrator or Photoshop. Use it to tweak your easings.

There are a couple of timing functions that I did not cover today: Step in and Step out. If you'd like to see information on those, check out the w3schools article on CSS transition-timing functions.

Exercise $$\PageIndex{1}$$

We're going to do the exercise for this section a little differently. Open up the video below in a different browser window and resize it so that you can see both the video and the codepen below it simultaneously. Then, follow along with my demonstration by watching the video and typing along with me.

See the Pen Transitions with easings by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

Footnotes

1. “ CSS Eases.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/...asing-function.

2. CSS Cubic-Bezier() Function, W3 Schools, https://www.w3schools.com/cssref/fun...bic-bezier.php.

This page titled 3.2: Eases - Adding Character and Style to Motion is shared under a CC BY-NC 4.0 license and was authored, remixed, and/or curated by Rosemary Barker.