Generate Lightweight Lottie Animations with a Single Prompt – Even from SVGs

Traditional animation workflows require using After Effects to craft frame‑by‑frame motions, then exporting them with the Bodymovin plugin as Lottie files for developers. This process is lengthy, and even minor tweaks force a round‑trip back to AE.

Text‑to‑Lottie is an open‑source tool (https://github.com/diffusionstudio/lottie) that lets AI models like Codex or Claude generate Lottie animations directly from natural‑language prompts, providing an instant preview window in the browser.

1. Text Effect

Send a prompt to Codex such as:

用 Text to Lottie 做一个 hello 手写字动画：画面中心是一笔连写的 hello，使用粗圆角 stroke，文字从左到右像手写一样逐步绘制出来，绘制过程中带蓝绿到米白的柔和渐变，末尾 o 的收笔有一点轻微弹性 settle。时长 170 帧，60fps，透明背景。暴露 controls：stroke width、opacity、gradient start、gradient end。用 Skottie 验证。

The AI generates a Lottie file where the word “hello” is drawn stroke‑by‑stroke with a gradient and a subtle bounce at the end. The result can be customized for stroke width, opacity, and colors, then exported via the “Export” button for integration into apps or web pages.

2. Logo Animation

Provide a similar prompt for a logo, and the tool produces a standalone Lottie scene that can be reused by adjusting the prompt text. The generated animation can be previewed and exported just like the text effect.

3. SVG Icon Animations

Download SVG icons from https://www.iconfont.cn/ (or create your own) and feed them to Text‑to‑Lottie with a prompt such as:

"用 text-to-lottie 把下面几个 SVG 图标分别做成独立场景,公共设定:透明背景、60fps、每个单独导出 lottie.json。各图标动效如下:  搜索图标(线性):放大镜手柄沿路径描绘出来,画完后轻微弹一下,ease-out,90 帧; 对勾图标(线性):描边沿笔画方向一笔画出(trim path reveal),保持原描边粗细和圆角,ease-in-out,75 帧。 爱心图标(面性):从中心缩放弹入 + 透明度淡入,带弹性 settle,ease-out,60 帧,暴露 fill color 控制项; 铃铛图标(面性):整体淡入后左右摇摆两下(像响铃),ease-in-out,120 帧;  每个图标一个 scene,风格各自独立,但都用统一的透明背景和 60fps。"

The AI returns four separate Lottie animations—search, checkmark, heart, and bell—each with specified timing, easing, and exposed controls, ready for export.

4. Tips for Better Results

Provide reference material such as the original SVG or screenshots.

Use familiar animation terminology (e.g., ease‑in, ease‑out, bounce).

Describe camera moves like pan, zoom, or rotate to guide the AI.

Specify duration and frame rate explicitly (e.g., 60 fps, 3 seconds).

Identify adjustable parameters (color, size, opacity) so developers can tweak later.

AI excels at simple icon or loading animations but struggles with particle effects or complex physics.

Final polishing may still require manual refinement; Lottie itself has limitations.

The article concludes with an invitation to explore a broader AI‑plus‑UI design knowledge base.