Edit Page

#Animation (Deprecated)

These are the legacy Animation APIs used by Framer Libary v0.10.x and earlier. All new code components should be using Animation.

#animate(from, to, animator, options): FramerAnimation<Value, Options>

Use the MotionProps.animate prop on Frame instead.

Animate an Animatable value to a new value.

Recommended use is to use convenience functions from the animate namespace instead of passing an animator. Only use this for low-level animation tweaking.

const value = Animatable(0)
animate(value, 100)

const value = Animatable({x: 0, y: 0})
animate(value, {x: 100, y: 100})
from: Animatable<Value> | AnimatableObject<Value>

The animatable value or object to start from

to: Value

Value to animate to

animator: AnimatorClass<Value, Options>

Animator class to use.

options: Partial<Options & AnimationOptions<Value>>

Animation options

returns: FramerAnimation<Value, Options>

Instance of FramerAnimation that can be used to control the animation

#animate

Use the MotionProps.animate prop on Frame instead.

#animate.bezier(from, to, options): FramerAnimation<Value, BezierOptions>

Use MotionProps.animate on Frame instead.

Animate value with a bezier curve

const value = Animatable(0)
animate.bezier(value, 100, {duration: 1, curve: Bezier.EaseIn})

animate.bezier(value, 100, {duration: 1, curve: [0.3, 0.1, 0.4, 1]})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<BezierOptions & AnimationOptions<Value>>

Options for the bezier curve

  • duration Duration of the animation
  • curve One of the Bezier enum values or an array with 4 control points
returns: FramerAnimation<Value, BezierOptions>

Instance of FramerAnimation that can be used to control the animation

#animate.ease(from, to, options): FramerAnimation<Value, BezierOptions>

Use MotionProps.animate on Frame instead.

Animate value with a ease animation

const value = Animatable(0)
animate.ease(value, 100)

animate.ease(value, 100, {duration: 1})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<EaseOptions & AnimationOptions<Value>>

The options for the animation

  • duration Duration of the animation
returns: FramerAnimation<Value, BezierOptions>

Instance of FramerAnimation that can be used to control the animation

#animate.easeIn(from, to, options): FramerAnimation<Value, BezierOptions>

Use MotionProps.animate on Frame instead.

Animate value with a ease in animation

const value = Animatable(0)
animate.easeIn(value, 100)

animate.easeIn(value, 100, {duration: 1})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<EaseOptions & AnimationOptions<Value>>

The options for the animation

  • duration Duration of the animation
returns: FramerAnimation<Value, BezierOptions>

Instance of FramerAnimation that can be used to control the animation

#animate.easeInOut(from, to, options): FramerAnimation<Value, BezierOptions>

Use MotionProps.animate on Frame instead.

Animate value with a ease in out animation

const value = Animatable(0)
animate.easeInOut(value, 100)

animate.easeInOut(value, 100, {duration: 1})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<EaseOptions & AnimationOptions<Value>>

The options for the animation

  • duration Duration of the animation
returns: FramerAnimation<Value, BezierOptions>

Instance of FramerAnimation that can be used to control the animation

#animate.easeOut(from, to, options): FramerAnimation<Value, BezierOptions>

Use MotionProps.animate on Frame instead.

Animate value with a ease out animation

const value = Animatable(0)
animate.easeOut(value, 100)

animate.easeOUt(value, 100, {duration: 1})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<EaseOptions & AnimationOptions<Value>>

The options for the animation

  • duration Duration of the animation
returns: FramerAnimation<Value, BezierOptions>

Instance of FramerAnimation that can be used to control the animation

#animate.linear(from, to, options): FramerAnimation<Value, BezierOptions>

Use MotionProps.animate on Frame instead.

Animate value with a linear animation

const value = Animatable(0)
animate.linear(value, 100)

animate.linear(value, 100, {duration: 1})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<EaseOptions & AnimationOptions<Value>>

The options for the animation

  • duration Duration of the animation
