Home » Tools »

Lottie Lottie

An iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Web development Animation

Visit site »

Why Lottie?

Flexible After Effects features

We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.

Manipulate your animation any way you like

You can go forward, backward, and — most importantly — you can program your animation to respond to any interaction.

Small file sizes

Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.


Edit this page

UX Lift newsletter

Join with hundreds of other creatives and get a roundup of the best UX articles, resources and tools every week.

Get the newsletter


Alternatives to Lottie

Bodymovin

An After Effects extension to export animations for web.

Web development Animation

Catalog

Combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.

Web development Design systems

Flywheel

Whatever your work environment, Flywheel's powerful WordPress platform removes all the hassles of hosting, streamlines your processes, and lets you get back to doing your best work.

Hosting Web development

Fractal

Build. Document. Integrate. Powerful component libraries & styleguides that fit the way you work.

Web development Design systems

HTML Sketchapp

HTML Sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.

Design systems Design-to-code Web development

Hugo

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Web development

Jekyll

Transform your plain text into static websites and blogs.

Web development

Keyframes

Keyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.

Web development Animation

Netlify

Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.

Hosting Web development

React Sketch.app

Render React components to Sketch; tailor-made for design systems

Design-to-code Design systems Web development

Storybook

An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Web development Design systems