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.

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

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.

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\');