PHPackages                             karnoweb/lottie - 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. karnoweb/lottie

ActiveLibrary

karnoweb/lottie
===============

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

11.0.3(today)06↑2400%MITJavaScriptPHP ^8.3

Since Aug 1Pushed todayCompare

[ Source](https://github.com/karnoweb/lottie)[ Packagist](https://packagist.org/packages/karnoweb/lottie)[ RSS](/packages/karnoweb-lottie/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (4)Versions (5)Used By (0)

Karnoweb Lottie
===============

[](#karnoweb-lottie)

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
------------

[](#requirements)

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

Installation
------------

[](#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.

"`or`src="animations/your-animation.json"`.

Usage
-----

[](#usage)

### Basic

[](#basic)

```

```

### With controls

[](#with-controls)

```

```

Attributes / Props
------------------

[](#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
--------------

[](#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
----------------

[](#livewire-support)

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

So it works with:

- `wire:navigate`

Triggers behavior (current implementation)
------------------------------------------

[](#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
-------

[](#testing)

### PHP (Pest)

[](#php-pest)

From `karnoweb/lottie/`:

```
composer install
composer test
```

### JS (Node test runner)

[](#js-node-test-runner)

```
node --test resources/js/__tests__
```

Notes / Assumptions
-------------------

[](#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.

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance100

Actively maintained with recent releases

Popularity6

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~0 days

Total

4

Last Release

0d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a6a881e293406595d74617357c2477180a2a48cb6613acb3395652bd00147f78?d=identicon)[sajadsoft1](/maintainers/sajadsoft1)

---

Top Contributors

[![sajadsoft1](https://avatars.githubusercontent.com/u/10587549?v=4)](https://github.com/sajadsoft1 "sajadsoft1 (4 commits)")

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/karnoweb-lottie/health.svg)

```
[![Health](https://phpackages.com/badges/karnoweb-lottie/health.svg)](https://phpackages.com/packages/karnoweb-lottie)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.7M3.3k](/packages/craftcms-cms)[psalm/plugin-laravel

Psalm plugin for Laravel

3355.4M352](/packages/psalm-plugin-laravel)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)