PHPackages                             bertux77/laravel-inview-animations - 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. bertux77/laravel-inview-animations

ActiveLaravel-package

bertux77/laravel-inview-animations
==================================

Laravel Inview Animations: animaciones personalizadas con IntersectionObserver.

v1.0.1(8mo ago)069MITCSSPHP ^8.0|^8.1|^8.2|^8.3

Since Sep 6Pushed 8mo agoCompare

[ Source](https://github.com/bertux77/laravel-inview-animations)[ Packagist](https://packagist.org/packages/bertux77/laravel-inview-animations)[ RSS](/packages/bertux77-laravel-inview-animations/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (3)Used By (0)

[![Logo Laravel Inview Animations](preview/laravel-inview-animations.webp)](preview/laravel-inview-animations.webp)

Laravel Inview Animations
=========================

[](#laravel-inview-animations)

✨ Animaciones personalizadas con **IntersectionObserver** para Laravel.
Incluye un sistema de `reveal` para entradas dinámicas, contadores numéricos y barras de progreso animadas.

Ideal para landing pages, portfolios o dashboards que necesitan ese **toque de vida** sin sobrecargar el frontend.

---

👀 Demo en vivo
--------------

[](#-demo-en-vivo)

👉 Mira todas las animaciones en acción en la web oficial:
[**Laravel Inview Animations – Demo Oficial**](https://albertofreelance.com/laravel-inview-animations)

---

⚡ Instalación
-------------

[](#-instalación)

```
composer require bertux77/laravel-inview-animations
php artisan vendor:publish --tag=inview-animations-assets
php artisan vendor:publish --tag=inview-animations-config
```

---

🔌 Uso
-----

[](#-uso)

Añade el componente Blade en tu layout:

```

```

Esto cargará automáticamente el CSS (`inview-animations.css`) y el JS (`inview-animations.js`).

---

🎭 Animaciones disponibles
-------------------------

[](#-animaciones-disponibles)

El sistema se basa en el atributo `data-anim` aplicado a un elemento con clase `.reveal`.
Ejemplo:

```

  Hola Lanzarote 🌞

```

Algunas animaciones incluidas:

- `fade-in`, `fade-up`, `fade-left`, `fade-right`
- `title-up`, `subtitle-up`, `paragraph-fade`
- `img-left`, `img-right`
- `scale-up`, `scale-pop`, `zoom-in`
- `rotate-in`, `flip-up`, `flip-left`, `flip-horizontal-in`
- `blur-in`, `sharp-slide`
- `clip-up`, `wipe-right`
- `skew-in`
- `text-gradient-sweep`, `liquid-reveal`, `shimmer`
- `tilt3d-bounce`, `turn-scale-left`, `turn-scale-right`
- `split-reveal`, `bounce-up`

---

### Animaciones especiales

[](#animaciones-especiales)

Animaciones para Gráficas
-------------------------

[](#animaciones-para-gráficas)

Además de las animaciones de entrada (`fade`, `scale`, `flip`, etc.), este paquete incluye **animaciones dinámicas de gráficas** para tarjetas `.dna-card`.
Están pensadas para visualizar datos de forma creativa (anillos, mini-barras y barras lineales).

### 🔵 Ring Progress (Anillo)

[](#-ring-progress-anillo)

Animación circular que muestra un porcentaje con trazo progresivo.

```

```

**Atributos disponibles**

- `data-type="ring"`
- `data-percent="85"` → porcentaje final
- `data-duration="1200"` → duración de la animación en ms
- `data-repeat="true|false"` → repetir al reentrar en viewport

---

### 🟤 Mini Bar Chart

[](#-mini-bar-chart)

Animación de barras verticales con efecto escalonado.

```

```

**Atributos disponibles**

- `data-type="bars"`
- `data-percent="70"` → altura máxima relativa de las barras
- `data-duration="900"` → duración de cada barra
- `data-repeat="true|false"`

---

### 🟠 Linear Progress Bar

[](#-linear-progress-bar)

Animación de progreso horizontal con destello (`sparkle`) que recorre la barra.

```

```

**Atributos disponibles**

- `data-type="line"`
- `data-percent="100"` → porcentaje de ancho final
- `data-duration="1200"` → duración de la animación
- `data-repeat="true|false"`

---

### ℹ️ Notas

[](#ℹ️-notas)

- Todas las animaciones usan el **mismo IntersectionObserver** que el resto de animaciones del paquete (`fade`, `scale`, etc.).
- El atributo `data-repeat` permite reiniciar la animación al volver a entrar en viewport.
- Los contadores numéricos (`.count[data-target]`) se animan automáticamente con el valor de `data-target`.

🔢 Contadores
------------

[](#-contadores)

Puedes animar números simplemente usando `data-count`:

```

  0+

```

Al entrar en pantalla, el número se incrementará automáticamente hasta el valor indicado.

---

⚙️ Atributos globales
---------------------

[](#️-atributos-globales)

- `data-delay="0.3"` → retardo de inicio.
- `data-duration="1s"` → duración de la animación.
- `data-repeat="false"` → solo se reproduce una vez.
- `data-color`, `data-line-width` → personalizan algunas animaciones especiales.

---

📦 Roadmap
---------

[](#-roadmap)

- Animaciones reveal básicas
- Contadores automáticos
- Skill Bars
- Animaciones con stagger en grupo
- Integración con Livewire / Alpine.js
- Presets para Tailwind CSS

---

📝 Licencia
----------

[](#-licencia)

MIT © 2025 – Creado con ❤️ por [AlbertoFreelance](https://albertofreelance.com)

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance61

Regular maintenance activity

Popularity8

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity52

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 ~4 days

Total

2

Last Release

243d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/2b52d024f9f678af52100678708dfe92412f06c5a78f7f292ec1a3f972e01a75?d=identicon)[bertux77](/maintainers/bertux77)

---

Top Contributors

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

---

Tags

laravelcssscrollAnimationsintersectionobserver

### Embed Badge

![Health badge](/badges/bertux77-laravel-inview-animations/health.svg)

```
[![Health](https://phpackages.com/badges/bertux77-laravel-inview-animations/health.svg)](https://phpackages.com/packages/bertux77-laravel-inview-animations)
```

###  Alternatives

[fedeisas/laravel-mail-css-inliner

Inline the CSS of your HTML emails using Laravel

5974.6M3](/packages/fedeisas-laravel-mail-css-inliner)[skydiver/laravel-materialize-css

Add Materialize CSS Framework to Laravel

5020.0k](/packages/skydiver-laravel-materialize-css)[tarunkorat/laravel-asset-cleaner

Safely detect and remove unused CSS, JS, SCSS and other assets from Laravel applications

733.2k1](/packages/tarunkorat-laravel-asset-cleaner)

PHPackages © 2026

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