PHPackages humanmade/lottie-lite - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. humanmade/lottie-lite ActiveWordpress-plugin[Utility & Helpers](/categories/utility) humanmade/lottie-lite ===================== A lightweight Lottie Animations Extension for WordPress 1.3.1(3mo ago)385.6k↓58.9%2[11 issues](https://github.com/humanmade/lottie-lite/issues)[5 PRs](https://github.com/humanmade/lottie-lite/pulls)GPL-2.0-or-laterJavaScriptCI passing Since Sep 2Pushed 3mo ago10 watchersCompare [ Source](https://github.com/humanmade/lottie-lite)[ Packagist](https://packagist.org/packages/humanmade/lottie-lite)[ RSS](/packages/humanmade-lottie-lite/feed)WikiDiscussions main Synced yesterday READMEChangelog (10)Dependencies (2)Versions (29)Used By (0) Lottie Lite =========== [](#lottie-lite) [![Playwright Tests](https://github.com/humanmade/lottie-lite/actions/workflows/playwright-tests.yml/badge.svg)](https://github.com/humanmade/lottie-lite/actions/workflows/playwright-tests.yml)[![Lint](https://github.com/humanmade/lottie-lite/actions/workflows/lint.yml/badge.svg)](https://github.com/humanmade/lottie-lite/actions/workflows/lint.yml) 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. [**🎮 Try it on WordPress Playground**](https://playground.wordpress.net/#eyJsYW5kaW5nUGFnZSI6Ii93cC1hZG1pbi8iLCJwcmVmZXJyZWRWZXJzaW9ucyI6eyJwaHAiOiI4LjMiLCJ3cCI6IjYuOCJ9LCJzdGVwcyI6W3sicGx1Z2luWmlwRmlsZSI6eyJyZXNvdXJjZSI6InVybCIsInVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9odW1hbm1hZGUvbG90dGllLWxpdGUvYXJjaGl2ZS9yZWZzL2hlYWRzL3JlbGVhc2UuemlwIn0sIm9wdGlvbnMiOnsiYWN0aXZhdGUiOnRydWV9LCJzdGVwIjoiaW5zdGFsbFBsdWdpbiJ9LHsic3RlcCI6ImxvZ2luIiwidXNlcm5hbWUiOiJhZG1pbiIsInBhc3N3b3JkIjoicGFzc3dvcmQifV19) Installation ------------ [](#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. Development ----------- [](#development) ### Available npm Scripts [](#available-npm-scripts) ``` # Build production assets npm run build # Development watch mode npm run start # Format code npm run format # Linting npm run lint:js # Check JavaScript npm run lint:css # Check CSS npm run lint:js:fix # Fix JavaScript issues npm run lint:css:fix # Fix CSS issues # Create distributable plugin ZIP npm run plugin-zip # Testing npm run playground:start # Start WordPress Playground server npm run test:e2e # Run end-to-end tests npm run test:e2e:debug # Run tests in debug mode npm run test:e2e:watch # Run tests in watch mode ``` The build process uses `@wordpress/scripts` to compile JavaScript and CSS from `src/*.js` into the `build/` directory. ### Testing [](#testing) The plugin uses [Playwright](https://playwright.dev/) for end-to-end testing with [WordPress Playground](https://wordpress.github.io/wordpress-playground/). #### Running Tests Locally [](#running-tests-locally) 1. Start the WordPress Playground server (in one terminal): ``` npm run playground:start ``` 2. Run the tests (in another terminal): ``` npm run test:e2e ``` The Playground environment runs on `http://localhost:9400` with WordPress 6.8, PHP 8.3, and auto-login enabled. #### CI Testing [](#ci-testing) Tests run automatically on GitHub Actions using a matrix of: - **PHP versions**: 8.3, 8.4 - **WordPress versions**: 6.7, 6.8, latest This ensures compatibility across multiple PHP and WordPress versions. #### Adding New Tests [](#adding-new-tests) Tests are located in the `tests/e2e/` directory. Here's an example test: ``` const { test, expect } = require( '@playwright/test' ); const { Editor } = require( '@wordpress/e2e-test-utils-playwright' ); test.use( { editor: async ( { page }, use ) => { await use( new Editor( { page } ) ); }, } ); test.describe( 'Lottie Lite Plugin', () => { test.beforeEach( async ( { page } ) => { await page.goto( '/wp-admin/' ); } ); test( 'should add Lottie Animation panel to image block', async ( { page, editor, } ) => { // Navigate to create new post await page.goto( '/wp-admin/post-new.php' ); await page.getByRole( 'button', { name: 'Close' } ).click(); await editor.openDocumentSettingsSidebar(); // Insert an image block await page .locator( 'iframe[name="editor-canvas"]' ) .contentFrame() .getByRole( 'button', { name: 'Add default block' } ) .click(); await page .locator( 'iframe[name="editor-canvas"]' ) .contentFrame() .getByRole( 'document', { name: 'Empty block; start writing or' } ) .fill( '/image' ); await page .getByRole( 'option', { name: 'Image', exact: true } ) .click(); // Verify Lottie Animation panel exists await page .getByRole( 'button', { name: 'Lottie Animation Lottie Logo' } ) .click(); await expect( page.locator( '#tabs-3-settings-view' ) ).toContainText( 'Lottie Animation' ); } ); } ); ``` For more information on writing Playwright tests, see: - [Playwright Documentation](https://playwright.dev/docs/intro) - [WordPress E2E Test Utils](https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-test-utils-playwright) ### Pull Request Previews [](#pull-request-previews) When you open or update a pull request, a workflow automatically: - Builds the plugin with your changes - Generates a unique WordPress Playground link - Adds a "Try it in Playground" button to your PR description This allows reviewers to test your changes directly in their browser without any local setup required. Advanced Usage -------------- [](#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: ### Health Score 46 — FairBetter than 92% of packages Maintenance73 Regular maintenance activity Popularity35 Limited adoption so far Community17 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 52.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~33 days Total 18 Last Release 109d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/77dbeefb7745010589603f2ffc6ff310d8f700b58e08d52af190744c43342526?d=identicon)[roborourke](/maintainers/roborourke) --- Top Contributors [![roborourke](https://avatars.githubusercontent.com/u/23417?v=4)](https://github.com/roborourke "roborourke (38 commits)")[![svandragt](https://avatars.githubusercontent.com/u/594871?v=4)](https://github.com/svandragt "svandragt (22 commits)")[![pamprn09](https://avatars.githubusercontent.com/u/55361215?v=4)](https://github.com/pamprn09 "pamprn09 (6 commits)")[![Sephsekla](https://avatars.githubusercontent.com/u/33831317?v=4)](https://github.com/Sephsekla "Sephsekla (4 commits)")[![goldenapples](https://avatars.githubusercontent.com/u/665992?v=4)](https://github.com/goldenapples "goldenapples (3 commits)") ### Embed Badge ![Health badge](/badges/humanmade-lottie-lite/health.svg) ``` [![Health](https://phpackages.com/badges/humanmade-lottie-lite/health.svg)](https://phpackages.com/packages/humanmade-lottie-lite) ``` ### Alternatives [helsingborg-stad/municipio A bootstrap theme for creating municipality sites. 4028.5k10](/packages/helsingborg-stad-municipio)[mediawiki/maps Adds various mapping features to MediaWiki 84152.3k3](/packages/mediawiki-maps)[starcitizentools/citizen-skin A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki. 3376.6k](/packages/starcitizentools-citizen-skin)[civicrm/civicrm-drupal-8 Open source constituent relationship management for non-profits, NGOs and advocacy organizations. 19251.4k3](/packages/civicrm-civicrm-drupal-8)[altis/core Core module for Altis 19228.0k3](/packages/altis-core)[pfefferle/wordpress-activitypub The ActivityPub protocol is a decentralized social networking protocol based upon the ActivityStreams 2.0 data format. 5721.7k4](/packages/pfefferle-wordpress-activitypub) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)