returns: FramerAnimation<Value, BezierOptions>

Instance of FramerAnimation that can be used to control the animation

#animate.spring(from, to, options): FramerAnimation<Value, SpringOptions>

Use MotionProps.animate on Frame instead.

Animate value with a spring curve

const value = Animatable(0)
animate.spring(value, 100, {tension: 100, friction: 100})

animate.spring(value, 100, {dampingRatio: 0.5, duration: 1})
from: Animatable<Value> | AnimatableObject<Value>

Value to animate

to: Value

Value to animate to

options: Partial<SpringOptions & AnimationOptions<Value>>

Options for the spring These can be either tension, friction, velocity and tolerance _or_ dampingRatio, duration, velocity and mass

returns: FramerAnimation<Value, SpringOptions>

Instance of FramerAnimation that can be used to control the animation

#Animatable

Use useMotionValue instead

#get(): Value

Get the current value out of this Animatable object

const a = Animatable(0)
a.get() // returns 0
await animate(a, 42)
a.get() // returns 42
returns: Value

Current value

#set(value): void

#set(value, transaction): void

Set a new value to a animatable object

The passed value can be an Animatable value too

const a = Animatable(0)
const b = Animatable(100)
a.set(42)
a.get() // returns 42
a.set(b)
a.get() // returns 100
value: Value | Animatable<Value>

New value to set to the animatable

#Animatable(value): Animatable<Value>

Use useMotionValue instead

Creates a Animatable object that can be animated. These objects can be passed into a DeprecatedFrame instead of a primitive like number and afterwards animated with animate.

const value = Animatable(0)
animate(value, 100)
value: Value | Animatable<Value>

Value to animate

returns: Animatable<Value>

Animatable value

#Animatable.getNumber(value, defaultValue): number

value: number | Animatable<number> | null | undefined
defaultValue: number
returns: number

#FramerAnimation

Use the useAnimation hook instead

The animation object returned by the animate functions

Can be used to control a animation or wait for it to finish. You never create a FramerAnimation yourself, but store the return type from the animate function.

const animation = animate.ease(value, 100)
await animation.finished()
const animation = animate.spring(value, 200)
animation.cancel()

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the FramerAnimation class.

#finished: Promise<void>

Wait for the animation to be finished.

// async/await syntax
const animation = animate.ease(value, 100)
await animation.finished()
// Animation is finished


const animation = animate.ease(value, 100)
animation.ready().then(() => {
   // Animation is finished
})

#ready: Promise<void>

Wait for the animation to be ready to play.

const animation = animate.ease(value, 100)
animation.ready().then(() => {
   // Animation is ready
})

// async/await syntax
const animation = animate.ease(value, 100)
await animation.ready()
// Animation is ready

#cancel(): void

Cancels the animation if it is still running.

const animation = animate.ease(value, 100, {duration: 3})
setTimeout(() => animation.cancel(), 500)

#transform(inputValue, inputRange, outputRange, options): T

Transforms numbers into other values by mapping them from an input range to an output range. Returns the type of the input provided.

Given an input range of [0, 200] and an output range of [0, 1], this function will return a value between 0 and 1. The input range must be a linear series of numbers. The output range can be any supported value type, such as numbers, colors, shadows, arrays, objects and more. Every value in the output range must be of the same type and in the same format.

import * as React from "react"
import { Frame, transform } from "framer"

export function MyComponent() {
   const inputRange = [0, 200]
   const outputRange = [0, 1]
   const output = transform(100, inputRange, outputRange)

   // Returns 0.5
   return <Frame>{output}</Frame>
}
inputValue: number

A number to transform between the input and output ranges.

inputRange: number[]

A linear series of numbers (either all increasing or decreasing).

outputRange: T[]

A series of numbers, colors, strings, or arrays/objects of those. Must be the same length as inputRange.

options: TransformOptions<T>

Clamp: Clamp values to within the given range. Defaults to true.

returns: T