This article covers a free website to download free Lottie icon animations with customize easing. Lottie is a library to React Native, Android, and iOS that renders After Effects animations in real-time. With the help of this library, native apps can use animations as static assets. Lottie animations are exported as JSON files and used with the help of Bodymovin, an open-source After Effects extension.
Lottieflow is a free website with a collection of Lottie icon animations that you can use in your projects. You can browse Lottie icons by categories with dozens of animations in each category. You can change the color of each animation as per your needs and customize the easing tool. If you create an account, you can also save animations to your account and manage a favorite list.
Also read: Download 404 Error page sample illustrations from this Free Website
Free Lottie Icon Animations with Customize Easing
The website gives you a quick intro to Lottie files and how well those work with Webflow sites. The animations are very small in size and thus efficient to use with webflow.
From there, you can browse the category to find the Lottie icons that you need. There are over 20 categories for 404 messages, arrows, attentions, checkboxes, scroll, search, social media, play, menu, etc. You can pick a category and explore Lottie icons.
Each category offers around a dozen or more Lottie icons. You can hover your mouse cursor on an icon to see the duration and size along with a button to download it. And if you like to customize an icon then you can just click it open.
This opens the Lottie icon in a preview window with customization options. Here you can enter a hex value to switch the color of the icon. After applying the color, you can play the animation to see how it looks. Then, you can customize the easing as well. You can go with
- Ease-y: with this option, the Lottie icon has professional animator easing applied. Apply Linear easing in Webflow Interactions
- Linear: with this option, the Lottie icon does not have any easing applies, you can apply your own easing properties in Webflow Interactions.
After customizing the Lottie icon as per your requirement, just click the download button to export it in JSON format.
Closing Words
Lottieflow offers a decent collection of Lottie icon animations that you can just download and use in your webflow projects easily. The icons are smaller in size and can be used as static assets which makes them an efficient method to add animation to your website or app. Do give it a try and let us know if you find it helpful in your webflow projects.
