{"slug": "text-to-lottie-generate-lottie-animations-with-coding-agents", "title": "Text-to-Lottie: Generate Lottie animations with coding agents", "summary": "Diffusion Studio released Text-to-Lottie, an open-source framework that enables coding agents like Claude Code or Codex to generate production-ready Lottie animations from text prompts. The tool supports real-time preview, SVG-based animations, and integration with Lottie-web, React Native, and other platforms.", "body_md": "**Text-to-lottie** is an open-source framework for generating production ready Lottie animations with claude code/codex or any other coding agent supporting skills.\n\n|\n|\n\nInstall the skill:\n\n```\nnpx skills add diffusionstudio/lottie\n```\n\nThen ask your coding agent to generate a Lottie animation using `text-to-lottie`\n\n.\n\nExample prompt:\n\nCreate a Lottie animation from the SVG path in\n\n[https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg]. Reveal the path with an animation that follows the natural path direction. Apply a premium apple themed gradient to the path. Use ease-in-out timing, a transparent background, and preserve the original SVG geometry.\n\nThe agent sets up the workspace and the included player, where each animation lives as a scene inside a project. Scenes load automatically from `public/projects/<project>/<scene>/lottie.json`\n\nand live-update in the player as the agent edits them — so you can inspect, scrub, and refine the generated Lottie in real time.\n\nProvide SVGs, real-world data, or screenshots whenever possible. Results are significantly better when the animation is based on concrete assets.\n\nDescribe timing and movement using motion design language like ease-in, ease-out, and ease-in-out.\n\nProfessional motion graphics often rely on camera movement. Include camera pushes, pans, zooms, and rig-like motion in your prompt. The agent can simulate these through group transforms.\n\nBy default, outputs usually only expose a background color control. If you want to customize other properties, explicitly ask the agent to create controls for them.\n\nIf your animation requires a specific frame rate or length, include the desired FPS and total frame count in the prompt.\n\nGenerated animations can be used directly as Lottie JSON files or imported into After Effects for further refinement.\n\n```\n<script src=\"https://unpkg.com/lottie-web/build/player/lottie.min.js\"></script>\n\n<div id=\"anim\"></div>\n\n<script>\n  lottie.loadAnimation({\n    container: document.getElementById(\"anim\"),\n    renderer: \"svg\",\n    loop: true,\n    autoplay: true,\n    path: \"/animations/my-animation.json\"\n  });\n</script>\npython\nimport LottieView from \"lottie-react-native\";\n\nexport default function Loader() {\n  return (\n    <LottieView\n      source={require(\"./animation.json\")}\n      autoPlay\n      loop\n      style={{ width: 200, height: 200 }}\n    />\n  );\n}\n```\n\nAlternatively, [React Native Skia](https://shopify.github.io/react-native-skia/docs/skottie/) can also render Lottie animations via its Skottie module, including on the web. It lets you customize animation properties, assets, and typographies at runtime, and since `Skottie`\n\nis a regular Skia drawing, it can be composed into a larger Skia scene alongside shaders, effects, and masks.\n\n``` js\nimport { Skia, Canvas, Skottie, useClock } from \"@shopify/react-native-skia\";\nimport { useDerivedValue } from \"react-native-reanimated\";\n\nconst animation = Skia.Skottie.Make(JSON.stringify(require(\"./animation.json\")));\n\nexport default function Loader() {\n  const clock = useClock();\n  const frame = useDerivedValue(\n    () => ((clock.value / 1000) % animation.duration()) * animation.fps()\n  );\n  return (\n    <Canvas style={{ width: 200, height: 200 }}>\n      <Skottie animation={animation} frame={frame} />\n    </Canvas>\n  );\n}\npython\nimport Lottie\n\nlet animationView = LottieAnimationView(name: \"animation\")\nanimationView.frame = view.bounds\nanimationView.contentMode = .scaleAspectFit\nanimationView.loopMode = .loop\nview.addSubview(animationView)\nanimationView.play()\nval view = findViewById<LottieAnimationView>(R.id.animationView)\nview.setAnimation(R.raw.animation)\nview.loop(true)\nview.playAnimation()\ndependencies:\n  lottie: ^latest\nimport 'package:lottie/lottie.dart';\n\nLottie.asset('assets/animation.json')\n```\n\n", "url": "https://wpnews.pro/news/text-to-lottie-generate-lottie-animations-with-coding-agents", "canonical_source": "https://github.com/diffusionstudio/lottie", "published_at": "2026-06-16 00:59:03+00:00", "updated_at": "2026-06-16 01:18:14.725664+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["Diffusion Studio", "Claude Code", "Codex", "Lottie", "React Native", "Skia", "After Effects"], "alternates": {"html": "https://wpnews.pro/news/text-to-lottie-generate-lottie-animations-with-coding-agents", "markdown": "https://wpnews.pro/news/text-to-lottie-generate-lottie-animations-with-coding-agents.md", "text": "https://wpnews.pro/news/text-to-lottie-generate-lottie-animations-with-coding-agents.txt", "jsonld": "https://wpnews.pro/news/text-to-lottie-generate-lottie-animations-with-coding-agents.jsonld"}}