How to Customize Animations in Elementor Lottie Widget

Premium Addons for Elementor has made it very easy to add Lottie animations in your Elementor pages. Almost all of our widgets are now compatible with Lottie Animations. For further information please check this article.

However, sometimes you like one of the Lottie animations but you need just to change some colors, speed, etc. So today we will have a quick guide for how to edit Lottie animations.

Step 1: Go to Lottiefiles.com and log in so you can download and edit the Lottie animations.

Lottie Files Website.
Lottie Files Website

Step 2: Browse and search for the animation that matches your needs. Then click on Edit Layer Colors button.

Edit Layer Colors for Elementor Lottie Animations widget
Edit Layer Colors for Elementor Lottie Animations widget

Step 3: Navigate to Lottie Editor if you already have a JSON already you can upload it from here.

Upload Lottie JSON Files to Lottie Editor.
Upload Lottie JSON Files to Lottie Editor

Step 4: For every layer you can show/hide it and change its color.

Edit Lottie Animations Layers, Show or Hide Layers and Change Colors.
Edit Lottie Animations Layers, Show or Hide Layers and Change Colors.

Step 5: Here we can do many things when you selecting Lottie Properties, you can from Animation Preferences group option.

  • Animation Preferences:
    • Change Lottie file Dimensions.
    • Set the FPS (Frame Per Seconds) value.
    • Set the duration for the animation.
  • Playback Settings:
    • You can change or remove the Background Color.
    • Set the Playback Speed.
  • Grouped Colors: Here, we can find all colors that used in this Lottie Animation.
  • Export As Lottie JSON: Export you files after save changes to use it on your website or project.
Customize Lottie Animation Speed and Export it.
Customize Lottie Animation Speed and Export it.

Now you can use the exported JSON file with any Elementor Widget that integrated with Lottie Animations.

Upload Custom Lottie Animation to Elementor Lottie Animation Widget
Upload Custom Lottie Animation to Elementor Lottie Animation Widget

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.