transitions

import {...} from "@motion-canvas/core/lib/transitions";

Transitions between scenes.

Functions

fadeTransition

public fadeTransitionduration: number = 0.6: ThreadGenerator

Perform a transition that fades between the scenes.

Parameters

• duration: number = 0.6

  The duration of the transition.

---

slideTransition

public slideTransitiondirection: Directionduration?: number: ThreadGenerator

public slideTransitionorigin: Originduration?: number: ThreadGenerator

Perform a transition that slides the scene in the given direction.

Parameters

• direction: Direction

  The direction in which to slide.

• duration?: number

  The duration of the transition.

---

useTransition

public useTransitioncurrent: ctx: CanvasRenderingContext2D => voidprevious?: ctx: CanvasRenderingContext2D => voidpreviousOnTop?: SignalValueboolean: () => void

Transition to the current scene by altering the Context2D before scenes are rendered.

Parameters

• current: ctx: CanvasRenderingContext2D => void

  The callback to use before the current scene is rendered.

• previous?: ctx: CanvasRenderingContext2D => void

  The callback to use before the previous scene is rendered.

• previousOnTop?: SignalValueboolean

  Whether the previous scene should be rendered on top.

---

waitTransition

public waitTransitionduration: number = 0.6previousOnTop: SignalValueboolean = true: ThreadGenerator

Perform a transition that doesn't do anything.

This is useful when you want to achieve a transition effect by animating objects in the scenes. It will overlay the scenes on top of each other for the duration of the transition.

Parameters

• duration: number = 0.6

  The duration of the transition.

• previousOnTop: SignalValueboolean = true

  Whether the previous scene should be rendered on top.

---

zoomInTransition

public zoomInTransitionarea: BBoxduration: number = 0.6: ThreadGenerator

Perform a transition that zooms in on a given area of the scene.

Parameters

• area: BBox

  The area on which to zoom in.

• duration: number = 0.6

  The duration of the transition.

---

zoomOutTransition

public zoomOutTransitionarea: BBoxduration: number = 0.6: ThreadGenerator

Perform a transition that zooms out from a given area of the scene.

Parameters

• area: BBox

  The area from which to zoom out.

• duration: number = 0.6

  The duration of the transition.