Edit Page

#Types

TypeScript type definitions for Motion.

#Transition

A Transition is an object that defines how values animate from one state to another.

This object can contain Orchestration props like delay, that schedule the animation as a whole.

<motion.div
  animate={{ x: 100 }}
  transition={{ delay: 1 }}
/>

It can also accept props that define which type of animation to use a Tween, Spring or Inertia.

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 100 }}
/>

A different type of animation can be defined for each animating value. default can be used to define animations for any remaining values.

<motion.div
  animate={{ x: 100, y: 100, opacity: 1 }}
  transition={{
    delay: 1,
    x: { type: "spring", stiffness: 100 },
    default: { duration: 2 },
  }}
/>

#Orchestration

#delay: number

Delay the animation by this duration (in seconds). Defaults to 0.

const transition = {
  delay: 0.2
}

#delayChildren: number

When using variants, children animations will start after this duration (in seconds). You can add the transition property to both the Frame and the variant directly. Adding it to the variant generally offers more flexibility, as it allows you to customize the delay per visual state.

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}

return (
  <motion.ul
    variants={container}
    initial="hidden"
    animate="show"
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

#staggerChildren: number

When using variants, animations of child components can be staggered by this duration (in seconds).

For instance, if staggerChildren is 0.01, the first child will be delayed by 0 seconds, the second by 0.01, the third by 0.02 and so on.

The calculated stagger delay will be added to delayChildren.

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}

return (
  <motion.ol
    variants={container}
    initial="hidden"
    animate="show"
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ol>
)

#staggerDirection: number

The direction in which to stagger children.

A value of 1 staggers from the first to the last while -1 staggers from the last to the first.

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5,
      staggerDirection: -1
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}

return (
  <motion.ul
    variants={container}
    initial="hidden"
    animate="show"
  >
    <motion.li variants={item} size={50} />
    <motion.li variants={item} size={50} />
  </motion.ul>
)

#when: false | "beforeChildren" | "afterChildren" | string

Describes the relationship between the transition and its children. Set to false by default.

When using variants, the transition can be scheduled in relation to its children with either "beforeChildren" to finish this transition before starting children transitions, "afterChildren" to finish children transitions before starting this transition.

const list = {
  hidden: {
    opacity: 0,
    transition: { when: "afterChildren" }
  }
}

const item = {
  hidden: {
    opacity: 0,
    transition: { duration: 2 }
  }
}

return (
  <motion.ul variants={list} animate="hidden">
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

#Tween

#type: "tween"

Set type to "tween" to use a duration-based tween animation. If any non-orchestration transition values are set without a type property, this is used as the default animation.

<motion.path
  animate={{ pathLength: 1 }}
  transition={{ duration: 2, type: "tween" }}
/>

#duration: number

The duration of the tween animation. Set to 0.3 by default, 0r 0.8 if animating a series of keyframes.

const variants = {
  visible: {
    opacity: 1,
    transition: { duration: 2 }
  }
}

#ease: Easing | Easing[]

The easing function to use. Set as one of the below.

  • The name of an existing easing function.
  • An array of four numbers to define a cubic bezier curve. An easing function, that accepts and returns a value 0-1.

If the animating value is set as an array of multiple values for a keyframes animation, ease can be set as an array of easing functions to set different easings between each of those values.

<motion.div
  animate={{ opacity: 0 }}
  transition={{ ease: [0.17, 0.67, 0.83, 0.67] }}
/>

These strings are the built-in named easing functions in Framer.

  • "linear"
  • "easeIn", "easeOut", "easeInOut"
  • "circIn", "circOut", "circInOut"
  • "backIn", "backOut", "backInOut"
  • "anticipate"

#from: number | string

The value to animate from. By default, this is the current state of the animating value.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ from: 90, duration: 2 }}
/>

#loop: number

The number of times to loop the animation. Set to Infinity for perpetual looping.

<motion.div
  animate={{ rotate: 360 }}
  transition={{
    loop: Infinity,
    ease: "linear",
    duration: 2
  }}
/>

#flip: number

The number of times to flip the animation by swapping the to and from values. Set to Infinity for perpetual flipping.

<motion.div
  animate={{ opacity: 0 }}
  transition={{ flip: Infinity, duration: 2 }}
/>

#yoyo: number

The number of times to reverse the animation. Set to Infinity for perpetual reversing.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ yoyo: Infinity, duration: 2 }}
/>

#repeatDelay: number

When repeating an animation using loop, flip, or yoyo, repeatDelay can set the duration of the time to wait, in seconds, between each repetition.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ yoyo: Infinity, repeatDelay: 1 }}
/>

#times: number[]

