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.

// Named easing
ease: "easeIn"

// Bezier curve
ease: [0.39, 0.24, 0.3, 1]

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":

import { easeIn } from "motion"

By passing a 0-1 progress value to these functions, you'll receive an eased progress back.

const eased = easeIn(0.75)

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 than 0.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.

import { cubicBezier } from "motion"

const easing = cubicBezier(.35,.17,.3,.86)

const easedProgress = easing(0.5)

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.

import { steps } from "motion"

const easing = steps(4)

easing(0.2) // 0
easing(0.25) // 0.25

By default, the "steps" change at the end of a step, this can be changed by passing "start" to steps:

const easing = steps(4, "start")

easing(0.2) // 0.25

The distribution of steps is linear by default but can be adjusted by passing progress through another easing function first.

const easing = steps(4)

easing(circInOut(0.2))

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.

import { reverseEasing } from "motion"

const powerIn = (progress) => progress * progress

const powerOut = reverseEasing(powerIn)

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.

import { mirrorEasing } from "motion"

const powerIn = (progress) => progress * progress

const powerInOut = mirrorEasing(powerInOut)