Skip to main content

GIF Elements

GIF elements add animated GIF assets to a project. The hosted API accepts GIFs as media-like visual elements, including timing, transform, resize, zoom, crop, filters, and chroma key options.

Interface​

interface GIFItem {
  type: "GIF";
  src: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  anchor?: Anchor;
  position?: PositionPreset;
  resize?: "contain" | "cover";
  enterBegin?: number;
  enterEnd?: number;
  exitBegin?: number;
  exitEnd?: number;
  track?: number;
  opacity?: number;
  angle?: number;
  flipV?: boolean;
  flipH?: boolean;
  enterAnimation?: XFadeEffect | null;
  exitAnimation?: XFadeEffect | null;
  filter?: FilterOptions;
  cropParams?: CropParams;
  chromaKey?: ChromaKey;
  zoom?: boolean | { depth?: number };
  radius?: BorderRadius;
}

Required Fields​

PropertyTypeNotes
type"GIF"Case-insensitive in API validation.
srcstringRemote http or https URL.

Properties​

GIF elements behave like images: they share the common element properties and support every media option in the support matrix — resize, zoom, filter, cropParams, chromaKey, and radius. The GIF's own animation loops for the element's visible duration.

Examples​

Simple GIF​

{
  "type": "GIF",
  "src": "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif",
  "position": "center-center",
  "track": 10
}
A GIF overlaid on a video background

Resized GIF​

{
  "type": "GIF",
  "src": "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif",
  "width": 300,
  "height": 300,
  "resize": "contain",
  "position": "bottom-right",
  "opacity": 0.8
}

Cropped GIF​

{
  "type": "GIF",
  "src": "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif",
  "width": 300,
  "height": 200,
  "cropParams": {
    "x": 50,
    "y": 25,
    "width": 400,
    "height": 300
  }
}