Easing functions

Framer Motion supports a number of built-in easing functions. It also exports these easing functions, and some related utilities, for use with any animation library or in your own custom functions.

#Import

// React
import { cubicBezier } from "framer-motion"

// Universal
import { cubicBezier } from "framer-motion/dom"

#Easing functions

All of Framer Motion's named easings can be exported as functions using their name.

// React
import { easeIn } from "framer-motion"

// Universal
import { easeIn } from "framer-motion/dom"

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

const eased = easedIn(0.5)

Exported easing functions are:

• cubicBezier
• easeIn/easeOut/easeInOut
• backIn/backOut/backInOut
• circIn/circOut/circInOut
• anticipate
• linear
• steps

#cubicBezier

cubicBezier provides very precise control over the easing curve.

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 "framer-motion/dom"

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:

import { steps } from "framer-motion/dom"

const easing = steps(4)

easing(0.2) // 0
easing(0.25) // 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 accept an easing function and return a new one, modified.

#mirrorEasing(EasingFunction): EasingFunction

mirrorEasing accepts an easing function and returns a version that mirrors it half way. For instance, an easeIn becomes an easeInOut.

const easeIn = (progress) => progress * progress

const easeInOut = mirrorEasing(easeIn)

#reverseEasing(EasingFunction): EasingFunction

reverseEasing accepts an easing function and returns a version that reverses it. For instance, an easeIn becomes an easeOut.

const easeIn = (progress) => progress * progress

const easeOut = reverseEasing(easeIn)