Product

Learn

About

Community

Editor

Design Motion

From Design to Animation, All in One App.

Why Designers Love Us

Easy to Learn

For all levels of design expertise.

Hand-off is Simple

Developers can use your animations out of the box.

Web-Based

Design and Animate in your browser.

Import

Import and Customize Design.

editor:import.lottie_animations

editor:import.lottie_animations_subtitle

editor:import.image

editor:import.image_subtitle

editor:import.svg

editor:import.svg_subtitle

Design

Explore Our Creative Tools.

The Pen tool is useful for creating complex shapes. Create straight lines by clicking to place points, or curved lines by clicking and dragging to control the curve's shape.

Craft intricate shapes with ease.

Pen Tool

Create text boxes by clicking and dragging on the canvas. Adjust font properties and formatting to style our text, or use text as a shape by converting it to a path.

Design and animate UI with text.

Text

Unlike Groups, Containers help organize elements in complex relationships. Adjust properties, add fill, border, and effects to control Container behavior and appearance.

Organize elements with parent-child relationships.

Containers

Use Union to merge shapes, Subtract to take one shape from another, Intersect to keep only overlapping parts, and Difference to remove shared regions.

Creating new elements by merging.

Boolean

The Origin is a reference point for positioning elements, aligning shapes, and acts as the pivot point when transforming an element.

Set reference points for precise animation.

Origin

Masks are ideal for creating complex shapes and animations. The Mask tool controls visibility by using one shape to reveal parts of another, and masks can also be animated.

Hide elements non-destructively.

Mask

Animate

Why Would We Settle for Static Designs, When We Can Add Motion?

Adjust element properties on the canvas or property panel to create an animation keyframe at that moment in time.

Set property values to control element changes over time.

Intuitive Keyframes

Trim Path controls the visible portion of a stroke or line. Adjust start and end points to create drawing or erasing animations. Use it to animate paths, and hide or reveal shapes.

Animate paths by controlling their visibility.

Trim Path

Keyframe easing adjusts the rate of change between keyframes. Apply easing to smooth out animations, creating more natural motion.

Craft fluid, lively, and dynamic transitions.

Easing

Animation presets are pre-made, reusable animations. Apply these ready-to-use effects to elements for quick, professional results.

Apply ready-made animations with a click.

Animation Presets

Export

Shipping Our Work is Fast and Easy.

editor:export.lottie

editor:export.lottie_subtitle

editor:export.gif

editor:export.gif_subtitle