When animating keyframes, times can be used to determine where in the animation each keyframe is reached. Each value in times is a value between 0 and 1, representing duration.

There must be the same number of times as there are keyframes. Defaults to an array of evenly-spread durations.

<motion.div
  animate={{ scale: [0, 1, 0.5, 1] }}
  transition={{ times: [0, 0.1, 0.9, 1] }}
/>

#Spring

An animation that simulates spring physics for realistic motion.

This is the default animation for physical values like x, y, scale and rotate.

#type: "spring"

Set type to "spring" to animate using spring physics for natural movement. Type is set to "spring" by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring' }}
/>

#damping: number

Strength of opposing force. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

<motion.a
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', damping: 300 }}
/>

#mass: number

Mass of the moving object. Higher values will result in more lethargic movement. Set to 1 by default.

<motion.feTurbulence
  animate={{ baseFrequency: 0.5 } as any}
  transition={{ type: "spring", mass: 0.5 }}
/>

#stiffness: number

Stiffness of the spring. Higher values will create more sudden movement. Set to 100 by default.

<motion.section
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', stiffness: 50 }}
/>

#velocity: number

The initial velocity of the spring. By default this is the current velocity of the component.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', velocity: 2 }}
/>

#restSpeed: number

End animation if absolute speed (in units per second) drops below this value and delta is smaller than restDelta. Set to 0.01 by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', restSpeed: 0.5 }}
/>

#restDelta: number

End animation if distance is below this value and speed is below restSpeed. When animation ends, spring gets “snapped” to. Set to 0.01 by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', restDelta: 0.5 }}
/>

#Inertia

An animation that decelerates a value based on its initial velocity, usually used to implement inertial scrolling.

Optionally, min and max boundaries can be defined, and inertia will snap to these with a spring animation.

This animation will automatically precalculate a target value, which can be modified with the modifyTarget property.

This allows you to add snap-to-grid or similar functionality.

Inertia is also the animation used for dragTransition, and can be configured via that prop.

#type: "inertia"

Set type to animate using the inertia animation. Set to "tween" by default. This can be used for natural deceleration, like momentum scrolling.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: "inertia", velocity: 50 }}
/>

#modifyTarget(v): number

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

<motion.div
  drag
  dragTransition={{
    power: 0,
    // Snap calculated target to nearest 50 pixels
    modifyTarget: target => Math.round(target / 50) * 50
  }}
/>

#bounceStiffness: number

If min or max is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement. Set to 500 by default.

<motion.div
  drag
  dragTransition={{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }}
/>

#bounceDamping: number

If min or max is set, this affects the damping of the bounce spring. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

<motion.div
  drag
  dragTransition={{
    min: 0,
    max: 100,
    bounceDamping: 8
  }}
/>

#power: number

A higher power value equals a further target. Set to 0.8 by default.

<motion.div
  drag
  dragTransition={{ power: 0.2 }}
/>

#timeConstant: number

Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel. Set to 700 by default.

<motion.div
  drag
  dragTransition={{ timeConstant: 200 }}
/>

#restDelta: number

End the animation if the distance to the animation target is below this value, and the absolute speed is below restSpeed. When the animation ends, the value gets snapped to the animation target. Set to 0.01 by default. Generally the default values provide smooth animation endings, only in rare cases should you need to customize these.

<motion.div
  drag
  dragTransition={{ restDelta: 10 }}
/>

#min: number

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

<motion.div
  drag
  dragTransition={{ min: 0, max: 100 }}
/>

#max: number

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

<motion.div
  drag
  dragTransition={{ min: 0, max: 100 }}
/>

#AnimationControls

Control animations on one or more components.

#set(definition): void

Instantly set to a set of properties or a variant.

// With properties
controls.set({ opacity: 0 })

// With variants
controls.set("hidden")
definition: AnimationDefinition

#start(definition, transitionOverride): Promise<any>

Starts an animation on all linked components.

controls.start("variantLabel")
controls.start({
  x: 0,
  transition: { duration: 1 }
})
definition: AnimationDefinition

Properties or variant label to animate to

transitionOverride: Transition

Optional transtion to apply to a variant

returns: Promise<any>
  • A Promise that resolves when all animations have completed.

#stop(): void

Stops animations on all linked components.

controls.stop()

#Misc

#VariantLabels: string | string[]

Either a string, or array of strings, that reference variants defined via the variants prop.

#TargetAndTransition

An object that specifies values to animate to. Each value may be set either as a single value, or an array of values.

It may also option contain these properties:

  • transition: Specifies transitions for all or individual values.
  • transitionEnd: Specifies values to set when the animation finishes.
const target = {
  x: "0%",
  opacity: 0,
  transition: { duration: 1 },
  transitionEnd: { display: "none" }
}