Motion, keyframes and transitions

Keyframes animate one layer while it exists. Transitions connect an outgoing clip to an incoming clip. Entrance and exit presets in Studio write ordinary keyframe tracks, so their result stays editable through API and MCP.

Property tracks

data-jc-animation contains JSON encoded for an HTML attribute:

{
  "transformOrigin": "center center",
  "tracks": [
    {
      "id": "card-position",
      "property": "position",
      "keyframes": [
        { "id": "p0", "time": 0, "value": { "x": -80, "y": 0 }, "easing": "ease-out" },
        { "id": "p1", "time": 0.7, "value": { "x": 0, "y": 0 }, "easing": "ease-in-out" }
      ]
    },
    {
      "id": "card-opacity",
      "property": "opacity",
      "keyframes": [
        { "id": "o0", "time": 0, "value": 0, "easing": "linear" },
        { "id": "o1", "time": 0.45, "value": 1, "easing": "ease-out" }
      ]
    }
  ]
}

Times are fractional seconds relative to the owning layer. Supported properties include position, scale, 2D/3D rotation, opacity, size, blur, color, background, clip path and audio volume.

Scene transition

<section id="scene-result" data-jc-clip data-jc-kind="scene"
  data-jc-start="4.1" data-jc-duration="4.5" data-jc-track="0"
  data-jc-transition="mask-bars-vertical"
  data-jc-transition-duration="0.62"
  data-jc-transition-easing="ease-in-out"
  data-jc-transition-from="scene-request"
  data-jc-transition-to="scene-result">
</section>

Use keyframes to move an object from A to B. Use a transition when the edit itself changes from one scene or clip to another.

Animatable properties

Position values use {x,y} with optional z. Color, background and clip path use strings. Other tracks use finite numbers. A layer may have only one track per property, and every keyframe time must fall between zero and that layer's duration.

Easing

Built-in values are linear, ease-in, ease-out, ease-in-out and back-out. A CSS-compatible cubic-bezier(x1,y1,x2,y2) is also accepted when both X control points stay between zero and one.

The easing on a keyframe controls interpolation from the previous keyframe into that keyframe.

Presets remain editable

Studio entrance and exit presets generate ordinary property tracks. Families include fades, slides, wipes, geometric reveals, slices, dynamics, depth and focus effects. After applying a preset, inspect and adjust its tracks like any other motion.

Text layers additionally support independent entrance and exit effects with all, word, character or line staggering. Replacement and shimmer effects have bounded text-specific controls; they do not introduce executable code.

Transition constraints

The transition is stored on the destination clip. Its duration must be positive and fit inside that destination. When fromClipId is supplied, the source must exist and be adjacent to or overlap the destination at the edit point. Keep toClipId equal to the owning destination ID.

Transition families

The public catalog includes dissolves and color dips; directional pushes, slides and wipes; diagonal, circle and iris reveals; blur, zoom and exposure changes; light leak, film burn and flash effects; glitch, RGB split and pixelation; bar, blind and checker masks; 3D flips, cubes and page turns; plus luma, ripple, warp, split and shutter transitions. Use the live Studio catalog for visual selection and the source schema for the stable transition ID.