# Key Features
Lottie Creator brings together professional animation tools, interactive logic, AI assisted workflows and seamless platform integration. This section provides a structured overview of all major capabilities.

## 1. Canvas and Visual Editing

### Professional Drawing Tools

<List type="bullet">
  <ListItem>**Shape Tools**: Rectangle, ellipse, polygon and star with customizable properties</ListItem>
  <ListItem>**Pen Tool**: Create custom paths with bezier curve precision</ListItem>
  <ListItem>**Path Editing**: Edit anchor points and curve handles directly</ListItem>
  <ListItem>**Selection and Transform**: Move, scale and rotate with intuitive controls</ListItem>
</List>

### Advanced Canvas Features

<List type="bullet">
  <ListItem>
    **High performance rendering** powered by [ThorVG](https://www.thorvg.org/) for real time vector rendering in the
    browser
  </ListItem>

  <ListItem>**Guides and Grid** for precision layout</ListItem>
  <ListItem>**Smart Snapping** to grid, guides, layers and artboard</ListItem>
  <ListItem>**Multi selection** for editing several layers at once</ListItem>
  <ListItem>**Scene Size**</ListItem>
  <ListItem>**Set Screen Color and transparency**</ListItem>
</List>

## 2. Timeline and Animation

### Keyframe Animation

<List type="bullet">
  <ListItem>**Property keyframes** including position, scale, rotation and opacity</ListItem>
  <ListItem>**Origin and Anchor point**</ListItem>
  <ListItem>**Keyboard shortcuts** for fast keyframe creation</ListItem>
  <ListItem>**Copy and paste animation** across layers</ListItem>
  <ListItem>**Work area controls** to trim and focus on a timeline range</ListItem>
  <ListItem>Keyframe Assistant</ListItem>
</List>

### Easing and Timing

<List type="bullet">
  <ListItem>**Visual Easing Editor** with cubic bezier curves</ListItem>
  <ListItem>**Easing presets** including linear and multiple ease variations</ListItem>
  <ListItem>**Frame by frame control** for precise timing</ListItem>
  <ListItem>**Playback controls** for previewing at different speeds</ListItem>
  <ListItem>**Duration and Frame rate**</ListItem>
</List>

### Advanced Animation Features

<List type="bullet">
  <ListItem>**Trim Path** for reveal style animations</ListItem>
  <ListItem>**Animated properties panel** to view all animated values</ListItem>
  <ListItem>**Motion presets** from plugins and extensions</ListItem>
</List>

## 3. Layers and Composition

### Layer System

<List type="bullet">
  <ListItem>**Shape layers** with fills, strokes and gradients</ListItem>
  <ListItem>**Image layers** for PNG and JPG assets</ListItem>
  <ListItem>**Nested scenes**</ListItem>
  <ListItem>**Parent child hierarchy** for linked movement</ListItem>
</List>

### Layer Organization

<List type="bullet">
  <ListItem>**Outliner panel** for a full tree view</ListItem>
  <ListItem>**Groups** to organize related layers</ListItem>
  <ListItem>**Lock and hide** controls</ListItem>
  <ListItem>**Layer naming**</ListItem>
  <ListItem>**Advanced duplicator** for grid, radial, spiral or random pattern duplication</ListItem>
</List>

## 4. Properties and Appearance

### Transform Properties

Position, scale, rotation, skew, anchor point and opacity — all fully animatable.

### Appearance Controls

<List type="bullet">
  <ListItem>**Fills**: Solid, linear gradient and radial gradient</ListItem>
  <ListItem>**Strokes**: Width, color, opacity, dash patterns, end caps and joins</ListItem>
  <ListItem>**Gradient editing** directly on canvas</ListItem>
  <ListItem>**Document color palette** automatically extracted from the project</ListItem>
</List>

### Effects and Compositing

<List type="bullet">
  <ListItem>**Blend modes**</ListItem>
  <ListItem>**Masks and Mattes**</ListItem>
  <ListItem>**Bounding box fit to object**</ListItem>
  <ListItem>**Alignment tools** to distribute elements</ListItem>
</List>

## 5. Interactivity and State Machines

### State Machine System

<List type="bullet">
  <ListItem>**Visual state graph editor**</ListItem>
  <ListItem>**States** including initial, final and global</ListItem>
  <ListItem>**Transitions** with instant or tweened movement between states</ListItem>
  <ListItem>**Segments**</ListItem>
</List>

### Inputs and Interactions

<List type="bullet">
  <ListItem>**Input types**: Boolean, numeric, string and event</ListItem>
  <ListItem>**Interactions**: Click, pointer down, pointer up, pointer enter, pointer exit, pointer move</ListItem>

  <ListItem>
    **Actions** such as set input value, fire event, open URL, toggle boolean, increment, decrement, reset, set theme,
    fire custom event
  </ListItem>
</List>

### Use Cases

<List type="bullet">
  <ListItem>Interactive buttons and toggles</ListItem>
  <ListItem>Hover animations and menus</ListItem>
  <ListItem>Feedback interactions</ListItem>
  <ListItem>Data driven visual states</ListItem>
</List>

## 6. Theme Management

### Color Management

<List type="bullet">
  <ListItem>Assign tokens to layers</ListItem>
  <ListItem>Define themes</ListItem>
  <ListItem>Export theme to workspace</ListItem>
  <ListItem>Switch between light mode, dark mode and custom themes</ListItem>
</List>

### Theme Export

<List type="bullet">
  <ListItem>**dotLottie export** with embedded themes</ListItem>
  <ListItem>**Runtime theme switching** in Lottie players</ListItem>
  <ListItem>**Multiple themes** packaged inside a single file</ListItem>
</List>

## 7. AI Powered Features

### Prompt to State Machines

<List type="bullet">
  <ListItem>Describe interactions in natural language</ListItem>
  <ListItem>AI creates states and transitions</ListItem>
  <ListItem>Adjust and finalize</ListItem>
</List>

### Prompt to Vector (Generative Fill)

<List type="bullet">
  <ListItem>Draw a selection</ListItem>
  <ListItem>Describe the shape</ListItem>
  <ListItem>AI generates SVG vectors</ListItem>
  <ListItem>Automatic fitting and placement</ListItem>
</List>

### Motion Copilot

AI assisted keyframe generation for common animation patterns.

### Prompt to Themes

<List type="bullet">
  <ListItem>Generate color themes from natural language prompts</ListItem>
  <ListItem>Apply themes directly to animations</ListItem>
  <ListItem>Iterate and refine</ListItem>
</List>

## 8. Plugin System

### Built in Plugins

<List type="bullet">
  <ListItem>Motion Presets</ListItem>
  <ListItem>Spring Curves</ListItem>
  <ListItem>SVGL Logo</ListItem>
  <ListItem>Physics Simulator</ListItem>
  <ListItem>Motion Copilot</ListItem>
</List>

## 9. Asset Management

### Import Options

<List type="bullet">
  <ListItem>**Lottie JSON**</ListItem>
  <ListItem>**dotLottie** with themes and interactivity</ListItem>
  <ListItem>**SVG** with smart grouping</ListItem>
  <ListItem>**Animated SVG (SMIL)** converted to native Lottie keyframes</ListItem>
  <ListItem>**PNG and JPG**</ListItem>
  <ListItem>**Drag and drop** import</ListItem>
</List>

### Text

<List type="bullet">
  <ListItem>Fonts</ListItem>
</List>

### Lottie Library

<List type="bullet">
  <ListItem>Access **over 100,000 animations**</ListItem>
  <ListItem>Search and filter</ListItem>
  <ListItem>One click import</ListItem>
  <ListItem>Templates for jump starting projects</ListItem>
</List>

## 10. Preview, Export, and Publishing

### Preview

<List type="bullet">
  <ListItem>Player name</ListItem>
  <ListItem>Player version</ListItem>
  <ListItem>Reload</ListItem>
  <ListItem>Loop</ListItem>
  <ListItem>Playback speed</ListItem>
  <ListItem>Background color</ListItem>
</List>

### Export Formats

<List type="bullet">
  <ListItem>**Lottie JSON** for all players</ListItem>
  <ListItem>**dotLottie** for compressed interactive files</ListItem>
  <ListItem>**GIF**</ListItem>
  <ListItem>**MP4, WebM and MOV (up to 4K)**</ListItem>
</List>

### Workflow Integration

<List type="bullet">
  <ListItem>Save to workflows with version tracking</ListItem>
  <ListItem>Publish directly to LottieFiles</ListItem>
  <ListItem>Export optimizations for file size</ListItem>
  <ListItem>Clean, developer-ready files</ListItem>
</List>

## 11. Collaboration and Ecosystem

### Team Collaboration

<List type="bullet">
  <ListItem>**Workspaces**</ListItem>
  <ListItem>**File sharing**</ListItem>
  <ListItem>**Remix workflow**</ListItem>
  <ListItem>**Version history**</ListItem>
</List>

### Social and Sharing

<List type="bullet">
  <ListItem>Publish to the LottieFiles community</ListItem>
  <ListItem>Social media exports</ListItem>
  <ListItem>Website embed options</ListItem>
</List>

### Full LottieFiles Ecosystem Integration

<List type="bullet">
  <ListItem>Edit animations from LottieFiles directly in Lottie Creator</ListItem>
  <ListItem>Sync changes across platforms</ListItem>
  <ListItem>Use **CDN links** for auto updating animation delivery</ListItem>
</List>

### Tool Integrations

<List type="bullet">
  <ListItem>**Figma**</ListItem>
  <ListItem>**Adobe After Effects**</ListItem>
  <ListItem>**Framer**</ListItem>
  <ListItem>**Webflow**</ListItem>
  <ListItem>**Canva**</ListItem>
</List>