Lottie Animation Gutenberg Block
for WordPress

The easiest way to add a Lottie animation

With our lightweight plugin you can smoothly add your Lottie web animation into your WordPress website. 

About Smart Lottie Animation plugin

With our lightweight plugin you can smoothly add your Lottie web animation into your WordPress website. 

The Smart Lottie Animation Block plugin adds an extra block to Gutenberg editor and also support adding animations via simple shortcode.

After the typical WordPress plugin installation process, you can fully configure how you want to display the Lottie animation on your page. You can set animation speed, looping, direction, alignment, dimensions, background color

Smart Lottie Animation Gutenberg Block is compatible with all modern browsers.

How to use?

Demos are here to help You!

The user experience is pretty smooth. We add the Smart Lottie Animation block and can then quickly modify it’s attributes via the settings panel. We then hit preview to see what it looks like.

The settings panel contains the following parameters:

  1. Lottie JSON URL:
  2. Width/Height: value in pixel or leave empty for 100%
  3. Align: Left, Center, Right
  4. Animation speed: default 1
  5. Start animation: Autoplay (default) , Hover, Mouse click
  6. Interaction type: On load (default), Scroll
  7. Loop Animation: Loop, Bounce, None
  8. If Loop Animation is set to ‘Loop’ you can specify Segment Start/Segment End to repeat
  9. Background color: RGB hexa code
  10. Render: SVG, HTML, Canvas
  11. Reverse animation: True or False. default false
  12. Unique ID for player: ID automaticaly generated by Gutenberg editor block

The parameters works same as the original Lottie player settings.

Demo 1:

On load animation with Autoload
and Bounce effect

Demo 2:

Only starts animation when container visible and user scroll. Animation starts when user’s mouse over the block.
No loops and repeat!

Demo 3:

Starts animation with Autoplay.
Set Loop animation and specify Segments to repeat.

Shortcode support

Makes your life easier!

Using shortcode

The plugin support dedicated shortcode function also. Instead of using the Gutenberg editor block, you can easily insert Lottie animation directly into any posts or pages via the following shortcode:

[bodymovin selectloop="bounce" howstart="autoplay" interaction="onload" id="MyFirstAnim" src="https://smartart.hu/wp-content/uploads/2024/01/smart-plugin-data.json" speed="1" 
direction="1" width="200px" height="200px"]



[src] = Lottie animation JSON file url. The animation to play, 
either Bodymovin JSON data or a URL to a JSON file.

[id] = use unique ID for animation player

[interaction] = 'scroll' or 'on load'

[howstart] =
	• 'autoplay' = autoplay true (default) or false. When set to true, automatically plays
	 the animation on loading it.
	• 'hover' = when set to true. Plays animation on mouse over
	• 'click' = animation starts with click

[selectloop] =	
	• 'loop' = loops the animation
	• 'bounce' = bounce the animation
	• 'none' = no loop 

[repeat] = If "[selectloop='loop]" You can specify the animation segments to repeat with 
segmentstart, segmentsend settings. For this action you have to use [repeat='true'] in shortcode.

[segmentstart, segmentsend] = frame numbers for repeat animation

[width, height] = parameters in pixel value

[align] = left, center (default), right

[speed] = speed of the animation (deafult: 1)

[direction] = 1 (forward),-1(backward). Direction of the animation. 
Set to 1 to play the animation forward or set to -1 to play it backward

[render] = svg, html, canvas. The renderer to use for the animation.

[background] = background color of the animation in rgb hexa code. Default: transparent

Credits and more

Extra informations

About Lottie

Lottie is an open-source animation file format that’s tiny, high-quality, scriptable, interactive, and can be manipulated at runtime. The top 500 apps on the App Store now use Lottie to engage users and enhance conversions.