Interface Tween

An animation that animates between two or more values over a specific duration of time. This is the default animation for non-physical values like color and opacity.

interface Tween {
    duration?: number;
    ease?: Easing | Easing[];
    easings?: Easing[];
    from?: string | number;
    repeat?: number;
    repeatDelay?: number;
    repeatType?: "reverse" | "loop" | "mirror";
    times?: number[];
    type?: "tween";
}

Hierarchy (view full)

Properties

duration? ease? easings? from? repeat? repeatDelay? repeatType? times? type?

Properties

Optional duration

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 }
  }
}

Optional ease

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] }}
/>

Optional easings

easings?: Easing[]

When animating keyframes, easings can be used to define easing functions between each keyframe. This array should be one item fewer than the number of keyframes, as these easings apply to the transitions between the keyframes.

<motion.div
  animate={{ backgroundColor: ["#0f0", "#00f", "#f00"] }}
  transition={{ easings: ["easeIn", "easeOut"] }}
/>

Optional from

from?: string | number

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 }}
/>

Optional repeat

repeat?: number

The number of times to repeat the transition. Set to Infinity for perpetual repeating.

Without setting repeatType, this will loop the animation.

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

Optional repeatDelay

repeatDelay?: number

When repeating an animation, repeatDelay will set the duration of the time to wait, in seconds, between each repetition.

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

Optional repeatType

repeatType?: "reverse" | "loop" | "mirror"

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches from and to alternately

<motion.div
  animate={{ rotate: 180 }}
  transition={{
    repeat: 1,
    repeatType: "reverse",
    duration: 2
  }}
/>

Optional times

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] }}
/>

Optional type

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" }}
/>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc