20 ene 2025

Actualizado el 22 oct 2025

¿Cómo hacer una Scroll Animation con Tailwind?

Q: ¿Cómo hago que la animación de scroll se ejecute solo una vez?

Puedes usar el modificador intersect-once que proporciona el plugin. Simplemente añade la clase intersect-once al elemento, además de tu clase de animación (ej: intersect:animate-slide-in-left intersect-once).

Q: ¿Puedo usar las animaciones predefinidas de Tailwind?

Sí. Puedes combinar el modificador intersect: con cualquier utilidad de Tailwind, incluidas las animaciones (como intersect:animate-pulse) o transiciones (como intersect:opacity-100 transition-all).

Seguramente hayas visto que muchas páginas web (en especial las landing pages) usan animaciones en sus textos e imágenes a la vez que vas desplazándote hacia abajo por la página.

Pues bien, en este post te enseñaremos a hacerlas haciendo uso del framework CSS de moda: Tailwind.

¿Qué es una Scroll Animation y por qué usar Tailwind?

Las animaciones al desplazarse, también conocidas como scroll animation, son efectos visuales que se activan cuando el usuario hace scroll por la página.

Este tipo de animación puede mejorar significativamente la experiencia del usuario al añadir interactividad y destacar elementos clave.

¿Por qué usar Tailwind para esto?

Tailwind es un framework de CSS ideal para los desarrolladores que no quieren perder tiempo escribiendo archivos en puro CSS. Tailwind te da la posibilidad de estilizar tus elementos usando sus propias clases predefinidas.

Con Tailwind podemos realizar animaciones en nuestros elementos, ya sean las predefinidas o podemos desarrollar nuestras propias animaciones.

Pero entonces, ¿cómo hago que estas animaciones se hagan al desplazarme por la página?

Bueno, para eso tenemos que entender y hacer uso de la Intersection Observer API.

¿Qué es la Intersection Observer API?

La Intersection Observer API es una herramienta de JavaScript que permite observar y detectar cambios en la visibilidad de un elemento respecto a un contenedor o al viewport (ventana de visualización).

Es útil para implementar funcionalidades como carga diferida de imágenes (lazy loading), seguimiento de elementos en pantalla o activación de animaciones cuando un elemento entra o sale de la vista del usuario.

Combinar la Intersection Observer API con Tailwind

Obviamente esta API está desarrollada para usarla escribiendo código JavaScript. Sin embargo, ya hay alguien que ha hecho el trabajo por nosotros para que no tengamos que escribir nada.

Básicamente, podemos usar un plugin de tailwind para que nuestras animaciones sean dinámicas por el scroll sin escribir una sola línea de JavaScript.

La librería que usaremos será tailwindcss-intersect.

Ahora, os mostraremos cómo configurar y usar este plugin siguiendo un ejemplo.

Cómo configurar tailwindcss-intersect

Para empezar a usar este plugin, sigue los siguientes pasos:

1. Instalar tailwindcss-intersect

Primero, asegúrate de tener TailwindCSS instalado configurado en tu proyecto. Tienes una guía de instalación aquí.

Luego, instala el plugin con tu gestor de paquetes de Node.js:

npm install tailwindcss-intersect

2. Configura Tailwind para usar el plugin

Añade el plugin en tu archivo tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-intersect'),
  ],
};

3. Añade la configuración de JavaScript

Aparte de la configuración de tailwind, también debemos añadir la funcionalidad de JavaScript. Hay dos opciones:

Opción 1: Añadir esta línea en el HTML (recomendado en el <head>):

<script defer src="https://unpkg.com/[email protected]/dist/observer.min.js"></script>

Opción 2: Utilizar este código para cargarlo directamente en JavaScript.

import { Observer } from 'tailwindcss-intersect';

Observer.start();

Nota importante: Si usas un framework moderno (Astro, Next.js, SvelteKit), es altamente recomendable usar la Opción 2 (importar en JS). Asegúrate de que este script se ejecute solo en el lado del cliente (client-side), por ejemplo, en un tag <script> de Astro o dentro de un useEffect en React.

4. Clases para Animaciones

Para aplicar propiedades o animaciones con tailwind al desplazar, tenemos que usar el modificador intersect:.

<div class="bg-cyan-500 intersect:bg-indigo-600 transition-colors"></div>

Por ejemplo, aquí cada vez que nos desplacemos por el div se cambiará el color usando la transición predefinida de tailwind transition-colors.

Ahora, para mostraros lo siguiente hemos creado una animación muy simple con tailwind, que hace que los elementos se muevan hacia la derecha y aumenten su opacidad.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js}',
    './index.html',
  ],
  theme: {
    extend: {
      animation: {
        'slide-in-left': 'slide-in-left 1s ease-in-out forwards',
      },
      keyframes: {
        'slide-in-left': {
          '0%': {
            transform: 'translateX(-100%)',
            opacity: '0',
          },
          '100%': {
            transform: 'translateX(0)',
            opacity: '1',
          },
        },
      },
    },
  },
  plugins: [require('tailwindcss-intersect')],
}

