Easing functions
Easing functions are used to change the speed of an animation throughout the course of its duration. Different easing functions provide your animations with different "feelings".
Both the animate
function and Motion for React's motion
component have the following easing functions built-in and you can just refer to them by name.
But you can still import them separately to use them directly, either for use with the tiny animate
function from "motion/dom"
or for novel use-cases.
Usage
All of Motion's easing functions can be imported straight from "motion"
:
By passing a 0
-1
progress value to these functions, you'll receive an eased progress back.
Functions
Motion provides a number of easing functions:
cubicBezier
easeIn
/easeOut
/easeInOut
backIn
/backOut
/backInOut
circIn
/circOut
/circInOut
anticipate
linear
steps
I usually use the
"easeOut"
curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than0.3
/0.4
seconds to keep the animation fast.
~ Emil Kowalski, Animations on the Web
cubicBezier
cubicBezier
provides very precise control over the easing curve.
New easing curve definitions can be generated on cubic-bezier.com.
steps
steps
creates an easing with evenly-spaced, discrete steps. It is spec-compliant with CSS steps
easing.
By default, the "steps" change at the end of a step, this can be changed by passing "start"
to steps
:
The distribution of steps is linear by default but can be adjusted by passing progress
through another easing function first.
Modifiers
Easing modifiers can be used to create mirrored and reversed easing functions.
reverseEasing
reverseEasing
accepts an easing function and returns a new one that reverses it. For instance, an ease in function will become an ease out function.
mirrorEasing
mirrorEasing
accepts an easing function and returns a new one that mirrors it. For instance, an ease in function will become an ease in-out function.
A Motion+ membership will give you early access to features & content, access to our private Discord, and more.
It's a one-time fee that grants lifetime access. No subscription necessary!