Easing functions
A powerful set of easing functions that can be used with any animation library
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
// Reactimport { cubicBezier } from "framer-motion"
// Universalimport { cubicBezier } from "framer-motion/dom"
#Easing functions
All of Framer Motion's named easings can be exported as functions using their name.
// Reactimport { easeIn } from "framer-motion"
// Universalimport { 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)