# Wipe transition

The old scene is wiped away from the bottom edge up. The next scene comes in as the last of it leaves, never on top of it. It is a move: the old scene itself is taken out and the next one comes in behind.

> Live preview: see the transition playing at https://bettertyped.github.io/react-wrapped/docs/transitions/wipe/

## Usage

Every scene already has a transition: the video's seed picks one per scene, so two videos rarely cut the same way. To choose one yourself, name it for that scene in the config.

```tsx
import { DEFAULT_WRAPPED_CONFIG, type WrappedConfig } from "@react-wrapped/kit";

const config: WrappedConfig = {
  ...DEFAULT_WRAPPED_CONFIG,
  // The scene with the key "total" leaves with Wipe.
  cuts: { total: "wipe" },
};
```

## How it works

A move animates the outgoing scene itself and marks the moment the next scene should start. The next scene comes in as the last of the old one leaves, so two headlines never sit on top of each other.

Transitions are placed on the same GSAP timeline as the scenes. Seeking backwards through one undoes it exactly, which is what makes the timeline scrubbable and the video exportable frame by frame.

## Related

- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)
- [Iris transition](https://bettertyped.github.io/react-wrapped/docs/transitions/iris/)
- [Lift transition](https://bettertyped.github.io/react-wrapped/docs/transitions/lift/)
- [Slash transition](https://bettertyped.github.io/react-wrapped/docs/transitions/slash/)
- [Charts](https://bettertyped.github.io/react-wrapped/docs/charts/)

Source: https://bettertyped.github.io/react-wrapped/docs/transitions/wipe/