Gutenberg Lottie Animations Block Tutorial by Premium Blocks

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 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 animation to play forever.
Reverse: This option will play Lottie Animation backward.
Animation Speed: Set Lottie Animation speed by making it slower or faster.
Trigger: Select trigger action from none, hover, scroll or viewport.
Scroll Speed: Set speed for Lottie animation while user scrolls up or down.
Bottom: Set bottom point while user scrolling or Lottie enters the viewport.
Top: Set top point while user scrolling or Lottie enters the viewport.
Size: Set size for the lottie animation.
Rotate (Degree): Change the angle of Lottie Animation.
Alignment: Align Lottie to left, center or right.
Alignment: Align Lottie to left, center or right.
Alignment: Align Lottie to left, center or right.

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

Conclusion

Our comprehensive tutorial on Premium Lottie Animations block for Gutenberg has unveiled the dynamic potential of incorporating advanced web animations into your WordPress site. By navigating through the process of activating, customizing, and styling Lottie animations, we’ve demonstrated how these lightweight, scalable animations can dramatically enhance the user experience and visual engagement of your site. With detailed guidance on layout and style settings, including options for loops, speed adjustments, and responsive design, this tutorial empowers you to create captivating, interactive web pages that stand out in the digital landscape.

Need Further Help?

Have a question or need assistance? Our 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

Gutenberg Lottie Animations Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Lottie Animations Block?

Gutenberg Lottie Animation Block Layout Settings

Style Settings for Lottie Animation Gutenberg Block

Conclusion

Need Further Help?

Global Features

Help Center

Our Products

About Leap13