Lottie

Lottie is a library for rendering Adobe After Effects animations natively in web and mobile applications. Designers create animations in After Effects, export them as lightweight JSON files using the Bodymovin plugin, and Lottie renders them at any resolution without the file size penalty of video or the limitations of GIF. A complex animation that would be several megabytes as video typically compresses to a few kilobytes as a Lottie JSON file.

The library supports playback control, looping, speed adjustment, and dynamic property changes at runtime. Animations can respond to user interactions like scroll position, hover states, or progress indicators. LottieFiles, the community platform, provides a library of free and premium animations that can be customized and dropped into projects without additional design work.

For web developers, Lottie solves the problem of implementing complex motion design without manually coding CSS or JavaScript animations. It is widely used for loading indicators, onboarding illustrations, micro-interactions, empty states, and success confirmations. The web player is lightweight and performs well on mobile devices, making it a practical choice for adding polish to interfaces without impacting page performance.