Animaciones al hacer scroll: añade movimiento sutil a las páginas de tu tienda

Actualizado en junio de 2026, las recomendaciones y el código con IntersectionObserver / reduced-motion que verás abajo son aplicables a PrestaShop 8 y 9 (Hummingbird y Classic). Las notas de accesibilidad reflejan la Ley Europea de Accesibilidad, ya en vigor.

Las animaciones al hacer scroll, elementos que aparecen con un fundido, se deslizan hacia arriba o hacen zoom hasta colocarse en su sitio cuando la página pasa por ellos, ocupan un lugar delicado para el propietario de una tienda. En una página de marca o en la página de inicio hacen que la tienda se perciba cuidada y viva; en una cuadrícula de productos o durante el proceso de pago añaden ese medio segundo de "¿dónde se ha ido mi botón?" que cuesta pedidos. La habilidad no está en saber cómo añadirlas. Está en saber dónde en una tienda PrestaShop se ganan su sitio, dónde erosionan conversiones en silencio y cómo incorporarlas sin arrastrar hacia abajo tu puntuación de PageSpeed. Esta guía trata precisamente de ese criterio aplicado a una tienda PrestaShop: qué plantillas, qué superficies del back office y qué presupuesto de rendimiento debes respetar.

Si tu objetivo real es conseguir que el código personalizado de front-end sobreviva a las actualizaciones del tema, ese es otro problema distinto (e importante): lo explicamos por separado en CSS y JavaScript personalizados en PrestaShop sin romper las actualizaciones. Aquí partimos de que ya has decidido que quieres movimiento y necesitas hacerlo bien.

Dónde encajan las animaciones al hacer scroll y dónde te cuestan pedidos

PrestaShop es una plataforma transaccional, no un sitio de portfolio. La regla honesta es esta: anima las páginas donde el visitante está explorando o dejándose convencer, nunca las páginas donde está comprando o comparando. Llevado a los controladores y plantillas reales que vas a editar:

¿Y qué significa esto para ti? La tentación es activar una biblioteca de "fundido para todo" en todo el tema y admirarla en tu ordenador de escritorio. El trabajo del propietario de la tienda es justo el contrario: limitar las animaciones a la página de inicio y a las plantillas CMS, y excluir explícitamente las plantillas donde los clientes deciden y pagan. Una cuadrícula de categorías que duda antes de mostrar los productos no parece premium: parece rota en una conexión lenta.

La comprobación imprescindible en móvil

Más de la mitad del tráfico de la mayoría de tiendas PrestaShop llega desde un teléfono, y ahí es exactamente donde las animaciones al hacer scroll se degradan. Lo que en un MacBook va como la seda puede ir a tirones en un Android de hace tres años. Prueba en hardware real de gama media, no en tu máquina de desarrollo, y trata el móvil como una razón para hacer menos, no como un escenario para lucirte. Los temas responsive de PrestaShop ya reorganizan mucho la página en pantallas pequeñas; añadir animaciones encima de ese reajuste es de donde nace el scroll entrecortado.

Tipos de animación que encajan en una tienda online

• Fundido de entrada. Opacidad 0 → 1. Es el efecto más seguro, adecuado para cualquier bloque de contenido. Si solo eliges uno, elige este.
• Deslizamiento hacia arriba. El elemento sube 20–30px mientras aparece con un fundido. Aporta un toque de profundidad; funciona bien para tarjetas de testimonios o de características en la página de inicio.
• Aparición escalonada. Cada elemento de una fila se anima un instante después del anterior, creando una cascada. Resérvalo para un bloque curado de la página de inicio, una fila "destacada" seleccionada a mano, nunca para la cuadrícula de categorías, donde solo ralentiza el escaneo.
• Parallax. El fondo se mueve a una velocidad distinta del primer plano. Puede resultar impactante en una única sección hero o de historia de marca, pero consume rendimiento y es una fuente frecuente de tirones en móvil. Una sección por página como máximo, y pruébala en un teléfono antes de publicarla.

Las reglas de diseño que lo mantienen sutil

La diferencia entre "premium" y "molesto" está por completo en los ajustes, no en la técnica:

• Sutileza. Si un visitante nota conscientemente la animación, es demasiado. Los elementos deben sentirse como si hubieran aparecido de forma natural, no como si estuvieran actuando.
• Velocidad. Entre 200 y 400ms está el punto ideal. Más rápido se siente ágil; más lento se siente pesado. Nunca superes los 600ms: nadie debería esperar a que tu página termine de moverse para poder leerla.
• Solo una vez. Anima un elemento la primera vez que entra en la ventana visible y después déjalo en paz. Reanimarlo cada vez que el cliente vuelve a subir es la forma más común de hacer que un efecto elegante parezca barato.
• Respeta las preferencias de movimiento. Algunos visitantes configuran prefers-reduced-motion a nivel del sistema operativo (a menudo por trastornos vestibulares). Respétalo, y ten en cuenta que las normas de accesibilidad de la UE esperan que tu tienda siga siendo plenamente utilizable para quienes lo hacen.

