Lottie Animations

Gavin Owens

Lottie Animations

How to use it

  1. Drag in a LottieAnimation component
  2. Paste the URL of a Lottie .json file into the JSON URL property field
  3. Rejoice in the magical fusion of Lottie and Framer X

Protip: You may find ready-to-use Lottie files at the aptly named website lottiefiles.com.

What if my URL doesn’t work?

Some URLs on LottieFiles (or other websites) may not work with this package, so don’t be alarmed if you paste something in and receive an error. Here’s an easy way to host your own JSON files…

  1. Download the JSON file you want and need
  2. Go to GitHub Gist to create a new Gist (Gist is cool, so it’s totally worth making an account if you haven’t already)
  3. Set the description to something that feels right to you — really make it your own
  4. Set the filename to something that seems cool, don’t forget the .json extension
  5. Paste your beloved, properly formatted Lottie JSON into the Gist file textarea
  6. Click “create public gist”
  7. Find your file in the Gist you just created and click “Raw” for this file
  8. You’ve arrived and are ready to copy pasta the URL of this page into the JSON URL property field

Still didn’t work or something else happening? Questions? Ideas? Comments? Find my contact info below and we’ll chat.

What is Lottie?

Lottie is a mobile library for Web, Android, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

View documentation, FAQ, help, examples, and more at airbnb.io/lottie


Tweet @_gavinowens


This package is made possible by lottie-web and react-lottie projects on GitHub