lottie

Renders After Effects animations as JSON files for web and mobile via lottie-web.

4|Updated Jan 15, 2026

Search Tags:#web development #react #vue #animation #motion graphics #lottie

Ready to run

npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill lottie-mgd34msu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/mgd34msu/goodvibes-gemini/tree/main/skills/lottie
Command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill lottie-mgd34msu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lottie-web, lottie-react, and includes references (resource) components.

What problem does it solve?

This Skill enables the seamless integration of After Effects animations into web and mobile applications, allowing for dynamic and engaging visual experiences without relying on traditional video files.

Core Features & Use Cases

Lightweight JSON Animations: Renders complex vector animations as small, scalable JSON files.
Cross-Platform Compatibility: Works across web (React, Vue) and mobile platforms.
Interactive Animations: Control playback, speed, and segments for dynamic user interactions.
Use Case: Add a custom loading spinner to your web application that animates smoothly using a JSON file exported from After Effects.

Quick Start

Install the lottie-web library by running npm install lottie-web in your project directory.

Frequently Asked Questions about lottie

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render After Effects animations on the web?▼

You render After Effects animations on the web by exporting them as lightweight JSON files and using the lottie-web library. This approach supports scalable vector graphics and dynamic playback control without relying on traditional video files.

Does lottie work with React and Vue frameworks?▼

Yes, lottie supports React and Vue frameworks. Using the lottie-react dependency alongside lottie-web allows you to build interactive animations and control playback segments directly within your web application's component architecture.

What is the best way to add a custom loading spinner to a web application?▼

Using lottie-web to render a JSON file exported from After Effects is the best way to add a custom loading spinner. This method provides lightweight, scalable vector motion graphics that animate smoothly across web and mobile platforms without video files.

Can I control animation playback speed and segments dynamically?▼

Yes, you can control animation playback speed and segments dynamically. The lottie-web library supports interactive elements, allowing you to trigger specific animation segments and manipulate playback for complex motion graphics within your application.

Why use JSON files instead of video files for UI animations?▼

You use JSON files instead of video files for UI animations because they are lightweight, scalable, and vector-based. This allows complex After Effects motion graphics to render efficiently across web and mobile platforms without large video file sizes.