karnoweb/lottie

Karnoweb Lottie is a production-ready Laravel package for rendering Lottie animations.

11.0.3 2026-08-01 10:18 UTC

Requires

• php: ^8.3
• illuminate/support: ^11.0|^12.0|^13.0

Requires (Dev)

• orchestra/testbench: ^9.0|^10.0|^11.0
• pestphp/pest: ^3.0
• pestphp/pest-plugin-laravel: ^3.0

MIT

Published on Packagist.org on 2026-08-01 10:19 UTC

README

Karnoweb Lottie is a production-ready Laravel package for rendering Lottie animations with:

• Lazy loading / viewport triggers
• Accessibility-friendly markup (aria-label / aria-hidden)
• Livewire wire:navigate support
• Memory-safe lifecycle (destroy() cleanup)

Requirements

• Laravel: 11, 12 or 13
• PHP: 8.3+ This package is compatible with Laravel 11/12/13 service provider + Blade component conventions.

Installation

1. Add to your Laravel app (Composer):

   composer require karnoweb/lottie

2. Publish configuration:

   php artisan vendor:publish --tag=karnoweb-lottie-config

   This will create config/lottie.php.

3. Publish JS runtime assets:

   The Blade component loads resources/js/index.js as an ES module from: public/vendor/karnoweb/lottie/

   php artisan vendor:publish --tag=karnoweb-lottie-assets

4. No need to install lottie-web in the host project

Karnoweb Lottie bundles lottie-web into its published JS runtime during package build, so the host project does not need to install lottie-web via npm.

Just run the publish steps above after updating the package.

"orsrc="animations/your-animation.json"`.

Usage

Basic

<x-lottie src="hero.json" />

With controls

<x-lottie
    src="hero.json"
    trigger="visible"
    autoplay
    loop
    speed="0.8"
    direction="normal"
    width="400"
    height="250"
    aria-label="Hero animation"
/>

Attributes / Props

Required:

• src (string): animation JSON source

Trigger system (trigger):

• lazy (default)
• visible
• hover
• click
• manual

Playback options:

• autoplay (boolean)
• loop (boolean)
• once (boolean)
• speed (number; > 0)
• direction (normal or reverse)

Layout / stability:

• width (int|string|null)
• height (int|string|null)

Accessibility:

• aria-label (string|null)
  • If provided: uses aria-label="..."
  • If not provided: sets aria-hidden="true"

Manual trigger

For trigger="manual", the animation starts when you dispatch a DOM event on the same element:

element.dispatchEvent(new CustomEvent('lottie:manual'));

Livewire support

The package listens for livewire:navigated and refreshes instances after DOM replacement.

So it works with:

• wire:navigate

Triggers behavior (current implementation)

• lazy / visible: IntersectionObserver decides when to load/play
• hover: mouseenter triggers load/play
• click: first click triggers load/play
• manual: waits for lottie:manual custom event

Testing

PHP (Pest)

From karnoweb/lottie/:

composer install
composer test

JS (Node test runner)

node --test resources/js/__tests__

Notes / Assumptions

• JS runtime is loaded from published assets under public/vendor/karnoweb/lottie/.
• If you don’t run the vendor:publish --tag=karnoweb-lottie-assets step, animations won’t initialize.