Download the PHP package laraextend/scroll-reveal without Composer

On this page you can find all versions of the php package laraextend/scroll-reveal. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of laraextend/scroll-reveal

Informations about the package scroll-reveal

Latest Version on Packagist Total Downloads PHP Version

Laravel Scroll Reveal

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

laraextend/scroll-reveal provides a flexible <x-scroll-reveal> 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

📋 Requirements

🚀 Installation

1. Install the package via Composer

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

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)

The driver is bundled via Vite — no <x-scroll-reveal-scripts> in the layout required.

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

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

Step 2 — Install Animate.css:

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

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

CSS imports belong in CSS files — @import 'animate.css' in your stylesheet is sufficient. No need to also import it in app.js.

Step 5 — Restart the dev server:

Option B — Built-in driver without Vite

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

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

Then add <x-scroll-reveal-scripts> and the Animate.css link to your layout (e.g. resources/views/layouts/app.blade.php):

Inside <head>:

Before the closing </body> tag:

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

Available props for <x-scroll-reveal-scripts>:

Prop Type Default Description
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)

Inside <head>:

Before the closing </body> tag:

3. Done!

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

4. Optional Configuration

Publish the config file to set project-wide defaults:

Published file: config/scroll-reveal.php

🎬 Usage

Basic usage

Custom animation & timing

Full example with Tailwind classes

Different HTML tags

Disable animation at runtime

Inside a Livewire component

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

📐 <x-scroll-reveal> Props Reference

Prop Type Default Description
animate bool true Enable or disable the animation entirely.
animation string 'fade-up' Animation alias (see 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

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

Fade

Alias Animate.css class
fade fadeIn
fade-up fadeInUp
fade-down fadeInDown
fade-left fadeInRight
fade-right fadeInLeft

Zoom

Alias Animate.css class
zoom-in zoomIn
zoom-out zoomOut
zoom-up zoomInUp
zoom-down zoomInDown
zoom-left zoomInRight
zoom-right zoomInLeft

Slide

Alias Animate.css class
slide-up slideInUp
slide-down slideInDown
slide-left slideInRight
slide-right slideInLeft

Flip

Alias Animate.css class
flip-up flipInX
flip-down flipInX
flip-left flipInY
flip-right flipInY

Rotate

Alias Animate.css class
rotate-in rotateIn
rotate-left rotateInUpLeft
rotate-right rotateInUpRight

Creative / Special

Alias Animate.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

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

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

  1. The <x-scroll-reveal> 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

📄 License

MIT — see LICENSE.

All versions of scroll-reveal with dependencies

PHP Build Version
Package Version
Requires php Version ^8.3
illuminate/support Version ^10.0|^11.0|^12.0|^13.0
illuminate/view Version ^10.0|^11.0|^12.0|^13.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package laraextend/scroll-reveal contains the following files

Loading the files please wait ...