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;
}

Required Fields​

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

Common Property Reference​

PropertyQuick notesFull reference
positionPreset placement such as center-center.PositionPreset
anchorTransform origin for placement and rotation.Anchor
resizecontain or cover.ResizeMode
zoomCenter-based zoom during visible duration.zoom
filterBrightness, contrast, blur, tint, and related effects.FilterOptions
cropParamsPixel crop rectangle.CropParams
chromaKeyRemove pixels matching a color.ChromaKey
animationsEnter and exit xfade effects.XFadeEffect

Properties​

GIF supports the same common visual timing and transform properties as images:

  • x, y, width, height
  • position, anchor, resize
  • enterBegin, enterEnd, exitBegin, exitEnd
  • track, opacity, angle, flipV, flipH
  • enterAnimation, exitAnimation
  • zoom

It also accepts filter, cropParams, and chromaKey.

Examples​

Simple GIF​

{
  "type": "GIF",
  "src": "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif",
  "position": "center-center",
  "track": 10
}

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