Animaciones para Laravel

Laravel Inview Animations

+30 Animaciones modernas para tus proyectos web

Un paquete completo de animaciones CSS que se activan automáticamente cuando los elementos entran en el viewport. Configurable con data-attributes para duración, delay y efectos personalizados.

Instalar paquete Ver Animaciones

Compatible con Laravel 9/10/11

Instalación vía Composer o CDN

Instalación y Uso

Implementa las animaciones en tu proyecto en 3 simples pasos

Instalación vía Composer

1 Instalar el paquete

composer require bertux77/laravel-inview-animations

2 Publicar assets y config

                        php artisan vendor:publish --tag=inview-animations-assets 

                        php artisan vendor:publish --tag=inview-animations-config

3 Incluir el componente en tu layout/vista

<x-inview-animations-assets />

4 Usar las clases en tus elementos

<div class="reveal" data-anim="fade-up">Contenido animado</div>

Incluir por CDN en cualquier HTML

1 Añadir CSS y JS

                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bertux77/laravel-inview-animations/resources/css/custom.css"> 

                        <script src="https://cdn.jsdelivr.net/gh/bertux77/laravel-inview-animations/resources/js/custom.js" defer></script>

2 Usar las clases en tus elementos

                        <div class="reveal" data-anim="img-left" data-delay=".15">Mi imagen o bloque</div>
                    

El Intersection Observer activará las animaciones al entrar en el viewport.

✔ ¡Listo! Las animaciones se activan automáticamente

El Intersection Observer detecta cuándo los elementos entran en pantalla y aplica la animación indicada en data-anim.

Todas las Animaciones

Explora las 25 animaciones disponibles organizadas por categorías

1. Fade + Slides

fade-in

Solo opacidad

                                <div class="reveal" data-anim="fade-in" data-duration="1.5">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

fade-up

Desde abajo

                                <div class="reveal" data-anim="fade-up">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

fade-down

Desde arriba

                                <div class="reveal" data-anim="fade-down">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

fade-left

Desde izquierda

                                <div class="reveal" data-anim="fade-left">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

fade-right

Desde derecha

                                <div class="reveal" data-anim="fade-right">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

title-up

Efecto teatral

                                <div class="reveal" data-anim="title-up">

                                  Título

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

img-left

                                <div class="reveal" data-anim="img-left">

                                  Imagen

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

img-right

                                <div class="reveal" data-anim="img-right">

                                  Imagen

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

subtitle-up

Más sutil

                                <div class="reveal" data-anim="subtitle-up">

                                  Subtítulo

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

paragraph-fade

Solo desvanecer

                                <div class="reveal" data-anim="paragraph-fade">

                                  Párrafo

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

2. Scales

scale-up

Escala 0.9 → 1

                                <div class="reveal" data-anim="scale-up">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

scale-pop

Con rebote

                                <div class="reveal" data-anim="scale-pop">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

zoom-in

Acercamiento sutil

                                <div class="reveal" data-anim="zoom-in">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

3. Rotaciones / 3D

rotate-in

Rotación Z

                                <div class="reveal" data-anim="rotate-in">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

flip-up

Giro 3D en X

                                <div class="reveal" data-anim="flip-up">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

flip-left

Giro 3D en Y

                                <div class="reveal" data-anim="flip-left">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

flip-vertical-in

De canto a normal

                                <div class="reveal rounded w-28 h-28 bg-gray-200" data-anim="flip-vertical-in">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

flip-vertical-in-right

Canto derecho

                                <div class="reveal rounded w-28 h-28 bg-gray-200" data-anim="flip-vertical-in-right">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

flip-horizontal-in

Canto horizontal

                                <div class="reveal rounded w-28 h-28 bg-gray-200" data-anim="flip-horizontal-in">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

4. Blur / Filtros

blur-in

Desenfocado → Nítido

                                <div class="reveal" data-anim="blur-in">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

sharp-slide

Contraste + Slide

                                <div class="reveal" data-anim="sharp-slide">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

5. Clip / Mask

clip-up

Revela desde abajo

                                <div class="reveal" data-anim="clip-up">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

wipe-right

Escala X desde izq

                                <div class="reveal" data-anim="wipe-right">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

6. Skew / Tilt

skew-in

Sesgo que se corrige

                                <div class="reveal" data-anim="skew-in">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

7. Efectos Espectaculares

tilt3d-bounce

Inclinación 3D

                                <div class="reveal" data-anim="tilt3d-bounce">

                                  Contenido

                                </div>

Atributos disponibles:

data-duration data-delay

turn-scale-left

Giro izquierda

                                <div class="reveal" data-anim="turn-scale-left">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

turn-scale-right

Giro derecha

                                <div class="reveal" data-anim="turn-scale-right">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

bounce-up

Rebote hacia arriba

                                <div class="reveal" data-anim="bounce-up">

                                  Contenido

                                </div>

Atributos disponibles:

data-repeat data-duration data-delay

8. Funciones Especiales

Contadores Numéricos (Ejemplos)

Días

Horas

Minutos

                                <div class="grid grid-cols-3 gap-4 text-center reveal" data-anim="fade-in">
                            
                                <div class="space-y-1">
                            
                                <div class="text-4xl font-bold counter" data-anim="fade-up" data-count="60" data-duration="1.2" data-delay="0.0">0</div>
                            
                                <div class="text-xs uppercase tracking-wide text-gray-500">Minutos</div>
                            
                                </div>
                            
                                <div class="space-y-1">
                            
                                <div class="text-4xl font-bold counter" data-anim="fade-up" data-count="24" data-duration="1.4" data-delay=".15">0</div>
                            
                                <div class="text-xs uppercase tracking-wide text-gray-500">Horas</div>
                            
                                </div>
                            
                                <div class="space-y-1">
                            
                                <div class="text-4xl font-bold counter" data-anim="fade-up" data-count="365" data-duration="1.6" data-delay=".30">0</div>
                            
                                <div class="text-xs uppercase tracking-wide text-gray-500">Días</div>
                            
                                </div>
                            
                                </div>

