---
title: "XFadeEffect"
canonical_url: https://docs.zvid.io/docs/structure/properties/xfade-effects/
source: docs/structure/properties/xfade-effects.md
content_revision: 6338386a1dd87e4a
---

# XFadeEffect

`XFadeEffect` is used by `enterAnimation`, `exitAnimation`, and video `transition`.
Scene `transition` uses the same names. The list below is the shared set
declared by the renderer and accepted by the hosted API.

## Effect Gallery

Hover a tile to play it. Every clip is two scenes joined by that effect with
`transitionDuration: 1` — rendered by Zvid.


Effect previews (each link demonstrates the named effect):

- [`circleclose` preview](https://cdn.zvid.io/library/docs/xfade-circleclose.mp4)
- [`circlecrop` preview](https://cdn.zvid.io/library/docs/xfade-circlecrop.mp4)
- [`circleopen` preview](https://cdn.zvid.io/library/docs/xfade-circleopen.mp4)
- [`diagbl` preview](https://cdn.zvid.io/library/docs/xfade-diagbl.mp4)
- [`diagbr` preview](https://cdn.zvid.io/library/docs/xfade-diagbr.mp4)
- [`diagtl` preview](https://cdn.zvid.io/library/docs/xfade-diagtl.mp4)
- [`diagtr` preview](https://cdn.zvid.io/library/docs/xfade-diagtr.mp4)
- [`dissolve` preview](https://cdn.zvid.io/library/docs/xfade-dissolve.mp4)
- [`fade` preview](https://cdn.zvid.io/library/docs/xfade-fade.mp4)
- [`fadeblack` preview](https://cdn.zvid.io/library/docs/xfade-fadeblack.mp4)
- [`fadegrays` preview](https://cdn.zvid.io/library/docs/xfade-fadegrays.mp4)
- [`fadewhite` preview](https://cdn.zvid.io/library/docs/xfade-fadewhite.mp4)
- [`hblur` preview](https://cdn.zvid.io/library/docs/xfade-hblur.mp4)
- [`hlslice` preview](https://cdn.zvid.io/library/docs/xfade-hlslice.mp4)
- [`horzclose` preview](https://cdn.zvid.io/library/docs/xfade-horzclose.mp4)
- [`horzopen` preview](https://cdn.zvid.io/library/docs/xfade-horzopen.mp4)
- [`hrslice` preview](https://cdn.zvid.io/library/docs/xfade-hrslice.mp4)
- [`pixelize` preview](https://cdn.zvid.io/library/docs/xfade-pixelize.mp4)
- [`radial` preview](https://cdn.zvid.io/library/docs/xfade-radial.mp4)
- [`rectcrop` preview](https://cdn.zvid.io/library/docs/xfade-rectcrop.mp4)
- [`slidedown` preview](https://cdn.zvid.io/library/docs/xfade-slidedown.mp4)
- [`slideleft` preview](https://cdn.zvid.io/library/docs/xfade-slideleft.mp4)
- [`slideright` preview](https://cdn.zvid.io/library/docs/xfade-slideright.mp4)
- [`slideup` preview](https://cdn.zvid.io/library/docs/xfade-slideup.mp4)
- [`smoothdown` preview](https://cdn.zvid.io/library/docs/xfade-smoothdown.mp4)
- [`smoothleft` preview](https://cdn.zvid.io/library/docs/xfade-smoothleft.mp4)
- [`smoothright` preview](https://cdn.zvid.io/library/docs/xfade-smoothright.mp4)
- [`smoothup` preview](https://cdn.zvid.io/library/docs/xfade-smoothup.mp4)
- [`vdslice` preview](https://cdn.zvid.io/library/docs/xfade-vdslice.mp4)
- [`vertclose` preview](https://cdn.zvid.io/library/docs/xfade-vertclose.mp4)
- [`vertopen` preview](https://cdn.zvid.io/library/docs/xfade-vertopen.mp4)
- [`vuslice` preview](https://cdn.zvid.io/library/docs/xfade-vuslice.mp4)
- [`wipebl` preview](https://cdn.zvid.io/library/docs/xfade-wipebl.mp4)
- [`wipebr` preview](https://cdn.zvid.io/library/docs/xfade-wipebr.mp4)
- [`wipedown` preview](https://cdn.zvid.io/library/docs/xfade-wipedown.mp4)
- [`wipeleft` preview](https://cdn.zvid.io/library/docs/xfade-wipeleft.mp4)
- [`wiperight` preview](https://cdn.zvid.io/library/docs/xfade-wiperight.mp4)
- [`wipetl` preview](https://cdn.zvid.io/library/docs/xfade-wipetl.mp4)
- [`wipetr` preview](https://cdn.zvid.io/library/docs/xfade-wipetr.mp4)
- [`wipeup` preview](https://cdn.zvid.io/library/docs/xfade-wipeup.mp4)


```typescript
type XFadeEffect =
  | "fade"
  | "fadeblack"
  | "fadewhite"
  | "distance"
  | "wipeleft"
  | "wiperight"
  | "wipeup"
  | "wipedown"
  | "slideleft"
  | "slideright"
  | "slideup"
  | "slidedown"
  | "smoothleft"
  | "smoothright"
  | "smoothup"
  | "smoothdown"
  | "circlecrop"
  | "rectcrop"
  | "circleclose"
  | "circleopen"
  | "horzclose"
  | "horzopen"
  | "vertclose"
  | "vertopen"
  | "diagbl"
  | "diagbr"
  | "diagtl"
  | "diagtr"
  | "hlslice"
  | "hrslice"
  | "vuslice"
  | "vdslice"
  | "dissolve"
  | "pixelize"
  | "radial"
  | "hblur"
  | "wipetl"
  | "wipetr"
  | "wipebl"
  | "wipebr"
  | "fadegrays"
  | "zoomin"
  | "hlwind"
  | "hrwind";
```

Use this shared set for portable projects. The hosted validator also recognizes
additional FFmpeg names, including `squeezeh`, `squeezev`, `fadefast`, `fadeslow`,
vertical wind, cover, and reveal effects; these are not all declared by the
renderer/editor's shared effect list. API acceptance alone does not establish
equivalent editor preview support. The editor intentionally omits `distance`
from its picker because it has no faithful preview.

Validate the request with [Validate and estimate](https://docs.zvid.io/docs/validate-and-estimate/).
That checks the payload; inspect an actual render when visual effect fidelity
matters. The gallery demonstrates its checked-in subset, not every accepted name.

## Used By

- [Animation Effects](https://docs.zvid.io/docs/structure/animations/)
- [Video Transitions](https://docs.zvid.io/docs/structure/transitions/)
- [Text & HTML Elements](https://docs.zvid.io/docs/structure/text-elements/)
- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Elements](https://docs.zvid.io/docs/structure/video-elements/)
- [GIF Elements](https://docs.zvid.io/docs/structure/gif-elements/)
- [SVG Elements (deprecated)](https://docs.zvid.io/docs/structure/svg-elements/)