Gutenberg Lottie Animation Tutorial

Dive into the world of Lottie Animations with our Gutenberg Lottie Animation Tutorial. As web animations evolve, Lottie has emerged as a leading format, offering lightweight, scalable, and engaging animations that outperform traditional GIFs in speed and flexibility. Premium Block‘s tutorial introduces Premium Lottie Animations block for Gutenberg, a free tool that simplifies adding these animations to your website, enriching user experiences without the need for custom code.

Gutenberg Lottie Animation Block Layout Settings

Tailor your Lottie animations with control over loop, reverse play, animation speed, and triggers for user interaction, ensuring a dynamic and interactive experience.

  1. Loop: Enable to allow lottie animation to play forever.
  2. Reverse: This option will play Lottie Animation backward
  3. Animation Speed: Set Lottie Animation speed by making it slower or faster.
  4. Trigger: Select trigger action from none, hover, scroll or viewport.
    1. Scroll Speed: Set speed for Lottie animation while user scrolls up or down.
    2. Bottom: Set bottom point while user scrolling or Lottie enters the viewport.
    3. Top: Set top point while user scrolling or Lottie enters the viewport.
  5. Size: Set size for the lottie animation.
  6. Rotate (Degree): Change the angle of Lottie Animation.
  7. Alignment: Align Lottie to left, center or right.

Style Settings for Lottie Animation Gutenberg Block

Enhance the appearance of your Lottie animations with customizable background colors, CSS filters, borders, and spacing, adapting to any device with responsive settings.


Lottie Animations represents the cutting edge of web animation technology, combining performance with visual appeal. Through the Gutenberg Lottie Animation Block, adding these animations to your site is not only straightforward but also offers a vast playground for creativity without the overhead of traditional animation files. Whether you’re aiming to captivate your audience with interactive elements or convey complex ideas through simple animations, this tutorial sets you on the path to enhancing your web pages with fluid, eye-catching animations. Check out the demo page for examples and start incorporating Lottie Animations into your projects today.

About Leap13

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

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