To find Lottie animations like the ones shown in your image and to customize their color, you’ll want to source them from the right platforms and use specific design tools or settings inside Webflow.
1. Find Lottie Animations
- Go to LottieFiles — this is the largest and most reliable source of free and premium Lottie JSON animations.
- You can search by keyword (e.g., “loading”, “success”, “arrow”) or filter by styles and formats.
- Make sure the animation is Lottie (JSON) format and not a GIF or video.
- Check the license on each animation — many are free for commercial and personal use, but always verify.
2. Change Lottie Animation Color
You cannot change Lottie colors directly in Webflow unless the animation was built with editable color properties. Here's how to handle it:
- Check if the Lottie uses stroke/fill colors: Download the JSON and open it in Lottie Editor on LottieFiles.
- Use the Lottie Editor (https://lottiefiles.com/editor):
- Upload the JSON file.
- Click on individual elements to change their fill color or stroke color.
- Download the edited Lottie JSON to re-upload to Webflow.
- Alternatively, edit the colors in Adobe After Effects if you have the original
.aep
file before exporting via Bodymovin plugin. - In Webflow, after uploading to the Lottie element, you can sometimes manipulate colors using custom code only if expressions or selectors exist in the animation — but this is limited and not guaranteed to work.
Summary
To get Lottie animations like the one in your image, use LottieFiles.com. To change the color, either edit the animation in the Lottie Editor on that site or use Adobe After Effects prior to export. Webflow alone does not support direct color editing of Lottie JSONs once uploaded.