No results found. Try again with different words?

Search must be at least 3 characters.

‹ BACK TO DOC

Lottie

This block will help you insert some cool Lottie Animations to your pages in just a few clicks.

For which you do not have to worry a lot. Simply you need to insert the JSON file or choose to use the URL of the JSON file to insert the Lottie animation to your desired Block Editor section.

Make sure you are on the latest version of Spectra plugin or above 1.20.0

Key Features –

  • Handy Controls
  • Helpful Styling Options
  • JSON upload – File/URL

You can upload an JSON File / URL of the JSON to display animations with Lottie block.

Lottie

Controls

The Controls options basically will enable you to handle the Animation options like loop, speed, Direction, etc.

Let’s see the options in brief –

Loop – This option will help enable the Loop animation

Speed – This option will help manage the speed of the animation based on your Play On Trigger which we will see at the bottom.

Direction of Animation – Reverse – This option helps reverse the direction of the animation.

Play On – This is the option which brings variety to the animations. You can choose from –

  • Hover – This will play the animation on Hover.
  • Scroll – This will play the animation when the visitor scrolls on the website. [ Visible only on Live site ]
  • On Click – This will play the animation when the user clicks on the animation
Lottie controls

Also, do note you can manage the speed of the animation based on the above animation to get the best effect.

Style

The Style option provides options like Width, Height, Background Color, Background Hover Color.

Lottie style options

If in any case you are unable to upload the JSON file please use the following code in your child theme’s functions.php —

function mime_types($mimes) {
$mimes['json'] = 'application/json';
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'mime_types');

Security Note:

Please be careful about uploading Lottie JSON files from an unknown source. JSON files may potentially include malicious content. Spectra does initiate actions to sanitize the files, but there are some risks involved nonetheless. Ensure you only upload trusted files and do not allow the option to upload unfiltered files unless you understand the risks involved.

Was this article helpful?


Did not find a solution? We are here to help you succeed.

Get access to growing library of 40+ innovative widgets and 300+ creative templates.

Ultimate Addons for Gutenberg Is Now Spectra - 

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Scroll to Top