Click to add points. Drag to pull out curve handles. Click the first point to close.
00:00:00
00:00:00

Export

Compositions

    Keyline

    A motion sequencer that speaks Lottie.

    Keyline is an animation editor that works directly on Lottie, the JSON format apps and websites use for vector motion. What you draw, keyframe and ease here is the file, with no conversion step, so it plays the same in lottie-web, on iOS and Android, and anywhere else Lottie runs.

    • One HTML file. It runs offline, straight from disk, and every composition autosaves in this browser.
    • Real motion tools. Shapes, pen paths, text, images, masks, track mattes, effects, precomps, parenting and time remap.
    • Easing you can see. A keyframe's shape and color say how it eases, and the curves editor reshapes it.
    • Ships anywhere. Export Lottie JSON, a self-contained Native JS player, or a template whose parameters anyone can edit.

    Every easing, racing

    The animation at the top is a Lottie file put together in a few lines of code, the same way Keyline builds yours, and played by the same lottie-web that draws your stage. Its own keyframes sit on its own timeline. Drag it to scrub. Above, each mark runs on Keyline's easing table, with an onion-skin trail. Hover a lane to see its curve.

    Import

      Save project

      Saving downloads the project file, with every composition in it. Later saves reuse this name; use File › Save as to pick another.

      Help

      Tips: stage

      • The selected layer's handles move (arrows), rotate (the knob), scale (corners) and size (edges). Shift snaps rotation and keeps proportions, Alt sizes from the middle. The pills over the stage hide each kind.
      • On a selected path, drag points or handles (Shift-click points to pick several, or Shift-drag a box around them; picked points move together). Alt-drag breaks a handle, Alt-click a point toggles corner and curve, double-click a segment adds a point.

      Tips: timeline

      • Click a layer's clip to select it; double-click it to show or hide its keyframed properties. Double-click a property's track to add a keyframe.
      • Drag across empty timeline space, or empty space in Curves, to box-select keyframes (Shift adds). A keyframe's shape and color show its easing.
      • Click the curve in the Keyframe section to edit it: drag its handles, then name and save it to use again (it joins the easing list).
      • Press and hold a keyframe, then slide to set its value (up and down for Y, Alt for fine steps). Holding a property's row that has no keyframes does the same for its value.
      • Drag a layer's name onto another layer to nest it (onto its parent again to un-nest), or to a row's edge to reorder. A pair's ▸ shows a lane per dimension.
      • On the stage, the mouse wheel zooms around the pointer; hold Space and drag, or drag with the middle button, to pan. Click the size readout under the stage to fit it again. A quick tap of Space still plays and pauses.
      • Drag the timecode to scrub, double-click it to type a time or frame.
      • The mouse wheel over the tracks zooms in and out around the pointer; over the layer names (or with Shift) it scrolls. Hold the middle button and drag to scroll.

      Tips: everywhere

      • Drag a property label or any number field sideways to change its value.
      • Double-click a tab's name to rename it.
      • Right-click layers, properties or keyframes in the timeline for options, including template parameters. Right-click the stage to add a layer right there. Shift-right-click opens the browser's own menu.
      • With a path picked in a shape layer, drag its line (or inside it) to move the whole path. Double-click a layer on the stage to work on its masks (a layer without masks starts drawing one): click a border to pick a mask, drag it to move the whole mask, drag its points to reshape it, New mask for another. Double-click outside it, Esc or Done to finish.
      • The lock beside a layer's name (or Lock in its right-click menu) stops it being selected or changed; clicks on the stage pass through to what's underneath.
      • Select several layers: Shift-click or Ctrl-click them on the stage, drag a box across empty stage space, Ctrl-click names or clips in the timeline, or Shift-click a name for a run. Dragging any of them moves them all; Align, Delete and Duplicate work on all of them.
      • Click empty space or press Esc to deselect.

      Easing curve

      Curves

      Precompose

      Name

      The new composition is the same size and frame rate, and it's a standard Lottie precomp: a layer of type 0 showing an asset, so any player shows it.

      Preferences

      Tools panel

      Opening a tool folds the others away.

      Key map

      Open

      Drop a file here