Rendimiento y accesibilidad: lo no negociable

Aquí es donde la mayoría de intentos caseros de animaciones al hacer scroll perjudican a una tienda PrestaShop en lugar de ayudarla. Dos realidades técnicas deciden si tu animación sale gratis o sale cara:

Anima solo opacity y transform. Estas dos propiedades se gestionan en el compositor del navegador: no obligan a la página a recalcular el layout, así que el hilo principal queda libre para todo lo demás. Animar width, height, top, left, margin o padding provoca un reajuste de layout en cada fotograma, y en una página de categoría de PrestaShop cargada de contenido ese es exactamente el tipo de coste que se nota como un tirón.

Usa Intersection Observer, nunca listeners del evento de scroll. Un window.addEventListener('scroll', ...) ingenuo se dispara decenas de veces por segundo y compite con los propios scripts de front-end de PrestaShop (el carrito, el ajax de búsqueda facetada, el carrusel). Intersection Observer solo se dispara cuando un elemento cruza realmente hacia la zona visible, lo que es correcto y barato a la vez.

En accesibilidad, el mínimo es este: nunca ocultes contenido esencial detrás de una animación que dependa de JavaScript; si un script falla, el contenido (y sobre todo el precio y el botón de compra) debe seguir estando ahí. No animes texto mientras un lector de pantalla pueda estar leyéndolo, y evita cualquier parpadeo o movimiento rápido. La Ley Europea de Accesibilidad trata las animaciones que bloquean o dificultan el acceso al contenido como un problema de cumplimiento, no como una cuestión de estilo.

Las dos reglas CSS que hacen el trabajo pesado

Un fundido de entrada correcto y ligero es sobre todo CSS: JavaScript solo añade una clase cuando el elemento entra en pantalla. El patrón siguiente anima únicamente opacity y transform, e incluye la protección prefers-reduced-motion que te mantiene del lado correcto de la accesibilidad. Es CSS puro, sin biblioteca:

/* hidden state: paint it, but offset and transparent */
.mpr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease;
}

/* JS adds .is-visible when the element scrolls into view */
.mpr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* respect the visitor's OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  .mpr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

Y el observer que activa la clase una sola vez y después deja de vigilar el elemento; fíjate en la llamada a unobserve, que es la forma de respetar la regla de "animar solo una vez" sin dejar listeners en ejecución:

