Lottie and DotLottie smart Loader

Blog Staff

May 11, 2022

There are many Lottie plugins for Gutenberg editor, but Greenshift has many useful extra options. First of all, it has smart loader, so it’s loading only after user has interactions, this allows to have perfect web vitals score even on heavy animations. Just check this page and you will see results.

Also, it has screenshot maker, so you can easily capture fallback image

Also, Lottie module has interaction possibilities, for example, you can make lottie playing based on user scroll

And on Hover effects. Hover over image

Additionally, plugin has also DotLottie block if you prefer to use lightweight .lottie format

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>There are many Lottie plugins for Gutenberg editor, but Greenshift has many useful extra options. First of all, it has smart loader, so it's loading only after user has interactions, this allows to have perfect web vitals score even on heavy animations. Just check this page and you will see results.</p>

<p>Also, it has screenshot maker, so you can easily capture fallback image</p>

<div class="wp-block-greenshift-blocks-lottie gs-lottieloader gs-lottie-gsbp-8e2312b5-57c0" style="display:flex;justify-content:center"><lottie-player id="gs-lottie-gsbp-8e2312b5-57c0" src="https://assets4.lottiefiles.com/private_files/lf30_nlhswxdd.json" background="#ffffff00" speed="1" style="width:600px;height:500px" loop autoplay data-visibility-start="0.1" data-visibility-end="1" data-frames-start="" data-frames-end="100" data-modetype="hover" data-interactivity=""></lottie-player><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/download_0.4761904761904762.svg" alt="" width="600px" height="500px" style="pointer-events:none"/></div>

<p>Also, Lottie module has interaction possibilities, for example, you can make lottie playing based on user scroll</p>

<div class="wp-block-greenshift-blocks-lottie gs-lottieloader gs-lottie-gsbp-f86bd697-3501" style="display:flex;justify-content:center"><lottie-player id="gs-lottie-gsbp-f86bd697-3501" src="https://assets8.lottiefiles.com/packages/lf20_mbe3iiji.json" background="#ffffff00" speed="1" style="width:500px;height:500px" data-visibility-start="0.1" data-visibility-end="1" data-frames-start="" data-frames-end="120" data-modetype="seek" data-interactivity="scroll"></lottie-player></div>

<p>And on Hover effects. Hover over image</p>

<div class="wp-block-greenshift-blocks-lottie gs-lottieloader gs-lottie-gsbp-32a15d21-4cd3" style="display:flex;justify-content:center"><lottie-player id="gs-lottie-gsbp-32a15d21-4cd3" src="https://assets2.lottiefiles.com/packages/lf20_l3awcbpv.json" background="#ffffff00" speed="1" style="width:300px;height:300px" data-visibility-start="0.1" data-visibility-end="1" data-frames-start="" data-frames-end="100" data-modetype="hold" data-interactivity="cursor"></lottie-player></div>

<p>Additionally, plugin has also DotLottie block if you prefer to use lightweight .lottie format</p>

design, lottie