Overview

Prop	Type	Required	Example	Value Range	Description
id	string	true	-	-	The unique identifier of the keyframe.
time	number	true	-	-	The time at which the keyframe occurs, in seconds (relative to element start time).
stateObj	object	true	-	-	The state object containing property values at this keyframe. Can include any animatable property like x, y, rotation, scaleX, scaleY, alpha, etc.
cp1	object	false	-	-	The first control point for Bezier curve easing. Coordinates are normalized (0-1 range). Example: {x: 0.25, y: 0.1}
cp2	object	false	-	-	The second control point for Bezier curve easing. Coordinates are normalized (0-1 range). Example: {x: 0.25, y: 1}

Bezier Easing Control Points

The cp1 and cp2 properties define a cubic Bezier curve for custom easing between keyframes:

Default (linear): If omitted, linear interpolation is used
Coordinate range: Both x and y values should be between 0 and 1
Curve definition: Forms a cubic Bezier from (0,0) through cp1 and cp2 to (1,1)
Common presets:
- Ease-in-out: cp1: {x: 0.42, y: 0}, cp2: {x: 0.58, y: 1}
- Ease-in: cp1: {x: 0.42, y: 0}, cp2: {x: 1, y: 1}
- Ease-out: cp1: {x: 0, y: 0}, cp2: {x: 0.58, y: 1}

imageElement.json

{
  "id": "39ecb75a-3490-43bd-84c2-72366c2f39f2",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 0,
  "y": 0,
  "blendMode": "normal",
  "anchorX": 1302,
  "anchorY": 2312,
  "rotation": 0,
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [
      {
          "id": "800350bd-4a24-4440-904c-ec08a8159508",
          "time": 0,
          "stateObj": {
              "alpha": 0
          },
          "cp1": {
              "x": 0.25,
              "y": 0.1
          },
          "cp2": {
              "x": 0.25,
              "y": 1
          }
      },
      {
          "id": "ce3f9b10-2b9e-4266-8cdb-77167f9f16aa",
          "time": 3,
          "stateObj": {
              "alpha": 1
          },
          "cp1": {
              "x": 0.25,
              "y": 0
          },
          "cp2": {
              "x": 0.25,
              "y": 0.9
          }
      }
  ],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

Animation Priority

When an element has multiple animation methods applied:

Keyframes (defined in keyframes array) - standard property animations
Node Animations (in animations array) - advanced animations like expressions, paths, sequences
Procedural Animations - programmatic animations

If the same property is animated by multiple methods, the priority order is:

Highest: Node animations (expression, procedural, path, sequence)
Medium: Keyframe animations
Lowest: Static property values

This allows advanced animations to override keyframe values when needed.

Important Notes

Time Reference: Keyframe time values are relative to the element's start time, not absolute timeline time.
Multiple Properties: A single keyframe can animate multiple properties simultaneously by including them in stateObj.
Interpolation: Properties between keyframes are automatically interpolated. The interpolation curve is defined by cp1 and cp2 Bezier control points.
First Keyframe: If the first keyframe isn't at time 0, the element will interpolate from its initial state to the first keyframe.
Color Interpolation: Color properties (like fill, stroke) are interpolated in RGB space.