Use animations from Lottie and Lottie Files in your designs.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animation files exported as JSON and renders them natively on mobile apps or the web. The beauty of Lottie is that a designer can create and ship their own stunning animations without an engineer painstakingly rebuilding them with code by hand.
What is Lottie?
Lottie animations are a great way to use animation in websites or mobiles apps without using up a lot of storage space. Some alternatives to Lottie animations might be GIFs, PNG sequenced animations, or animated vectors. While these options might be useful in certain cases, such as animated vectors being more performant on Android, Lottie is typically the best option for animations in modern apps. GIFs are easy to use but can be more than double the size of a Lottie file. And PNG sequences can be even bigger than a GIF, this can cause major issues with the performance of your product. If you want to keep your app performant and polished, using animations from Lottie Files is the easiest method.
How to use the Lottie animation component
When designing in Framer it’s easy to include your animations from Lottie or the platform Lottie Files. Once the Lottie component is placed on your canvas, just paste the link to your animation on the right-hand side of the canvas in the source property field or upload an animation file directly from your desktop. Your animation will appear immediately on the canvas and you can even control the speed, progress, direction, and loop settings.