https://github.com/humanmade/lottie-lite
A lightweight LottieFiles extension for core image blocks
https://github.com/humanmade/lottie-lite
Last synced: 4 months ago
JSON representation
A lightweight LottieFiles extension for core image blocks
- Host: GitHub
- URL: https://github.com/humanmade/lottie-lite
- Owner: humanmade
- Created: 2024-09-02T17:14:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T10:41:34.000Z (over 1 year ago)
- Last Synced: 2025-06-28T16:12:01.073Z (about 1 year ago)
- Language: JavaScript
- Size: 829 KB
- Stars: 34
- Watchers: 12
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lottie Lite
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
1. Download the plugin from the [GitHub repository](https://github.com/humanmade/lottie-lite).
2. Upload the plugin to your site's `wp-content/plugins` directory.
3. 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:
```js
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/