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​

Fade In And Out​

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

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.