Aplicamos la animación intersect:animate-slide-in-left con el modificador como hemos visto antes:

<div class="intersect:animate-slide-in-left opacity-0 bg-white p-6 rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold text-gray-800 mb-4">Hello, World!</h1>
  <p class="text-gray-600">This content slides in from the left when it enters the viewport. Enjoy the smooth
    animation!</p>
</div>

Todo esto se nos puede quedar corto si queremos hacer cosas más complejas. Así que este plugin nos proporciona más modificadores que nos pueden ser muy útiles.

intersect-once

Con intersect-once solo se aplicaría la animación en la primera aparición del elemento.

<div class="intersect:animate-slide-in-left intersect-once opacity-0 bg-white p-6 rounded-lg shadow-lg">
  <!-- ... -->
</div>

intersect-half

Con intersect-half se activará la animación cuando la mitad del elemento sea visible.

<div class="intersect:animate-slide-in-left intersect-half opacity-0 bg-white p-6 rounded-lg shadow-lg">
  <!-- ... -->
</div>

intersect-full

Con intersect-full se activará la animación cuando el elemento sea visible en su totalidad.

<div class="intersect:animate-slide-in-left intersect-full opacity-0 bg-white p-6 rounded-lg shadow-lg">
  <!-- ... -->
</div>

Consejos para Usar Scroll Animation con Tailwind

No abuses de las animaciones.
Aunque son visualmente atractivas, demasiadas animaciones pueden ralentizar tu sitio y distraer al usuario.
Prioriza el rendimiento.
La Intersection Observer API es muy eficiente, pero animar propiedades costosas como box-shadow o filter puede causar jank (saltos). Prefiere animar transform y opacity, ya que se gestionan en la compositor thread del navegador y no provocan reflow de la página.
Prueba en dispositivos reales.
Algunas animaciones pueden comportarse de manera diferente en dispositivos móviles. Asegúrate de probar tu diseño en varias resoluciones.
Usa repositorios públicos de animaciones.
Trata de ahorrarte trabajo y no escribir tus animaciones a mano. Hay múltiples recursos en internet para ello. Un ejemplo es este.
Consulta la documentación oficial.
Aprende más sobre Tailwind y sus plugins en Tailwind CSS Docs.

Recursos Útiles para Seguir Aprendiendo

Si quieres llevar tus habilidades al siguiente nivel, aquí tienes algunos recursos útiles:

Conclusión

Añadir scroll animation con Tailwind usando tailwindcss-intersect es una forma sencilla y efectiva de mejorar tus diseños web.

Este enfoque combina la potencia de la Intersection Observer API con la simplicidad de las clases de utilidad de Tailwind, permitiéndote crear efectos impresionantes con un mínimo esfuerzo.

Preguntas Frecuentes

¿Necesito JavaScript para las scroll animations con Tailwind?

No necesitas escribir JavaScript manualmente. Este tutorial usa el plugin tailwindcss-intersect, que gestiona la Intersection Observer API por ti. Solo necesitas instalarlo, configurarlo y usar las clases de utilidad como intersect:.

¿Cómo hago que la animación de scroll se ejecute solo una vez?

Puedes usar el modificador intersect-once que proporciona el plugin. Simplemente añade la clase intersect-once al elemento, además de tu clase de animación (ej: intersect:animate-slide-in-left intersect-once).

¿Puedo usar las animaciones predefinidas de Tailwind?

Sí. Puedes combinar el modificador intersect: con cualquier utilidad de Tailwind, incluidas las animaciones (como intersect:animate-pulse) o transiciones (como intersect:opacity-100 transition-all).

¿Qué diferencia hay entre intersect-half e intersect-full?

Indican cuánto del elemento debe estar visible para disparar la animación. intersect-half la activa cuando el 50% del elemento es visible, mientras que intersect-full espera a que el 100% del elemento esté en pantalla.

tailwind

Autor: Juan Carlos León

¿Cómo hacer una Scroll Animation con Tailwind?

¿Qué es una Scroll Animation y por qué usar Tailwind?

¿Qué es la Intersection Observer API?

Combinar la Intersection Observer API con Tailwind

Cómo configurar tailwindcss-intersect

1. Instalar tailwindcss-intersect

2. Configura Tailwind para usar el plugin

3. Añade la configuración de JavaScript

4. Clases para Animaciones

intersect-once

intersect-half

intersect-full

Consejos para Usar Scroll Animation con Tailwind

Recursos Útiles para Seguir Aprendiendo

Conclusión

Preguntas Frecuentes

Posts Relacionados

Cómo Integrar y Personalizar Tailwind CSS en Proyectos con Astro Framework

Guía Práctica de Accesibilidad Web WCAG: Implementación y Testing para Desarrolladores en 2025

Cómo Configurar tu Astro robots.txt Sin Errores (Estático vs. Integración)

Mejores prácticas para mejorar la Optimización de tu Página Web

Cómo Crear y Configurar un Sitemap en Astro para Mejorar tu SEO

Guía Full-Stack: CRUD Interactivo con HTMX, Bun.js y Elysia (con SQLite)