Skip to main content


interface SimpleTransition {
readonly easing: Easing
readonly duration: number

interface DirectionalTransition {
readonly type: "MOVE_IN" | "MOVE_OUT" | "PUSH" | "SLIDE_IN" | "SLIDE_OUT"
readonly direction: "LEFT" | "RIGHT" | "TOP" | "BOTTOM"
readonly matchLayers: boolean

readonly easing: Easing
readonly duration: number

type Transition = SimpleTransition | DirectionalTransition

interface Easing {
readonly easingFunctionCubicBezier?: { x1: number, y1: number, x2: number, y2: number }
readonly easingFunctionSpring?: { mass: number, stiffness: number, damping: number, initialVelocity: number }

A prototyping Transition describes an animation used when navigating in a prototype.

When the transition type is "SMART_ANIMATE" or when matchLayers is true, then the transition will be performed using smart animate, which attempts to match corresponding layers an interpolate other properties during the animation.

When the easing type is "CUSTOM_CUBIC_BEZIER", then easingFunctionCubicBezier will describe the points that define the cubic bezier easing curve. The values x1, y1, x2, y2 are the same as shown in the UI.

When the easing type is "CUSTOM_SPRING", then easingFunctionSpring will describe parameters for the spring formula. These parameters are mass, stiffness and damping.