Gutenberg Lottie Animation Tutorial

Lottie Animations are trending now because it’s very light in comparison with other web animation formats like GIFs. Premium Lottie Animations block for Gutenberg is a free block that gives you the ability to easily add Lottie Animations to your pages without any custom code.

Check Gutenberg Lottie Animation Block demo page from here.

Gutenberg Lottie Animation Block
Gutenberg Lottie Animation Block

Lottie Animation Gutenberg Block Layout Settings

  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

Customize background color, CSS filter, border and spacing for lottie animation block in responsive mode.

Gutenberg Lottie Animation Block Style Options
Style Gutenberg Lottie Animation Block

Related Docs: