With our lightweight plugin you can smoothly add your Lottie web animation into your WordPress website.
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.
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:
The parameters works same as the original Lottie player settings.
More info about the Lottie player here: https://lottiefiles.com/web-player
On load animation with Autoload
and Bounce effect
Only starts animation when container visible and user scroll. Animation starts when user’s mouse over the block.
No loops and repeat!
Starts animation with Autoplay.
Set Loop animation and specify Segments to repeat.
Makes your life easier!
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"]
[Shortcode]
[Results]
[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, segmentend settings. For this action you have to use [repeat='true'] in shortcode.
[segmentstart, segmentend] = 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
Add your Lottie web animation into your WordPress website!
Extra informations
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.
For more information, please visit: https://lottiefiles.com/