Where can I find Lottie animations like the ones shown in the picture? And how can I change the color of a Lottie animation like the ones in the picture?
TL;DR
- Find Lottie animations on LottieFiles, marketplaces like Envato, or from freelancers, ensuring the file is in
.jsonformat. - To change colors, use Webflow’s Color Override for simple shape layers, or edit the original After Effects project and re-export with Bodymovin if the override doesn’t work.
Lottie animations can be found on several platforms, and customizing their color depends on how the animation was created. Here's how to find and adjust them.
1. Where to Find Lottie Animations
- LottieFiles (lottiefiles.com): The largest and most popular library of free and paid Lottie animations. You can browse by categories, tags, or keywords.
- Webflow University > Lottie Integration examples: Shows how Webflow uses Lottie, often linking to pre-made samples.
- Marketplace websites such as UI8, Envato Elements, or MotionElements sometimes offer Lottie-compatible JSON files.
- Designers or freelancers may also sell custom-made Lottie animations on platforms like Fiverr or Upwork.
Tip: Ensure the downloaded file is a .json format compatible with Webflow's Lottie integration.
2. How to Change the Color of a Lottie Animation
The ability to change a Lottie animation's color depends on how it's structured in the source After Effects project.
- If the animation uses shape layers with solid fills, you may be able to update the color directly in Webflow using Lottie settings → Color Override (only works with basic shapes and fill colors).
- If the color override doesn’t work:
- The animation likely uses pre-composed layers, image assets, or gradient fills, which cannot be color-edited directly in Webflow.
- You will need to edit the original After Effects file and re-export using the Bodymovin plugin:
- Open the .aep file in After Effects
- Select the shape layers and change their fill colors
- Export with Bodymovin again to generate an updated
.jsonfile
- Alternatively, on LottieFiles, some animations allow "Customize Color" in-browser before downloading. This works only if the creator enabled editing for color layers.
Summary
To get Lottie animations like those in your picture, browse LottieFiles or similar marketplaces. To change the color, use Webflow’s Color Override or edit the source file in After Effects if override isn't available.