humanmade / lottie-lite
A lightweight Lottie Animations Extension for WordPress
Installs: 558
Dependents: 0
Suggesters: 0
Security: 0
Stars: 29
Watchers: 11
Forks: 0
Open Issues: 4
Language:JavaScript
Type:wordpress-plugin
Requires
- composer/installers: ^1 || ^2
README
Adds support for Lottie animations as an enhancement to the following blocks:
- Core image block
- Core cover block
- Core media & text block
Allows overlaying or replacing the image with an animation.
Installation
- Download the plugin from the GitHub repository.
- Upload the plugin to your site's
wp-content/plugins
directory. - Activate the plugin from the WordPress admin.
Advanced Usage
The plugin exposes the DotLottie web player object on the enhanced blocks. This allows you to interact with the player and control the animation.
To access the player object, you can use the following JavaScript code:
function doStuff(player) { // Do stuff with the player object } // Wait for the player to be ready as they may be loaded asynchronously, // depending on the block's visibility and whether the image is lazy-loaded. document.querySelectorAll( '[data-lottie]' ).forEach( ( element ) => { if ( element.lottie ) { doStuff( element.lottie ); } else { element.addEventListener( 'lottieReady', () => { doStuff( element.lottie ); } ); } } );
Full documentation for the DotLottie web player can be found here:
https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/