3.2: Eases - Adding Character and Style to Motion
- Page ID
- 26405
\( \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}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
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.
The character with which an animation moves.
An animation that starts slowly and then speeds up.
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.
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.