A visual Lottie animation editor with canvas drawing, keyframe timelines, and standards-compliant Lottie JSON export.
I wanted to understand the Lottie animation format properly, so I built an editor from scratch. You get a visual canvas with 9 shape tools — rectangle, circle, line, text, pen, star, heart, triangle, hexagon — and a timeline editor for keyframe-based animation control.
Each shape has animatable properties: position, size, colours, opacity, rotation, and scale. You set keyframes on the timeline, and the editor interpolates between them. There are 4 pre-made example animations to get started: basic shapes, a loading spinner, a flying bird, and a talking head.
The key feature is standards-compliant export. The custom lottieConverter.ts converts the internal format to proper Lottie JSON that works everywhere — LottieFiles, After Effects, iOS, Android, web. You can also import existing Lottie files for editing.
Built with React 18, Vite, Tailwind, shadcn/ui, and @dnd-kit for drag-and-drop. The lottie-web library handles preview playback.