# Interface
This page provides a complete walkthrough of the Lottie Creator interface. It explains each part of the interface so you can navigate the editor efficiently, understand core UI elements, and begin creating animations with confidence.

Lottie Creator's interface is organized into six core areas:

<Image src="https://assets.docs.lottiefiles.com/static/3cd6f45b4f-640.webp" alt="Creator interface overview" caption="Creator interface overview" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/3cd6f45b4f-640.webp 640w, https://assets.docs.lottiefiles.com/static/3cd6f45b4f-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/3cd6f45b4f-1920.webp 1920w" width="3840" height="2160" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAoUlEQVR4nB3KvwsBUQDA8acrC4NBlEEkES7e8EqWd47c4d5xBt1FUn4symQ3+hdN/Ce+4jN/hA5jpOMj3TmN5R7pTOlpHyeMMfHhI2w9QaQsonXC8/VmkWwRVho5Cgh2F0RnZP7hdLnyc7w/ELki3bHBO94Qrb4mWyhRqNap2JJ8s0umXMMeDIk2Z4Ser1HuDDUOaHsr1HCKcny0iTHJ6fMFj5pIvgEnzuMAAAAASUVORK5CYII=" />

Each area is covered in detail below.

[Header Toolbar](#1-header-toolbar) · [Left Panel](#2-left-sidebar) · [Canvas](#3-canvas-main-editing-area) · [Right Panel](#4-right-panel-properties) · [Timeline](#5-timeline-bottom-panel) · [Player Controls](#6-player-controls)

## 1. Header Toolbar

The Header Toolbar contains the main drawing and editing tools, file controls, view options, mode switching and user account management.

## Tools (Left Section)

These appear on the far left of the top toolbar:

<List type="bullet">
  <ListItem>**Move Tool (V)**</ListItem>
  <ListItem>**Move Anchor Tool (Y)**</ListItem>
  <ListItem>**Shape Tool:** Rectangle (Option/Alt + R), Ellipse (Option/Alt + O), Polygon, Star</ListItem>
  <ListItem>**Pen Tool (G)**</ListItem>
  <ListItem>**Text Tool**</ListItem>
  <ListItem>**Hand Tool (H)**</ListItem>
  <ListItem>**Zoom Out (Cmd/Ctrl + Minus) / Zoom In (Cmd/Ctrl + Plus)**</ListItem>

  <ListItem>
    **Zoom Level Dropdown:** Zoom to fit (Cmd/Ctrl + 0), 50 percent, 100 percent, 150 percent (Shift + 1), 200 percent
  </ListItem>
</List>

These tools control selection, drawing, editing and navigation on the canvas.

## File and Project Controls (Center Top)

The file controls are displayed in the header as a breadcrumb:

`Drafts / Filename ▼`

Example: `Drafts / Untitled file ▼`

This area controls how you interact with the current file and its workspace context.

### Clicking “Drafts”

Opens the **Drafts folder in LottieFiles.**

This takes you to the LottieFiles web dashboard view of your drafts, where you can:

<List type="bullet">
  <ListItem>Open other draft animations</ListItem>
  <ListItem>Create new files</ListItem>
  <ListItem>Delete or rename drafts</ListItem>
  <ListItem>Move or organize files</ListItem>
  <ListItem>Browse your personal workspace content</ListItem>
</List>

This navigation temporarily leaves Creator and returns you to LottieFiles.

### Clicking the Filename Dropdown

Opens file specific options:

<List type="bullet">
  <ListItem>**Save**</ListItem>
  <ListItem>**Rename**</ListItem>
  <ListItem>**Make a Copy**</ListItem>
  <ListItem>**Move To**</ListItem>
</List>

These actions apply only to the current animation file.

## Workspace Mode Switch

Two modes are available:

<List type="bullet">
  <ListItem>**Animate:** The main animation timeline and drawing workflow</ListItem>
  <ListItem>**State Machines:** The interactivity and logic graph mode</ListItem>
</List>

Modes can be toggled from the header.

## Share and Export Buttons

Located beside the mode switch:

<List type="bullet">
  <ListItem>
    **Share:** Opens the Share Panel, where you can generate Remix links or publish the animation to the LottieFiles
    community.
  </ListItem>

  <ListItem>
    **Export:** Export as Lottie JSON, dotLottie, MP4, GIF, WebM and more to LottieFiles workspace or publish to
    community.
  </ListItem>
</List>

## Profile and Workspace Menu (Right Edge)

Clicking your profile photo reveals:

<List type="bullet">
  <ListItem>User identity (name and email)</ListItem>
  <ListItem>Workspace list</ListItem>
  <ListItem>Current workspace indicator</ListItem>
  <ListItem>Workspace roles</ListItem>
  <ListItem>**Log Out** button</ListItem>
</List>

## 2. Left Sidebar

The Left Sidebar provides navigation, project structure, onboarding shortcuts and plugin access.

It includes four main sections:

## Outliner

The **Outliner** shows the hierarchical structure of the current scene:

<List type="bullet">
  <ListItem>Scenes</ListItem>
  <ListItem>Layers</ListItem>
  <ListItem>Groups</ListItem>
  <ListItem>Nested layers</ListItem>
  <ListItem>Visibility and lock icons</ListItem>
  <ListItem>Drag to reorder handles</ListItem>
</List>

This is your main navigation panel for managing layers.

## Get Started Panel

Contains onboarding and file resources:

<List type="bullet">
  <ListItem>**Recent Files**</ListItem>
  <ListItem>**Assets**</ListItem>
  <ListItem>**Upload Lottie or SVG**</ListItem>
  <ListItem>**What’s New** (release notes)</ListItem>
  <ListItem>**Plugins**</ListItem>
  <ListItem>**Tutorials**</ListItem>
  <ListItem>**Help Center**</ListItem>
  <ListItem>**“Show this on launch” toggle**</ListItem>
</List>

This panel helps new users jump into projects quickly.

## Upload Assets

The **Upload Assets** section in the left sidebar provides two options for bringing content into Lottie Creator.

### 1. Upload Assets

Import files directly from your device. Supported formats include:

<List type="bullet">
  <ListItem>**Lottie JSON**</ListItem>
  <ListItem>**dotLottie (.lottie)**</ListItem>
  <ListItem>**SVG files**</ListItem>
  <ListItem>**PNG and JPG images**</ListItem>
</List>

You can also **drag and drop** files onto the canvas to upload them instantly.

### 2. Open Animation from URL

Paste a **Lottie JSON or dotLottie URL** to load an animation directly from the web.

This is useful for:

<List type="bullet">
  <ListItem>Quickly pulling animations from a CDN</ListItem>
  <ListItem>Importing files hosted on LottieFiles</ListItem>
  <ListItem>Testing remote animation assets without downloading</ListItem>
</List>

## Plugins

Lists all installed or available plugins:

<List type="bullet">
  <ListItem>**Community Animations**</ListItem>
  <ListItem>**Motion Presets**</ListItem>
  <ListItem>**Motion Copilot** (AI assisted motion)</ListItem>
  <ListItem>**Spring Curve**</ListItem>
  <ListItem>**SVGL Logos**</ListItem>
  <ListItem>**Physics Simulator**</ListItem>
</List>

## 3. Canvas (Main Editing Area)

The **Canvas** is the central workspace where you design, position and preview your animation. It displays a scene within the Art Board, shows visual guides and updates interactively as you adjust properties.

## Canvas Overview

<List type="bullet">
  <ListItem>Displays a scene on the Art Board (default 512 × 512, customizable)</ListItem>
  <ListItem>Shows a dotted background grid</ListItem>
  <ListItem>Supports rulers and alignment guides</ListItem>
  <ListItem>Offers snapping to grid, guides, artboard edges and other layers</ListItem>
  <ListItem>Provides transform handles when objects are selected</ListItem>
</List>

## Canvas Behavior Based on Selection

### When a **scene** is selected

The Right Panel shows **Scene Properties**, letting you adjust:

<List type="bullet">
  <ListItem>Canvas size (preset or custom)</ListItem>
  <ListItem>Transparent background</ListItem>
  <ListItem>Origin point</ListItem>
  <ListItem>Duration and FPS</ListItem>
  <ListItem>Grid and guide settings</ListItem>
</List>

### When an **object or layer** is selected

The Right Panel switches to **Layer Properties**, allowing you to modify:

<List type="bullet">
  <ListItem>Transform</ListItem>
  <ListItem>Appearance</ListItem>
  <ListItem>Effects</ListItem>
  <ListItem>Layer settings</ListItem>
  <ListItem>Matte options</ListItem>
</List>

## Canvas Controls (Top Toolbar)

Controls affecting how you view or navigate the canvas are located in the header:

<List type="bullet">
  <ListItem>**Zoom Out / Zoom In**</ListItem>
  <ListItem>**Zoom Level Dropdown** (Fit, 100 percent and others)</ListItem>
  <ListItem>**Hand Tool** for manual panning</ListItem>
</List>

## Canvas Navigation

<List type="bullet">
  <ListItem>**Pan:** Space + drag, or Hand Tool</ListItem>
  <ListItem>**Zoom:** Scroll wheel</ListItem>
  <ListItem>**Fit to View:** Cmd/Ctrl + 0</ListItem>
  <ListItem>**Actual Size:** Shift + 1</ListItem>
</List>

## 4. Right Panel (Properties)

The **Right Properties Panel** is fully context aware.

Its contents change depending on what is currently selected, either a **scene** or an individual **layer** (shape, imported asset, image and others).

## Scene Properties (When a scene is selected)

These controls update the overall document and canvas environment:

<List type="bullet">
  <ListItem>**Canvas Size** (preset options or custom width and height)</ListItem>
  <ListItem>**Transparent Background** toggle</ListItem>
  <ListItem>**Origin Point** selector grid</ListItem>
  <ListItem>**Time Settings** (duration and FPS)</ListItem>
  <ListItem>**Guides** (color and visibility)</ListItem>
  <ListItem>**Grid** (add, remove or adjust grid settings)</ListItem>
</List>

These settings affect the entire animation, not individual layers.

## Layer Properties (When a Layer Is Selected)

When you select a layer in the Outliner, Canvas or Timeline, the panel switches to **Layer Properties**. These settings apply only to the selected object or asset.

### Alignment Tools

Available for any selectable layer:

<List type="bullet">
  <ListItem>Align left</ListItem>
  <ListItem>Align horizontal centers</ListItem>
  <ListItem>Align right</ListItem>
  <ListItem>Align top</ListItem>
  <ListItem>Align vertical centers</ListItem>
  <ListItem>Align bottom</ListItem>
  <ListItem>Distribute horizontal spacing</ListItem>
  <ListItem>Distribute vertical spacing</ListItem>
</List>

These controls align the layer relative to the canvas or to multiple selected layers.

### Asset Name

The top of the panel displays:

<List type="bullet">
  <ListItem>The **layer name**</ListItem>
  <ListItem>A small icon representing its type (shape, image, asset and similar)</ListItem>
</List>

You can rename the selected layer directly from here.

### Transform

Layer level transformation properties:

<List type="bullet">
  <ListItem>**Position** (X, Y)</ListItem>
  <ListItem>**Scale** (X, Y)</ListItem>
  <ListItem>**Skew**</ListItem>
  <ListItem>**Skew Axis**</ListItem>
  <ListItem>**Rotation**</ListItem>
  <ListItem>**Anchor Point** controls</ListItem>
  <ListItem>**Opacity**</ListItem>
</List>

### Appearance

Visual styling for the selected layer:

<List type="bullet">
  <ListItem>**Fill** (solid, linear gradient, radial gradient)</ListItem>
  <ListItem>**Stroke** (width, color, dash patterns, caps and joins)</ListItem>
  <ListItem>**Gradient Editing Controls** (on canvas handles plus panel options)</ListItem>
  <ListItem>**Color Picker**</ListItem>
  <ListItem>**Document Color Palette**</ListItem>
</List>

### Effects

Layer level visual behavior:

<List type="bullet">
  <ListItem>**Blend Modes**</ListItem>
  <ListItem>**Masks**</ListItem>
  <ListItem>**Mattes** (alpha, luma and inverted options)</ListItem>
  <ListItem>**Bounding Box Behavior** (fit to object)</ListItem>
</List>

These settings control compositing and how layers interact visually.

### Layer Controls

Additional controls such as:

<List type="bullet">
  <ListItem>Layer opacity</ListItem>
  <ListItem>Visibility toggle</ListItem>
  <ListItem>Lock toggle</ListItem>
  <ListItem>Layer type options (depending on the object)</ListItem>
  <ListItem>Blend mode (also appears here for convenience)</ListItem>
</List>

### Trim Path

Displayed for shape layers that support path operations.

Trim Path allows you to animate:

<List type="bullet">
  <ListItem>Start</ListItem>
  <ListItem>End</ListItem>
  <ListItem>Offset</ListItem>
</List>

This creates drawing or reveal style animations.

## 5. Timeline (Bottom Panel)

The **Timeline** is where you control timing, keyframes and animation playback. It appears at the bottom of the interface and updates dynamically based on the selected scene, layer or property.

## Timeline Layout

The timeline is divided into two primary areas.

### 1. Left (Layers Panel)

Shows the hierarchical structure of layers and scenes in the current composition.

### 2. Right (Keyframe Track)

Displays the animation timeline with keyframes, time markers and the playhead.

## Timeline Tabs

Above the layer list, the timeline provides tabs for switching between:

<List type="bullet">
  <ListItem>**Main Scene**</ListItem>
  <ListItem>**Nested Scenes** (sub compositions)</ListItem>
  <ListItem>**Imported Assets** (for example dotLottie scenes and Lottie layers)</ListItem>
</List>

Each item opens its own independent timeline.

## Layer List (Left Side)

The left side shows a structured list of layers inside the active scene.

### Layer List Features

<List type="bullet">
  <ListItem>**Expand or Collapse** Show or hide child properties or groups.</ListItem>
  <ListItem>**Add Nested Scene** A plus icon allows creating new nested scenes or adding layers.</ListItem>
  <ListItem>**Open Segments Manager**</ListItem>
  <ListItem>**Open Theme Manager**</ListItem>

  <ListItem>
    **Hover Controls** Hovering a layer reveals additional layer operations:

    <List type="bullet">
      <ListItem>No Matte and matte options</ListItem>
      <ListItem>Set Parent</ListItem>
      <ListItem>Focus Layer (isolates layer in the canvas)</ListItem>
      <ListItem>Lock</ListItem>
      <ListItem>Hide (turn off visibility on the Canvas)</ListItem>
      <ListItem>Shy Layer (turn off visibility in Timeline)</ListItem>
      <ListItem>Animation Toggle (opens the Animate Properties panel)</ListItem>
    </List>
  </ListItem>

  <ListItem>
    **Layer Icons** Each layer displays an icon indicating its type (Shape, Path, Image, Asset and others).
  </ListItem>
</List>

## Animate Properties Panel

When clicking the **Animation Toggle** on a layer, the **Animate Properties** menu opens.

This allows you to enable keyframing for:

<List type="bullet">
  <ListItem>**Position (P)**</ListItem>
  <ListItem>**Scale (S)**</ListItem>
  <ListItem>**Opacity (T)**</ListItem>
  <ListItem>**Skew**</ListItem>
  <ListItem>**Skew Direction**</ListItem>
  <ListItem>**Rotation (R)**</ListItem>
</List>

These map directly to timeline properties and automatically expand animation rows in the timeline.

## Keyframe Track (Right Side)

This area displays the animation timeline:

<List type="bullet">
  <ListItem>**Playhead:** vertical orange line showing the current frame</ListItem>
  <ListItem>**Segment Markers:** veryical grey lines that show the beginning and ending of a segment</ListItem>
  <ListItem>**Time markers:** seconds plus frame count</ListItem>
  <ListItem>**Work Area:** adjustable region for preview range</ListItem>
  <ListItem>**Keyframe Rows:** one row per animated property</ListItem>
  <ListItem>**Keyframes:** diamond shaped markers</ListItem>
</List>

Dragging layers or keyframes updates timing visually.

## Keyframe Editing Actions

You can edit animation directly in the timeline:

<List type="bullet">
  <ListItem>Move keyframes by dragging left or right</ListItem>
  <ListItem>Copy and paste keyframes</ListItem>
  <ListItem>Select multiple keyframes (Shift plus click or marquee selection)</ListItem>
  <ListItem>Delete keyframes</ListItem>
  <ListItem>Adjust easing (via context menu or Properties panel)</ListItem>
  <ListItem>Optimize groups of keyframes</ListItem>
</List>

## Timeline Zoom and Navigation

<List type="bullet">
  <ListItem>**Zoom Slider** (top of the timeline, drag and drop orange handles to zoom)</ListItem>
  <ListItem>**Horizontal Scroll** (drag and drop the zoom slider)</ListItem>
  <ListItem>**Snap to Frames** (timeline snapping is enabled by default)</ListItem>
  <ListItem>**Zoom to Fit** with Shift+1 (canvas and timeline scale together visually)</ListItem>
</List>

## 6. Player Controls

The **Player Controls** are located near the bottom of the canvas and provide playback and navigation features for previewing your animation.

## Playback and Navigation Controls

From left to right:

<List type="bullet">
  <ListItem>
    **Current Time Display (seconds plus frames):** Shows the exact playhead position, formatted as `Xs Yf` (example `3s
        12f`).
  </ListItem>

  <ListItem>**Go to Start:** Moves the playhead to the first frame of the timeline.</ListItem>
  <ListItem>**Go Back 1 Frame:** Steps backward by one frame.</ListItem>
  <ListItem>**Play or Pause:** Starts or pauses playback.</ListItem>
  <ListItem>**Go Forward 1 Frame:** Steps forward by one frame.</ListItem>
  <ListItem>**Go to End:** Jumps to the last frame of the timeline.</ListItem>
  <ListItem>**Loop Toggle:** Turns looping on or off during preview.</ListItem>
</List>

## Preview Settings

### Theme Manager Dropdown

<List type="bullet">
  <ListItem>Displays **Default** by default.</ListItem>

  <ListItem>
    Dropdown contains:

    <List type="bullet">
      <ListItem>**Default**</ListItem>
      <ListItem>**Saved Themes**</ListItem>
      <ListItem>**Theme Manager** (opens the Theme Manager panel)</ListItem>
    </List>
  </ListItem>
</List>

## Additional Preview Tools (Right Side Icons)

### Preview in Player (monitor icon)

Opens a real time preview in the Lottie Web Player environment.

This lets you test:

<List type="bullet">
  <ListItem>Runtime playback</ListItem>
  <ListItem>Looping</ListItem>
  <ListItem>Device scaling</ListItem>
  <ListItem>Interactive features (if applicable)</ListItem>
</List>