A powerful tool to add impressive light-weight animations to your website with a Wordpress native site editor, optimized for performance and Full Site …
Active installations50Adoption metric — not a quality score
WordPress.org rating5.0 / 5 from 1 ratings
Official packageDirect from WordPress.org
Repository metrics are context, not quality scores. Active installations measure adoption and can strongly reflect a plugin’s age and historical popularity. Ratings, recent updates and “Tested up to” metadata also do not guarantee modern code, error-free operation, security, feature completeness or suitability for a particular site. Why active installs don’t tell the whole story →
WP PlugIndex currently records XPAC Lottie Interactive Animations version 1.0.0 as active, updated 4y ago and tested up to WordPress 5.9.
Overview
About this plugin
Designed for the next generation WordPress websites, the plugin allows you to add light-weight Lottie animations anywhere in the Gutenberg editor, including the Site Editor and Widget editor. Also, our plugin covers comprehensive interactivity settings to set a custom behavior for your Lottie Animation, while the high-quality coding and optimisations provide future-proof functionality for you to enjoy and to impress your visitors.
Features
Chain mode on autoplay state. You can control the speed and delay of the animation.
Chain mode on loop state. You can control the count, speed and delay of the animation.
Chain mode with click state. Plays animation on click with above mentioned control available.
Chain mode with hover state. Plays animation when hovering mouse on it, above mentioned contols availible.
Chain mode with none state. Does not play the animation.
Scroll mode on seek state. Plays the animation back and forth depending on the scroll. Allows basic controls plus visibility start and visibility end options for complete customization. The loop toggle plays animation after the ‘visibility end’ percentage is reached.
Scroll mode on loop state plays an animation on loop after the percentage set from ‘visibility start’ is reached.
Scroll mode on play state. Plays the animation once after the percentage set from ‘visibility start’ is reached.
Link: you can add internal or external links to animations.
HOW TO USE
Install and activate the plugin
Inside the WordPress BLock Editor or Site Editor, find the “Lottie Animation” block and add it.
Add a URL or upload the JSON file of your preferred animation.
Check the animation settings on the right sidebar, where you can control the options, such as interactivity mode & state, animation speed, delay, add a link and much more.
Put the block inside a group or column to have controll over its dimensions, positioning, backgroung color, etc.
Limitations
With some FSE themes, the animation may not be rendered within the Site Editor (not to be confused with the Gutenberg block editor) when set inside a template or template part, but it works properly on the front end regardless. This is due to the fact that the Site Editor is still in Beta state and event listeners are not properly applied. Following WordPress updates are expected to fix this.
WordPress.org metadata
Plugin tags
Topics listed for this plugin in the WordPress.org directory.
gutenberg block
animation
interactive
lottie
Compatibility & maintenance
Compatibility & maintenance
Tested up to WordPress 5.9
Not yet marked as tested with WordPress 7.1. WordPress.org currently lists Tested up to 5.9.
Current WordPress releaseWordPress 7.1
WordPress.org Tested up to5.9
Minimum requirementsWordPress 5.5.0 · PHP 7.1
Update activity3 May 20224y ago
“Tested up to” is directory metadata supplied by the plugin author. WP PlugIndex does not turn an older declaration into a claim that the plugin is incompatible.
Changes recorded by WP PlugIndex
Recent tracked changes
No tracked version or compatibility changes have been recorded by WP PlugIndex yet.
Tracking & source
WP PlugIndex tracks public WordPress.org directory metadata and records selected version, compatibility and availability changes as they are detected.
