Download Plugin

Gutenberg Lottie Animations Block Tutorial

Table Of Content

Introduction

Explore the possibilities of enhancing your website with our tutorial on Premium Lottie Animations block for Gutenberg. Lottie animations represent the forefront of web animation technology, boasting advantages over traditional GIFs such as scalability, lightness, and dynamic engagement. Our guide simplifies the process of incorporating these superior animations into your site using Premium Block’s free tool, eliminating the necessity for custom coding and significantly improving user experiences.

Visit Demo Page
Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Lottie Animations Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Lottie Animations Block to your Gutenberg editor. From there, you can easily input the Lottie Animations file you desire.

Gutenberg Lottie Animation Block Layout Settings

Customize your Lottie animations by adjusting settings like looping, reverse playback, speed of animation, and interactive triggers. This ensures a lively and engaging user experience.

  • Loop: Enable to allow Lottie’s animation to play forever.
  • Reverse: This option will play Lottie Animation backward.
  • Animation Speed: Set Lottie’s animation speed by making it slower or faster.
  • Size: Set the size for the Lottie animation.
  • Rotate (Degree): Change the angle of the Lottie Animation.
  • Alignment: Align Lottie to left, center, or right.
  • Trigger: Select trigger action from none, hover, scroll, or viewport.
  • Scroll Speed: Set speed for Lottie animation while the user scrolls up or down.
  • Bottom: Set the bottom point while the user scrolling or Lottie enters the viewport.
  • Top: Set the top point while the user scrolling or Lottie enters the viewport.
  • Link: Toggle to enable or disable a hyperlink for the Lottie.
  • URL: Enter the web address you want the Lottie to link to.
  • Open link in New Tab: Toggle this to decide whether the linked page should open in a new tab or the current one.
  • No Follow : Toggle to enable/disable rel=”nofollow” on the heading link , to control SEO impact. Use for untrusted or low-value destinations.
  • Render As: Render the Lottie as SVG or Canvas, and set the render type to canvas if you’re having performance issues on the page.
Gutenberg Lottie Animations Block General Settings
Gutenberg Lottie Animations Block General Settings

Style Settings for Lottie Animation Gutenberg Block

Improve your Lottie animations’ visual appeal by adjusting background colors, CSS filters, borders, and spacing. Make them adaptable to any screen size with responsive design settings.

  • Normal/Hover: Tabs to switch between default style settings and settings when a user hovers over the animation.
  • Background Color: Option to select a background color for the Lottie Animation.
  • CSS Filters: Adjust visual effects like blur, brightness, contrast, etc., for the animation.
  • Border: Choose the style of border (solid, dotted, dashed, etc.).
  • Border Radius: Control the curvature of the animation container’s corners.
  • Padding: Adjust the space inside the animation container’s border, with separate controls for top, right, bottom, and left padding.
  • Margin: Set the space outside the animation container’s border, with separate controls for top, right, bottom, and left margin.
Gutenberg Lottie Animations Block Style Settings
Gutenberg Lottie Animations Block Style Settings

Conclusion

In conclusion, this tutorial has shown how easy and powerful it can be to use the Premium Lottie Animations Block for Gutenberg to bring your WordPress site to life. By walking through how to enable, customize, and style Lottie animations, you’ve seen how these lightweight and scalable animations can add personality and motion without slowing your site down. With flexible controls for layout, looping, speed, and responsiveness, you’re well equipped to create engaging, interactive pages that feel modern, dynamic, and enjoyable for your visitors.

Need Further Help?

Have a question or need assistance? Premium Blocks dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support
Facebook Group
About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Help Center
Global Features
Join Our Newsletter

Subscribe to our newsletter and be the first to know our latest updates!

Copyright © 2026 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks