Learn with an animation you can edit

What is a Lottie file?

How the format works, how it compares with GIF and video, and what dotLottie and Bodymovin are.

Connect your assistant with MCP

Read the endpoint, pairing instructions, available tools, and current limits.

Figma to Lottie: animate exported SVG artwork

Export static SVG artwork, animate it in your browser, and keep an editable project. Start with the original three-shape mark supplied below.

Lottie React tutorial with a working example

Add Lottie to React with lottie-web. Download a working component and sample JSON with playback controls, reduced-motion support, and cleanup on unmount.

Add Lottie to a plain HTML website

Use a small HTML page and a local player script. The example includes the animation, playback controls, a fallback message, and reduced-motion handling.

Create an editable animation with an AI assistant

Connect an assistant to one open project, ask for a simple bouncing ball, and refine the resulting keyframes yourself. The prompt and editable example are included.

Connect your own assistant

• Animate a logo with Claude Code and Lottieditor

  Connect Claude Code over HTTP, pair one open project, and animate an imported SVG logo.

• Create an editable chart animation with Codex

  Add the remote Lottieditor MCP server to Codex, create a chart with native layers, and inspect the result before saving.

• Make a button animation with Cursor and MCP

  Configure Cursor for Lottieditor, pair the editor, and create a small arrow animation for a real interface.

How to create a Lottie animation: a looping loader

Customize a twelve-segment spinner, change its speed and color, and check its loop. Includes a short video and an editable project.

Animate an SVG logo

Try a two-second pulse on an original geometric mark, then use the same steps with your own artwork.