# Lottie Creator 2.0: A Powerful Web-Based Lottie Animation Tool *By LottieFiles · July 22, 2026* Reimagine animation creation with Lottie Creator --- This article was originally published on 8 February 2024 and has been updated on 10 Sep 2026 to reflect new releases. * * * LottieFiles has just become even better with the introduction of [Lottie Creator](lottiefiles.com/creator), a powerful web-based Lottie animation tool, designed to create ultra lightweight, highly customizable and interactive animations for web, social and apps. With the introduction of Lottie Creator 2.0, your motion workflow is now simplified. Create your animations with Lottie Creator, collaborate with your team and stakeholders within the LottieFiles platform and implement them in your website, app and more all within one space. In this blog, we focus on our latest Lottie Creator 2.0, and explore the features it offers. [Embedded content](https://www.youtube.com/embed/N3ilgRH-oeQ?feature=oembed) Lottie Creator has since grown into a full-featured, browser-based editor for creating production-ready Lottie and dotLottie animations without the After Effects overhead. The essentials below still hold, and Creator 2.0 adds even more: an AI-powered Motion Copilot, State Machines, Motion Tokens, multi-animation dotLottie, real text layers, Motion System, and a growing suite of plugins. ## Features of Lottie Creator ### **1\. \[**NEW\] Motion Copilot v2: your AI animation assistant Motion Copilot is a full animation assistant now, not just a keyframing tool. Describe what you want, and it builds the whole thing (shapes, text, gradients, layers, keyframes, easing, and looping motion) while you stay in full control. - **Create anything on the canvas:** Ask for shapes, text, or vector paths and it draws them, complete with solid fills, gradients, drop shadows, rounded corners and font styling. Ask for an icon, a button state, or a whole layout, and it builds it on the canvas. new - **Add motion to your design:** Animate with keyframes on position, scale, opacity, rotation and color. Easing curves, seamless loops and staggered timing. Motion Copilot reads existing animation state first, so follow-ups build on what is already there. - **Organize layers and scenes:** Reorder, group, duplicate with an offset, rename, lock, hide and align. Set scene duration, apply masks and catch layout issues like an element clipped outside the canvas. new - **Edit everything at once:** Apply one instruction to many objects at once and animate a group as a coordinated set. If you’ve selected different kinds of objects, it flags the ones an instruction doesn’t fit instead of forcing it on everything. - **Adaptive controls:** Get relevant controls that let you refine the outcome without rewriting your prompt. Adjust key parameters such as intensity, direction, or repeat behavior using simple sliders and toggles. - **Pick a model for your AI**: Choose Auto for the best available model, or pick one yourself. Motion Copilot understands what you've selected, streams its reasoning in real time so you can watch it think, and turns plain-English requests into editable animation work. It's an assistant that gives you editable starting points, not an autopilot that replaces your craft. Reach it by right-click, keyboard shortcut (⌘K), or its own panel. **Learn more about Motion Copilot in this blog: [Introducing Motion Copilot](https://lottiefiles.com/blog/working-with-lottie-animations/introducing-motion-copilot-on-lottie-creator)** **Other AI tools in Lottie Creator** - Prompt to Vector: convert text descriptions into animatable vector graphics - Prompt to State Machines: turn text prompts into interactive state machine logic, no code required - AI Theming: auto-generate dark, light, and branded variations from a single animation ### 2\. Timeline and keyframes With Lottie Creator, you can gain precise control over your animations by adjusting keyframes and creating seamless transitions. Keyframes act as markers for significant changes in the properties, like position, scale, rotation, color, or opacity, throughout the animation timeline. The Easing Editor lets you dial in the exact motion curve for every keyframe, with real-time preview on the canvas. ![](https://blog-cdn.lottiefiles.com/2026/07/1-keyframe.png) ### 3\. \[NEW\] Graph editor Graph Editor will become allows motion designers frame-level precise control over animation curves, and easing crontrol on the timelinewithout ever leaving the browser. It mirrors the keyframe curve editing experience of After Effects, but lives natively in a web-first, Lottie-native workflow. ### 4\. Animation presets Lottie Creator offers an extensive array of animation presets, ideal for users who may be unsure where to start or those seeking to animate static designs quickly. These presets enable you to introduce elements into the frame, highlight particular layers or shapes within the frame, or move them out of the frame. You can also create custom presets that can be shared amongst your team or saved for private use for other projects. ![](https://blog-cdn.lottiefiles.com/2026/07/2-animation-presets.png) ### 5\. Access to over 100,000 Lottie animations Lottie Creators allows you to access an extensive library of 100,000+ Lottie animations for every industry and use case. Plus, access new animations added daily. ![](https://blog-cdn.lottiefiles.com/2026/07/3--lottie-library.gif) ### **6\. Universal File Importer: 16 Formats Supported** Previously, Lottie Creator supported SVG drag-and-drop imports. It now ships with Universal File Importer, which accepts 16 file formats directly on the canvas with no conversion step or external tool required. [Embedded content](https://www.youtube.com/embed/g7nJLVfjXvk?feature=oembed) Supported formats: - Design files: AI, EPS, PDF, PSD, SVG - Animation formats: AEP, FLA (Adobe Animate/Flash), RIVE, LOTTIE, GIF - Motion: SMIL, JSON - Video: MP4, WebM, MOV, WebP (converted directly into Lottie animations) 💡 After Effects in the Browser Drop an .AEP file directly into Lottie Creator and get a Lottie out — no After Effects installation required. The importer parses the binary AEP format in-browser, reads all compositions, and lets you pick which one to convert.[](https://lottiefiles.com) ### **7\. State Machines: No-Code Interactivity** Lottie Creator now includes a built-in [state machine](lottiefiles.com/state-machines) editor. Define animation states (idle, hover, clicked, success) and set transitions between them based on user triggers like clicks, hovers, or custom events. Everything is exported as a single dotLottie file with the interactivity logic embedded inside. [Embedded content](https://www.youtube.com/embed/4aUkC0lSbyg?list=PL5YboiW_RwK5VS1L7taE4qrO_BzORoFqH) 💡 What are State Machines? A state machine is a model that defines how an animation behaves in response to user interactions or events. Instead of a looping animation that plays the same way every time, a state machine lets your animation react; hover triggers a hover state, a click fires a different sequence, and so on. All of this is embedded in the .lottie file and runs natively on any platform. [Read: State Machines are Finally in Lottie Creator](https://lottiefiles.com/blog/working-with-lottie-animations/state-machines-are-finally-in-lottie-creator) ### **8\. Motion Tokens: Data-Driven Animation** [Motion Tokens](https://lottiefiles.com/motion-tokens) let you expose animation values (colors, text, transforms) as bindable tokens that update at runtime from real data. Designers define tokens inside Creator; developers bind them to live data at implementation time. [Embedded content](https://www.youtube.com/embed/6CSSWE5xDvI?feature=oembed) 💡 When to use Motion Tokens Motion Tokens are ideal for personalised UI animations (e.g. a welcome animation that displays the user's name), brand-adaptive animations that switch themes, and data dashboards where animation values update live. [Read: Motion Tokens Take Lottie Creator to New Heights](https://lottiefiles.com/blog/working-with-lottie-animations/motion-tokens-take-lottie-creator-to-new-heights) ### 9\. \[NEW\] Multi-animation dotLottie: everything in one file A single dotLottie file can hold multiple related animations  (idle, loading, success, hover, click) referenced by name and swapped at runtime. [Embedded content](https://www.youtube.com/embed/VDWfGHLzIfI?feature=oembed) Instead of juggling five or six separate files for one component, you ship one file that shares assets, colors, and motion settings across every animation inside it. Update a shared asset once, and it updates everywhere it's used in that file ### **10\.** \[NEW\] **Text Layers** Real, editable text layers are now available in Lottie Creator. Type directly on the canvas, animate text with full keyframe control, and update copy at any point in your workflow without re-exporting from a design tool. ![](https://blog-cdn.lottiefiles.com/2026/07/4--text.png) Text layers support typography animation; animate character-level or word-level properties like position, opacity, scale, and colour. Fonts are preserved in the exported dotLottie file. ### 11\. \[NEW\] Motion System: motion as part of your design system [Embedded content](https://www.youtube.com/embed/e80g69c8974?feature=oembed) Motion is the last unsystemized layer of your design system. Motion System lets teams standardize easing, presets, brand assets, motion patterns, and runtime values so product motion stays consistent across every surface. ### **12\. Download Options for Popular File Formats** Download your finished animation in multiple formats for different use cases: - Lottie JSON - Optimized Lottie JSON - [dotLottie](dotlottie.io) **✓** (recommended — smaller file size, supports theming, state machines, and multi-animation) - Optimized dotLottie - GIF - MP4 - MOV - WebM - \[NEW\] Animated SVG / SMIL 💡 Why dotLottie is the recommended export dotLottie is an open-source compressed archive that bundles animations, assets, themes, and state machine logic into a single .lottie file. It produces significantly smaller file sizes than Lottie JSON and is the standard format across the LottieFiles platform. [Read: Why dotLottie Is the New Baseline](https://lottiefiles.com/blog/working-with-lottie-animations/the-evolution-of-lottie-why-dotlottie-is-the-new-baseline) [Embedded content](https://www.youtube.com/embed/x8UtGj-mdnE?feature=oembed) ### **13\. \[**LIVE\] **Creator Extensions: Unlock Specialized Motion Capabilities** Lottie Creator ships with a growing suite of built-in plugins through Creator Extensions, each designed to help you achieve specific animation effects with ease. [| LottieFiles | 10 comments](https://www.linkedin.com/feed/update/urn:li:activity:7491594366604484608) — Some of the best things in Adobe After Effects came from the people using it. So Lottie Creator has plugins now. Creator Bazaar is live. Install what exists or vibe-code what doesn’t & ship it to everyone else. Tell us what’s missing & we’ll help you build it 👇 Plugins are purpose-built to unlock capabilities that go beyond the standard timeline, giving you more dynamic and refined motion with less manual work. - **Advanced Duplicator:** Quickly generate complex patterns and repeated motion. Duplicate layers while independently adjusting angle, position, scale, and timing offsets; ideal for radial patterns, looping sequences, and ornamental motion without manual layer-by-layer setup. - **Physics Simulator:** Add realistic movement with gravity, force vectors, collisions, and natural physical interactions. Simulate bouncing, falling, swinging, and collision-based motion without hand-crafting every keyframe. Great for product animations, character physics, and anything that needs believable weight. - **Motion Presets:** A library of ready-to-apply motion styles. Apply consistent, polished motion patterns across layers in seconds; useful for maintaining design system standards across a team. - **Spring Curve:** Create smooth, natural easing with spring-based motion. Replace standard linear or bezier easing with organic spring physics; perfect for UI micro-interactions like buttons, toggles, and modals that feel alive and satisfying. - **SVGL Logos:** Browse and insert brand SVG logos directly from within Lottie Creator. Useful for quickly building brand-accurate animations without hunting for the right asset file. [How to create your own plugin in Lottie Creator | LottieFiles](https://www.linkedin.com/feed/update/urn:li:activity:7491440588299321344) — Want a plugin that doesn’t exist yet? Build it yourself.This tutorial walks you through making your own Lottie Creator plugin from the starter template to publishing it. Link to Creator Bazaar in the comment 👇 💡 More plugins are coming The Lottie Creator plugin system is actively expanding. New in-house and third-party plugins are planned — the architecture is open, so expect the plugin library to grow as the ecosystem matures. [Keep up with releases here](https://releases.lottiefiles.com/) ### **Pro Tip: Keyboard Shortcuts** The Lottie Creator's keyboard shortcuts make it easier and faster to create Lottie animations. You can easily access the keyboard shortcuts by clicking on the Help button in the top right-hand corner of your screen. Here are quick categories: - **Tools:** Essential tools like the hand tool, move tool, and options for inserting various shapes and adjusting properties. - **Transform:** Efficiently adjust object positions and scale objects proportionally. - **Timeline:** Easily navigate the timeline by jumping between keyframes in both forward and backward directions. Plus, take control of playback with options to play and pause your animation. - **Selection:** Basic functions like copy, paste, duplicate, and delete. - **View:** Easily zoom in and out to get a closer look at your animation. - **File:** Undo, redo, or save the animation file to your workspace. ## **Who Is Lottie Creator For?** Lottie Creator is built for the full motion team — not just animators. - **Motion designers** can build from scratch with a full timeline, shape tools, plugins, and AI-assisted keyframe generation. - **Product designers** can import Figma or Illustrator files and add interactivity via state machines without handing off to a developer. - **Developers** receive a clean dotLottie file with embedded state machines and motion tokens, ready to bind to real data with minimal integration work. - **Marketers** can create and edit animations for social and web without specialist software, and preview directly in the browser. ## **How Lottie Creator fits into your workflow** 1. Create or import your animation (from scratch, SVG, AEP, FLA, or any of the 16 supported formats) 2. Use plugins to add patterns, physics, or spring easing 3. Add interactivity using the state machine editor — no code required 4. Bind animation values to real data using motion tokens 5. Export as a dotLottie file with everything embedded 6. Share a preview link with stakeholders, or publish to the LottieFiles community 7. Implement via the web player, dotLottie runtimes, or the Figma / After Effects plugins ## Create anywhere, finish in Lottie Creator You don't have to give up the tools you already know. Keep animating in After Effects or Figma for the first pass, then bring your work into Lottie Creator through the LottieFiles plugin. Both paths land in the same place and Lottie Creator is where the animation becomes production-ready: add State Machines, Motion Tokens, and every other refinement here, then export a finished dotLottie. Have an animation project in mind? Get started with [Lottie Creator](https://creator.lottiefiles.com/), where the only limit is your imagination. Don't forget to tag us and share your Lottie animation creation on social media. We can't wait to see what you come up with! ## **Frequently Asked Questions** ### **What is Lottie Creator?** Lottie Creator is a browser-based motion design tool by LottieFiles for creating, editing, and exporting Lottie and dotLottie animations. It covers the full workflow from vector drawing and timeline animation to plugins, interactive state machines, and AI-assisted design, without requiring any desktop software. ### **Is Lottie Creator free?** Lottie Creator is available on the LottieFiles platform with a free tier and paid plans. Visit lottiefiles.com/pricing for current plan details. ### **What file formats can I import into Lottie Creator?** As of 2026, Lottie Creator supports 16 file formats via Universal File Importer: AI, EPS, PDF, PSD, SVG, AEP, FLA, RIVE, LOTTIE, GIF, SMIL, JSON, MP4, WebM, MOV, and WebP. ### **What plugins are available in Lottie Creator?** Current built-in plugins include Advanced Duplicator, Physics Simulator, Spring Curve, Motion Presets, and SVGL Logos. The plugin system is actively expanding with more in-house and third-party plugins planned. ### **What is the difference between Lottie JSON and dotLottie?** Lottie JSON is the original text-based animation format. dotLottie (.lottie) is a compressed archive format that can contain multiple animations, embedded themes, state machine logic, and data-bound variables in a single file — with significantly smaller file sizes. dotLottie is the recommended export for most use cases. ### **Can I make interactive animations without code?** Yes. Lottie Creator's visual state machine editor lets you design click, hover, and event-driven interactivity without writing any code. The logic is embedded into the dotLottie file and runs natively in supported runtimes. ### **Does Lottie Creator have AI tools?** Yes. Motion Copilot (keyframes from text prompts), Prompt to Vector, Prompt to State Machine, and AI Theming are all built into Lottie Creator. Have an animation project in mind? Get started with Lottie Creator today. Don't forget to tag us and share your creations on social media; we can't wait to see what you make. Explore Lottie Creator --- ## Related Articles - [How to Create Animations with AI Using Lottie Creator WebMCP](/blog/working-with-lottie-animations/how-to-create-animations-with-ai-using-lottie-creator-webmcp) - [How to Build Your First Lottie Creator Plugin: Create and Animate a Rectangle](/blog/working-with-lottie-animations/how-to-build-lottie-creator-plugin-create-and-animate-a-rectangle) - [How to Develop and Publish a Plugin for Lottie Creator](/blog/working-with-lottie-animations/how-to-develop-and-publish-a-plugin-for-lottie-creator) - [Lottie/dotLottie vs. GIF: Choosing the Right Animation for You](/blog/working-with-lottie-animations/lottie-vs-gif)