const io = new IntersectionObserver((entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.mpr-reveal').forEach((el) => io.observe(el));

Publica ese JS como archivo externo registrado mediante el hook de assets de tu módulo, no como un <script> inline en una plantilla, por las razones que cubrimos en la guía de CSS/JS personalizados anterior. Limita la clase .mpr-reveal solo a la página de inicio y a las plantillas CMS, exactamente como lo mapea la tabla.

Tres formas de añadir animaciones al hacer scroll en PrestaShop

La primera ruta merece una advertencia que hace tropezar a la mayoría de comerciantes: si vas a editar archivos del tema para añadir el script y el CSS, hazlo en un tema hijo, o la siguiente actualización del tema borrará todo silenciosamente. Explicamos exactamente por qué y cómo en temas hijo en PrestaShop: por qué nunca deberías editar el tema padre. Y evita los pesos pesados: frameworks completos como GSAP o Anime.js añaden 30–60KB de JavaScript para capacidades que una tienda nunca va a usar; un fundido con deslizamiento básico no justifica ese peso en un sitio orientado al embudo de compra.

Hay una microinteracción relacionada que merece incluirse al mismo tiempo, porque pertenece a la misma familia de trabajo con Intersection Observer: un botón de volver arriba que aparece con un fundido cuando el visitante baja más allá del primer pantallazo. Es una de las pocas piezas de movimiento activado por scroll que se agradece en todas las páginas, porque elimina fricción en lugar de añadirla.

Dónde encaja el módulo Scroll Animations

Los ajustes de animaciones al desplazarse muestran un interruptor de activación, un desplegable de tipo de animación, campos de retardo y duración, y un campo de selectores CSS.

La ruta del módulo existe para el propietario de tienda que quiere que la página de inicio se sienta cuidada, pero no quiere bifurcar un tema ni escribir a mano código con Intersection Observer que se rompa en la siguiente actualización. Nuestro módulo Scroll Animations añade efectos configurables de fundido, deslizamiento y zoom a cualquier elemento desde el back office, construido sobre un IntersectionObserver nativo y sin dependencias externas, así que no arrastra un framework de 30KB a tus páginas. ¿Qué te aporta eso? Controlas la duración, el punto de activación y el efecto de cada elemento desde la administración en lugar de una factura de desarrollo; la lógica de animación vive en el módulo, no en tu tema, así que una actualización del tema no puede borrarla; y como se apoya en opacity y transform en el compositor, está pensado para mantener intacta tu puntuación de PageSpeed en lugar de gastarla.

Elijas la ruta que elijas, la disciplina es la misma, y es justo la parte que las guías caseras suelen saltarse: limita el movimiento a las páginas que persuaden, mantenlo fuera de las páginas que venden y de las páginas que cobran, anima solo opacidad y transform, y pruébalo en un teléfono real antes de darlo por terminado. Una animación al hacer scroll debe hacer que el visitante sienta que la página está viva, nunca obligarle a esperar a que se calme antes de poder comprar.

Preguntas frecuentes

¿En qué partes de una tienda PrestaShop es seguro usar animaciones al hacer scroll?

Anima las páginas donde el visitante está explorando o dejándose convencer: la página de inicio (con moderación) y páginas CMS como Sobre nosotros o un lookbook. Mantén el movimiento fuera de los listados de categorías, las páginas de producto y el proceso de pago, donde los clientes escanean, deciden y pagan. Una cuadrícula de categorías que duda antes de mostrar productos se percibe como rota, no como premium, y cualquier retraso en el proceso de pago pone en riesgo directamente el pedido.

¿Por qué todo el mundo insiste en IntersectionObserver en lugar de un listener de scroll?

Un listener del evento scroll se dispara decenas de veces por segundo y compite con los propios scripts de front-end de PrestaShop: el carrito, el ajax de búsqueda facetada, el carrusel. IntersectionObserver solo se dispara cuando un elemento cruza realmente hacia la zona visible, así que es correcto y barato a la vez. También hace trivial la regla de "animar una vez": llama a unobserve sobre el elemento después de revelarlo y el navegador deja de vigilarlo por completo.

¿Qué propiedades CSS son seguras para animar?

Solo opacity y transform. Ambas se gestionan en el compositor del navegador y no obligan a recalcular el layout, así que el hilo principal queda libre. Animar width, height, top, left, margin o padding provoca un reflow en cada fotograma, y en una página de categoría cargada de contenido ese es exactamente el coste que aparece como tirón.

¿Tengo que dar soporte a prefers-reduced-motion?

Sí, y es una sola media query, mostrada en el fragmento anterior. Algunos visitantes configuran prefers-reduced-motion: reduce a nivel del sistema operativo, a menudo por trastornos vestibulares. Respetarlo no es solo cortesía: la Ley Europea de Accesibilidad trata las animaciones que dificultan el acceso al contenido como un problema de cumplimiento. Dentro de esa media query, establece el elemento en su estado visible y sin transición para que aparezca al instante.

¿Es buena idea usar una biblioteca como AOS o GSAP?

AOS es una mejora rápida razonable si te sientes cómodo marcando elementos con data-aos en un tema hijo. Evita los pesos pesados: GSAP y Anime.js añaden 30–60KB de JavaScript para capacidades que una tienda nunca va a usar, y un fundido con deslizamiento básico no justifica ese peso en un sitio orientado al embudo de compra. El patrón vanilla con IntersectionObserver de arriba son unas pocas líneas y no tiene ningún coste de framework.

¿Perjudicarán las animaciones al hacer scroll mi puntuación de PageSpeed?

No tienen por qué. Hechas bien, animando solo opacity y transform, usando IntersectionObserver, limitando el efecto a un par de plantillas y evitando frameworks pesados. El coste es insignificante. Empiezan a perjudicar cuando activas una biblioteca de "fundido para todo" en todo el tema, animas propiedades que disparan layout o cargas un framework de animación de 30KB para un único fundido. Limita bien el alcance y prueba en un teléfono real de gama media.

¿Por qué mi animación va a tirones en teléfonos pero fluida en mi portátil?

Porque más de la mitad de tu tráfico está en móvil, y ahí es donde la animación se degrada. Un Android de hace tres años tiene mucho menos margen que tu máquina de desarrollo, y los temas responsive de PrestaShop ya reorganizan mucho la página en pantallas pequeñas; añadir animación encima de ese reajuste es de donde vienen los tirones. Trata el móvil como una razón para hacer menos: menos elementos animados, nada de parallax y verificación siempre en hardware real de gama media.

Guías relacionadas

• Botón de volver arriba: un pequeño detalle de UX que importa más de lo que parece
• CSS y JavaScript personalizados en PrestaShop sin romper las actualizaciones
• Temas hijo en PrestaShop: por qué nunca deberías editar el tema padre