Skip to main content

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 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 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.

Fade In And Out​

{
  "type": "TEXT",
  "text": "Hello World",
  "position": "center-center",
  "enterBegin": 0,
  "enterEnd": 1,
  "exitBegin": 9,
  "exitEnd": 10,
  "enterAnimation": "fade",
  "exitAnimation": "fade"
}
{
  "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"
      }
    }
  ]
}
Rendered by Zvid
Recorded fixture: fade in and fade out
Watch video

Quick HTML Element Animation​

{
  "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 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.