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)

Supported easing functions are:

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

There's also the cubicBezier easing function we can provide very precise control over the animation.

#cubicBezier(number, number, number, number): EasingFunction

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

const easedProgress = easing(0.5)

#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)