Animate vector artwork in Motion Desk

Open Motion Desk from Flipline's tool rail or visit /app#motion. It has separate projects, history and five recent files on this device. Drawing-board projects remain available when you close it.

Start with a small movement

Try A little signal, A turning leaf, Three small steps or Quiet loading dots. Add a rectangle or ellipse, or import solid SVG artwork with Animate an SVG. SVG text, gradients, clipping, masks, effects and references must be simplified first.

Select a layer, move the playhead, then drag the artwork or edit position, scale, rotation and opacity. Each transform change creates a key at the playhead. The timeline's numbered diamonds jump to keys. Add key records the current pose; Delete key keeps at least one key on the layer.

Shape the transition

Easing belongs to the outgoing key. Choose linear, ease in, ease out, ease in and out, hold or a custom cubic curve. Custom X handles stay between zero and one; Y handles allow overshoot. Opacity remains within zero to one hundred percent.

Move a key to an unused frame with its exact frame field. Motion settings changes the frame rate or retimes the timeline. Retime scales key positions and visibility ranges; keys that land on the same frame merge.

Use Offset layer timing to move all keys on the selected unlocked layer earlier or later by the same number of whole frames. Optionally shift its visibility range by the same amount. The operation keeps key spacing and easing, and is one undoable edit; it rejects the entire move if keys or the selected visibility range would leave the timeline. Poses before the first key and after the last remain held.

Use Bake keyframes to replace an unlocked layer’s key track with an editable key at every whole timeline frame. The baked layer matches the original poses at those frames, including holds, and the edit can be undone. The new keys use linear easing, so motion between frames can differ and the project may grow. If an overshooting curve produces values outside supported key limits, the operation is rejected without changing the project.

Use Copy pose to capture the selected layer’s transform at the playhead, including its outgoing easing. Move the playhead or choose another layer and use Paste pose to create a key there; an existing key at that frame is replaced. Pasting is undoable, respects locked layers, and the copied pose stays in this open Motion Desk session only. The new key changes interpolation around its destination.

Turn on Motion path above the stage to see the selected layer's origin sampled at every whole frame. Blue dots show each frame; gold markers identify keys and the red ring follows the playhead. Dots closer together indicate slower movement, while a held key creates a break at the jump. Use Motion path key positions to read each key's coordinates without relying on the drawing.

The overlay includes frames outside the layer's visibility range and is clipped to the stage. It shows the layer origin, not the path of every point as a shape rotates or scales. It is a session-only aid and is not included in any export.

Edit the vector layers

The layer list shows front layers first. Hide, lock, duplicate, delete or reorder a layer. Locked layers must be unlocked before geometry changes. Copy and paste uses an internal layer clipboard.

Select a visible, unlocked path and choose Edit nodes to drag its points on the stage. Select a point to reveal its incoming and outgoing curve handles, then drag a handle to adjust the curve. The contour and numeric point controls remain available for precise keyboard editing. The one-time handle actions align opposite handles while preserving their lengths, mirror one handle to make them equal, or clear both handles. Later drags move each handle independently. Use a nonzero scale to edit nodes on the stage.

Shape appearance, size and path-point changes apply to every frame. Imported paths expose contour and point selectors, coordinates and relative incoming and outgoing curve handles. Split next segment adds an exact midpoint without changing the cubic curve. Remove point changes the path.

Drag on the stage to move a shape, or use arrow keys to nudge it. Shift moves ten pixels. Optional snap uses a ten-pixel grid. Space plays or pauses; Ctrl or Cmd+Z undoes a change.

Import and inspect Lottie

Open a native motion project, supported Lottie JSON or solid SVG. The Lottie subset covers solid 2D shapes and animated transforms with static paths, styles and anchors. Imported transforms are sampled at composition frames; interpolation between those frames can differ.

Unsupported Lottie opens an inspection report and offers a compact JSON download. Expressions never run and assets are never fetched. Keep the source file for work in a full Lottie editor.

When another usefulweb app sends an SVG to Flipline (App Bridge), choose Open editable vectors in Motion Desk to import its solid shapes and paths as layers, or Import as a drawing image to flatten it onto the drawing board.

Save and export

Download an editable motion project for backups. Export Lottie JSON, frame-sampled animated SVG, current-frame SVG or PNG, an animated GIF or a full-resolution PNG sequence ZIP. The preview background is excluded. Add a background layer to export a solid stage color.

GIF exports use up to forty-eight sampled frames at a maximum side of 320 pixels, ten-millisecond timing and binary transparency. PNG sequences support up to 120 frames and twenty-four million total frame pixels. Stop export cancels work.

The editor allows twenty-four layers, 360 frames, sixty FPS, sixty seconds, 4096 path points and two megabytes per project. The stage allows sixteen to 1600 pixels per side and two million total pixels.