# Lottielab

> Browser-based motion design editor for creating and exporting Lottie animations

Lottielab is an in-browser motion design tool designed to create, edit, and optimize vector animations. It serves as an accessible alternative to complex tools like After Effects, allowing teams to import designs and directly export production-ready Lottie files. It includes a collaborative interface, pre-built templates, and native compatibility with iOS, Android, and web.

Website: https://lottielab.com/

## What it is for

- Animate vector icons and UI components directly in the browser
- Import designs from Figma to turn static graphics into motion assets
- Edit existing Lottie animations without opening Adobe After Effects
- Export lightweight animations to dotLottie, GIF, MP4, and WebM

## Features

- Keyframe animation timeline with path and property controls
- Figma and SVG asset import
- Real-time team collaboration with comments and shared editing
- Pre-built template library for icons, illustrations, and logos
- Built-in file size optimizer for fast-loading assets
- Direct export to Lottie, dotLottie, GIF, MP4, and WebM formats

## Pricing

Freemium. Free tier available; paid plans for advanced features and team collaboration

## Details

- Type: Web app
- Category: [Design](https://xiry.app/topics/design.md)
- Topic: [Motion Design](https://xiry.app/topics/design/motion-design.md)
- Open source: no
- Platforms: Web
- For: UI/UX designers, motion designers, and product teams building web and mobile apps
- Alternative to: Adobe After Effects, LottieFiles, Rive
- Tags: animation, lottie, motion, ui design, vector, svg

## Why it was saved

- [@benkaluza, 1 February 2025](https://www.instagram.com/reel/DFienjiMxvs/): Enables designers and product teams to easily build and ship lightweight vector icon and shape animations to web and mobile apps.
- [@darel023, 27 January 2025](https://x.com/darel023/status/1883872315181863080): The author (a Lottielab founding member) demonstrates the tool end-to-end: timeline, layer list, effects (blur), states mapped to playhead, share/export

## Compare

- [Alternatives to Adobe After Effects](https://xiry.app/alternatives/adobe-after-effects.md)
- [Alternatives to Rive](https://xiry.app/alternatives/rive.md)
- [Alternatives to LottieFiles](https://xiry.app/alternatives/lottiefiles.md)

## Related

- [Hera](https://xiry.app/resources/hera): AI-powered web editor for generating editable motion graphics from text prompts. (Web app, Freemium)
- [Modyfi](https://xiry.app/resources/modyfi): Browser-based graphic design editor with procedural motion graphics and effects (Web app, Freemium)
- [Jitter](https://xiry.app/resources/jitter): Fast, browser-based motion design tool with Figma import and AI animation features (Web app, Freemium)
- [Raylight](https://xiry.app/resources/raylight): Browser-based motion graphics editor for creating 3D product launch videos. (Web app, Freemium)
- [Unicorn Studio](https://xiry.app/resources/unicorn-studio): Visual canvas for designing interactive WebGL shaders and motion graphics (Web app, Freemium)
- [AI Motion Poster Creation Workflow](https://xiry.app/resources/ai-motion-poster-creation-workflow): Step-by-step workflow combining AI generation with After Effects for layered motion posters (Tip, Freemium)

Updated 3 October 2026. Page: https://xiry.app/resources/lottielab

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.