Design · Web app
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.
What it's 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
- Topic
- Motion Design
- 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: Enables designers and product teams to easily build and ship lightweight vector icon and shape animations to web and mobile apps.
- @darel023: The author (a Lottielab founding member) demonstrates the tool end-to-end: timeline, layer list, effects (blur), states mapped to playhead, share/export
Compare
Related
AI-powered web editor for generating editable motion graphics from text prompts.
Browser-based graphic design editor with procedural motion graphics and effects
Fast, browser-based motion design tool with Figma import and AI animation features
Browser-based motion graphics editor for creating 3D product launch videos.
Visual canvas for designing interactive WebGL shaders and motion graphics
Step-by-step workflow combining AI generation with After Effects for layered motion posters
Updated