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

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

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 doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

%title %title
On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

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

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.