Atributos disponibles:

data-count data-duration data-delay data-repeat

9. Carrusel horizontal

Marquee (Carrusel Horizontal)

⚡ Animaciones 🎯 100% CSS (sin JS) 🧩 InView + Observer 🛠️ Laravel Friendly 🎨 Tailwind Ready ♿ Respeta reduced-motion ⚡ Animaciones 🎯 100% CSS (sin JS) 🧩 InView + Observer 🛠️ Laravel Friendly 🎨 Tailwind Ready ♿ Respeta reduced-motion

<div class="overflow-hidden">
  <div class="marquee-track flex gap-12" style="--marquee-duration: 24s;">
    <span>⚡ Animaciones</span>
    <span>🎯 100% CSS (sin JS)</span>
    <span>🧩 InView + Observer</span>
    <span>🛠️ Laravel Friendly</span>
    <span>🎨 Tailwind Ready</span>
    <span>♿ Respeta reduced-motion</span>
    -- Duplicar el lote para bucle continuo --
    <span>⚡ Animaciones</span> ...
  </div>
</div>

Atributos / opciones:

--marquee-duration (CSS var) Sin JS (indep. de data-duration) prefers-reduced-motion

10. Gráficas Animadas

Ring Progress (Anillo)

0%

Ejemplo de animación de anillo con contador sincronizado.

                                <div class="mb-4 reveal" data-anim="fade-in" data-duration="1.2" data-repeat="true">

                                  <div class="dna-card flex items-center gap-4 p-4 bg-gradient-to-br from-gray-50 to-orange-50/30 border border-orange-100 rounded-2xl shadow-sm h-[120px] max-h-[120px] overflow-hidden" data-type="ring" data-percent="85" data-duration="1200">

                                    <div class="shrink-0">

                                      <svg viewBox="0 0 120 120" class="w-28 h-28 drop-shadow-sm">

                                        <defs>

                                          <linearGradient id="ringGradDoc" x1="0" y1="0" x2="1" y2="1">

                                            <stop offset="0%" stop-color="#FB923C"/>

                                            <stop offset="50%" stop-color="#F97316"/>

                                            <stop offset="100%" stop-color="#111827"/>

                                        </linearGradient>

                                        </defs>

                                        <circle cx="60" cy="60" r="40" fill="none" stroke="#FED7AA" stroke-width="12"/>

                                        <circle class="ring-progress" cx="60" cy="60" r="40" fill="none"

                                          stroke="url(#ringGradDoc)" stroke-linecap="round" stroke-width="12"

                                          stroke-dasharray="251" stroke-dashoffset="251" filter="url(#glow)"/>

                                      </svg>

                                    </div>

                                  </div>

                                </div>

Atributos disponibles:

data-type data-percent data-duration data-repeat

Mini Bar Chart

0%

Barras escalonadas hasta el % objetivo.

                                <section class="reveal" data-anim="fade-in" data-delay=".25" data-repeat="true">

                                  <article class="dna-card" data-type="bars" data-percent="70" data-duration="1600">

                                    <div class="h-20 w-40 flex items-end gap-2">

                                      <div class="bar flex-1 bg-orange-300/60 rounded-t"></div>

                                      <div class="bar flex-1 bg-orange-500/80 rounded-t"></div>

                                      <div class="bar flex-1 bg-gray-900/60 rounded-t"></div>

                                      <!-- Agrega tantas barras como quieras -->

                                    </div>

                                  </article>

                                </section>

Atributos disponibles:

data-type data-percent data-duration data-repeat

Linear Progress

0%50%100%

0%

Ancho progresivo

                                <section class="reveal" data-anim="fade-in" data-delay=".25" data-repeat="true">

                                  <article class="dna-card" data-type="line" data-percent="70" data-duration="1200">

                                    <div class="relative h-3 w-full bg-white rounded-full border overflow-hidden">

                                      <div class="progress-line h-full w-0 rounded-full bg-gradient-to-r from-orange-300 via-orange-500 to-gray-900"></div>

                                      <span class="sparkle absolute -left-2 top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-gray-900 opacity-0"></span>

                                    </div>

                                  </article>

                                </section>

Atributos disponibles:

data-type data-percent data-duration data-repeat

Configuración Avanzada

Personaliza cada animación con data-attributes

Data Attributes Disponibles

Atributo	Descripción	Ejemplo
data-anim	Tipo de animación	"fade-up"
data-duration	Duración en segundos	"0.8"
data-delay	Retraso en segundos	"0.2"
data-repeat	Repetir animación	"false"

Full Stack Developer

Alberto Carrión

Full Stack Developer con más de 30 años de experiencia en el mundo digital, especializado en tecnologías como HTML, CSS, JavaScript, Tailwind, Laravel, N8N e Inteligencia Artificial.

0% Creativo

Pensar fuera del marco, pero con resultado dentro del brief.

0% Inquieto

Investigando, Iterando, mejorando… loop infinito.

0%50%100%

0% Perfeccionista

Pixel-perfect, query-perfect, todo-perfect.

Tecnologías aplicadas en proyectos

HTML5
CSS3
JavaScript
PHP
Laravel
Tailwind CSS
Vue.js
n8n
SEO
Wordpress
HTML5
CSS3
JavaScript
PHP
Laravel
Tailwind CSS
Vue.js
n8n
SEO
Wordpress