---
title: "Animation Effects"
canonical_url: https://docs.zvid.io/docs/structure/animations/
source: docs/structure/animations.md
content_revision: 6338386a1dd87e4a
---

# Animation Effects

Animations are enter and exit effects for visual elements. They use FFmpeg xfade effects against transparent backgrounds.

## Properties

Set `enterAnimation` and/or `exitAnimation` to a supported xfade effect name.
The animation plays inside the element's enter/exit timing windows
(`enterBegin → enterEnd` and `exitBegin → exitEnd`) — see
[Common Element Properties](https://docs.zvid.io/docs/structure/common-properties/#timing) for the timing
model. An animation only plays when its window's end time is greater than its
start time.

## Supported Effects

The API accepts the [`XFadeEffect`](https://docs.zvid.io/docs/structure/properties/xfade-effects/) source list for `enterAnimation`, `exitAnimation`, and video `transition`.

## Examples

These are **visual element fragments** for a video project's `payload.visuals`.
Enter/exit times use the containing project's or scene's timeline, in seconds.
For complete duration rules, see [Timing](https://docs.zvid.io/docs/concepts/timing/).

### Fade In And Out

```json
{
  "type": "TEXT",
  "text": "Hello World",
  "position": "center-center",
  "enterBegin": 0,
  "enterEnd": 1,
  "exitBegin": 9,
  "exitEnd": 10,
  "enterAnimation": "fade",
  "exitAnimation": "fade"
}
```


```json
{
  "name": "docs-anim-fade",
  "width": 960,
  "height": 540,
  "duration": 5,
  "backgroundColor": "#140b2e",
  "visuals": [
    {
      "type": "TEXT",
      "text": "Hello World",
      "position": "center-center",
      "enterBegin": 0,
      "enterEnd": 1,
      "exitBegin": 4,
      "exitEnd": 5,
      "enterAnimation": "fade",
      "exitAnimation": "fade",
      "style": {
        "fontSize": 64,
        "color": "#ffffff",
        "fontFamily": "Poppins"
      }
    }
  ]
}
```

Recorded fixture: fade in and fade out

[Watch rendered example](https://cdn.zvid.io/library/docs/anim-fade.mp4)


### Quick HTML Element Animation

```json
{
  "type": "TEXT",
  "html": "<div class=\"card\"></div>",
  "x": 500,
  "y": 200,
  "enterBegin": 5,
  "enterEnd": 5.5,
  "exitBegin": 7,
  "exitEnd": 7.3,
  "enterAnimation": "dissolve",
  "exitAnimation": "dissolve",
  "customCode": {
    "css": ".card { width: 200px; height: 150px; background: #ff6b35; border-radius: 12px; }"
  }
}
```

The `enterAnimation`/`exitAnimation` xfade effects above and the
[`customCode`](https://docs.zvid.io/docs/structure/text-elements/#native-css--javascript-customcode) CSS animation
loop can be combined freely.

## Troubleshooting

- Animation not visible: ensure the duration is not zero.
- Validation error: check the effect name against the supported list.
- Choppy output: reduce simultaneous animated elements or use simpler effects.

## Related Pages

- [Text Elements](https://docs.zvid.io/docs/structure/text-elements/)
- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Transitions](https://docs.zvid.io/docs/structure/transitions/)
- [XFadeEffect](https://docs.zvid.io/docs/structure/properties/xfade-effects/)