PHPackages                             laraextend/scroll-reveal - 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. [Templating & Views](/categories/templating)
4. /
5. laraextend/scroll-reveal

ActiveLibrary[Templating & Views](/categories/templating)

laraextend/scroll-reveal
========================

Flexible, Livewire-compatible scroll-reveal animation component for Laravel Blade — powered by josh.js.

v0.0.1(2mo ago)0312↓50%MITPHPPHP ^8.2

Since Feb 21Pushed 2mo agoCompare

[ Source](https://github.com/laraextend/scroll-reveal)[ Packagist](https://packagist.org/packages/laraextend/scroll-reveal)[ Docs](https://github.com/laraextend/scroll-reveal)[ RSS](/packages/laraextend-scroll-reveal/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (5)Versions (2)Used By (0)

 [![Latest Version on Packagist](https://camo.githubusercontent.com/7c2ed7d37c5a8702684b18343d63686a94ccd4963625337914adc5f91e9d2ad7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6c617261657874656e642f7363726f6c6c2d72657665616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/laraextend/scroll-reveal) [![Total Downloads](https://camo.githubusercontent.com/ac64cb1405142a1b6e366b56eb64e26678fc0b38c20ea7389629dfc094992450/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6c617261657874656e642f7363726f6c6c2d72657665616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/laraextend/scroll-reveal) [![PHP Version](https://camo.githubusercontent.com/b1d7d10e49dd6dba357d8c893c81e1cfc2d7ab1ce11c50697b098a9888657996/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f6c617261657874656e642f7363726f6c6c2d72657665616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/laraextend/scroll-reveal) [![License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)

Laravel Scroll Reveal
=====================

[](#laravel-scroll-reveal)

**Scroll-triggered animations for Laravel Blade — powered by Animate.css.**

`laraextend/scroll-reveal` provides a flexible `` Blade component that wraps any content in a scroll-triggered animation. It ships with its own **zero-dependency JavaScript driver** (built on the native Intersection Observer API) and works seamlessly in plain Blade templates and Livewire.

> **No external JavaScript runtime required.** The package includes its own driver script (`scroll-reveal-driver.js`) — no third-party npm package needed.

---

✨ Features
----------

[](#-features)

- **🧩 One Blade Component** — `` wraps any HTML content with scroll-triggered animations
- **🎬 Built-in JS Driver** — `` injects a zero-dependency Intersection Observer driver — no npm package required
- **🎨 30+ Animation Aliases** — Intuitive names (`fade-up`, `zoom-in`, `slide-left`, …) mapped to Animate.css classes
- **⚡ Livewire Ready** — All `wire:*`, `x-*` and `data-*` attributes are forwarded automatically; re-initialized after `livewire:navigated`
- **🏷️ Dynamic HTML Tag** — Render as any element (`div`, `section`, `article`, `span`, …) via the `as` prop
- **⏱️ Timing Control** — Fine-grained `duration` and `delay` props per element
- **🔇 Opt-Out Anywhere** — Pass `:animate="false"` to disable animation for a specific element at runtime
- **⚙️ Configurable Defaults** — Publish the config file to set project-wide defaults
- **📦 Zero Config** — Works immediately after installation with sensible defaults

---

📋 Requirements
--------------

[](#-requirements)

- **PHP** >= 8.2
- **Laravel** >= 10.x
- **Animate.css** >= 4.x — for the CSS keyframe animations (loaded via CDN or npm)

---

🚀 Installation
--------------

[](#-installation)

### 1. Install the package via Composer

[](#1-install-the-package-via-composer)

```
composer require laraextend/scroll-reveal
```

> The ServiceProvider is registered automatically via Laravel's Auto-Discovery.

---

### 2. JavaScript Setup

[](#2-javascript-setup)

This package generates the HTML `data-*` attributes for the animation driver. You have three options for the frontend setup — choose whichever fits your project.

---

#### Option A — Vite / app.js (recommended)

[](#option-a--vite--appjs-recommended)

The driver is bundled via Vite — no `` in the layout required.

**Step 1 — Publish the driver to `resources/js/`:**

```
php artisan vendor:publish --tag=scroll-reveal-js
```

This copies `scroll-reveal-driver.js` to `resources/js/scroll-reveal-driver.js` so Vite can bundle it.

**Step 2 — Install Animate.css:**

```
npm install animate.css
```

**Step 3 — Add to `resources/js/app.js`:**

```
import './scroll-reveal-driver.js'; // sets window.ScrollRevealDriver
import 'animate.css';

let driver;

function init() {
    if (driver) driver.destroy();
    driver = new ScrollRevealDriver({ initClass: 'animateme', offset: 0.2 });
}

document.addEventListener('DOMContentLoaded', init);
document.addEventListener('livewire:navigated', init);
```

**Step 4 — Import the CSS** in your stylesheet (e.g. `resources/css/app.css`):

```
@import 'animate.css';
```

**Step 5 — Restart the dev server:**

```
npm run dev
```

---

#### Option B — Built-in driver without Vite

[](#option-b--built-in-driver-without-vite)

The package ships its own Intersection Observer driver. Publish it to your `public/` directory once:

```
php artisan vendor:publish --tag=scroll-reveal-assets
```

This copies `scroll-reveal-driver.js` to `public/vendor/scroll-reveal/scroll-reveal-driver.js`.

Then add `` and the Animate.css link to your layout (e.g. `resources/views/layouts/app.blade.php`):

Inside ``:

```

```

Before the closing `` tag:

```
{{-- Loads the published driver + auto-initializes + handles livewire:navigated --}}

```

That is all. No npm install. No JS configuration. The component handles initialization and Livewire SPA navigation automatically.

**Available props for ``:**

PropTypeDefaultDescription`initClass``string``'animateme'`CSS class the driver watches. Must match what the component sets.`offset``float``0.2`Fraction of the element that must be visible to trigger (0–1).`animateOut``bool``false`Re-animate when an element leaves and re-enters the viewport.`inline``bool``false`Embed the driver script inline instead of referencing the file (useful if you skip the publish step).Inline mode (no publish step needed at all):

```

```

---

#### Option C — CDN only (no build step, no npm)

[](#option-c--cdn-only-no-build-step-no-npm)

Inside ``:

```

```

Before the closing `` tag:

```

```

---

### 3. Done!

[](#3-done)

No config files, no migrations, no additional steps required.

### 4. Optional Configuration

[](#4-optional-configuration)

Publish the config file to set project-wide defaults:

```
php artisan vendor:publish --tag=scroll-reveal-config
```

Published file: `config/scroll-reveal.php`

---

🎬 Usage
-------

[](#-usage)

### Basic usage

[](#basic-usage)

```

  This fades in from below when it scrolls into view.

```

### Custom animation & timing

[](#custom-animation--timing)

```

  ...

```

### Full example with Tailwind classes

[](#full-example-with-tailwind-classes)

```

  Welcome
  Animated section content.

```

### Different HTML tags

[](#different-html-tags)

```
{{-- Renders as  --}}

  ...

{{-- Renders as  --}}

  ...

```

### Disable animation at runtime

[](#disable-animation-at-runtime)

```

  {{-- No animation applied, just renders a plain  --}}
  ...

```

### Inside a Livewire component

[](#inside-a-livewire-component)

All standard Blade and Livewire attributes pass through without extra configuration:

```

```

---

📐 `` Props Reference
-------------------------------------

[](#-x-scroll-reveal-props-reference)

PropTypeDefaultDescription`animate``bool``true`Enable or disable the animation entirely.`animation``string``'fade-up'`Animation alias (see [Animation Aliases](#animation-aliases)).`duration``int``700`Animation duration in **milliseconds**.`delay``int``0`Animation delay in **milliseconds** (0 = no delay).`as``string``'div'`HTML tag to render (`div`, `section`, `article`, `span`, …).All additional attributes (e.g. `class`, `id`, `wire:*`, `x-*`, `data-*`) are forwarded directly to the rendered element.

---

🎨 Animation Aliases
-------------------

[](#-animation-aliases)

All aliases are mapped to their corresponding **Animate.css** class names.

### Fade

[](#fade)

AliasAnimate.css class`fade``fadeIn``fade-up``fadeInUp``fade-down``fadeInDown``fade-left``fadeInRight``fade-right``fadeInLeft`### Zoom

[](#zoom)

AliasAnimate.css class`zoom-in``zoomIn``zoom-out``zoomOut``zoom-up``zoomInUp``zoom-down``zoomInDown``zoom-left``zoomInRight``zoom-right``zoomInLeft`### Slide

[](#slide)

AliasAnimate.css class`slide-up``slideInUp``slide-down``slideInDown``slide-left``slideInRight``slide-right``slideInLeft`### Flip

[](#flip)

AliasAnimate.css class`flip-up``flipInX``flip-down``flipInX``flip-left``flipInY``flip-right``flipInY`### Rotate

[](#rotate)

AliasAnimate.css class`rotate-in``rotateIn``rotate-left``rotateInUpLeft``rotate-right``rotateInUpRight`### Creative / Special

[](#creative--special)

AliasAnimate.css class`swing-in``jackInTheBox``drop``bounceInDown``rise``bounceInUp``skew-left``lightSpeedInRight``skew-right``lightSpeedInLeft``blur-in``zoomIn`> Unknown aliases fall back to `fadeInUp`.

---

⚙️ Configuration
----------------

[](#️-configuration)

After publishing the config file, you can set project-wide defaults in `config/scroll-reveal.php`:

```
return [
    'animate'   => true,
    'animation' => 'fade-up',
    'duration'  => 700,
    'delay'     => 0,
    'as'        => 'div',

    // Informational — mirrors the props of
    'driver_options' => [
        'initClass'  => 'animateme',
        'offset'     => 0.2,
        'animateOut' => false,
    ],
];
```

> Note: The component props override the config defaults. The `driver_options` key is informational only — it is not automatically injected into JavaScript.

---

🔍 How It Works
--------------

[](#-how-it-works)

1. The `` Blade component renders a standard HTML element.
2. When `animate` is `true`, it adds the CSS class `animateme` and three `data-*` attributes:

    ```

      ...

    ```
3. The JavaScript driver observes all `.animateme` elements via the **Intersection Observer API**.
4. When an element enters the viewport, the driver reads the `data-sr-*` attributes and applies the corresponding `animate__` CSS class from Animate.css.
5. When `animate` is `false`, no attributes are added — a plain element is rendered.

---

🧪 Testing
---------

[](#-testing)

```
composer install
./vendor/bin/pest
```

---

📄 License
---------

[](#-license)

MIT — see [LICENSE](LICENSE.md).

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance83

Actively maintained with recent releases

Popularity17

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity36

Early-stage or recently created project

 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

Unknown

Total

1

Last Release

87d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9e2b5350dbcb74d6fd831b8150e27fd15979b6d792249a341b25434b00591c7f?d=identicon)[arashsaffari](/maintainers/arashsaffari)

---

Top Contributors

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

---

Tags

laravelperformancebladeanimationlivewirescrollAnimate.cssintersection-observerscroll-revealjosh.js

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/laraextend-scroll-reveal/health.svg)

```
[![Health](https://phpackages.com/badges/laraextend-scroll-reveal/health.svg)](https://phpackages.com/packages/laraextend-scroll-reveal)
```

###  Alternatives

[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k438.5k29](/packages/tightenco-jigsaw)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

413.9k](/packages/mati365-ckeditor5-livewire)

PHPackages © 2026

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