Cómo Hacer que el Desplazamiento del Sitio Sea Realmente Suave sin Romper la Accesibilidad

¿Alguna vez has visitado un sitio donde el desplazamiento se siente "meloso" o, por el contrario, demasiado brusco? A los diseñadores les encanta el desplazamiento suave porque añade un acabado pulido y una sensación premium a la interfaz. Pero para los desarrolladores, a menudo se convierte en una pesadilla: las bibliotecas estándar de desplazamiento suave frecuentemente rompen la navegación nativa, entran en conflicto con position: sticky, o hacen que el navegador sufra de bajas tasas de cuadros por segundo.

Hace poco me encontré con Lenis del equipo de darkroom.engineering. Estas personas abordaron el problema de manera diferente: en lugar de reemplazar completamente el comportamiento del navegador, crearon una capa ligera que funciona sobre el desplazamiento nativo.

¿Cuál es el Problema Principal con las Bibliotecas Regulares

La mayoría de las herramientas de desplazamiento suave simplemente "deshabilitan" el desplazamiento estándar e intentan imitarlo a través de transforms (transformaciones CSS). Esto causa que cosas como el enfoque con teclado, la búsqueda en la página (Cmd+F) y la funcionalidad del lector de pantalla se rompan.

Lenis (del latín — "suave") preserva el desplazamiento nativo. Esto significa que tu anchor links funcionará, y el navegador seguirá entendiendo exactamente dónde está el usuario en la página. Además, la biblioteca solo ocupa unos pocos kilobytes y no arrastra un montón de dependencias.

Qué Puede Hacer Lenis

La biblioteca aborda varios puntos débiles de los desarrolladores frontend de una vez.

Sincronización con WebGL y Animaciones

Si estás construyendo efectos complejos de parallax o vinculando el desplazamiento a un canvas (WebGL), necesitas una única fuente de verdad para la posición del desplazamiento. Lenis funciona perfectamente con GSAP ScrollTrigger. En mi experiencia, esta es la forma más estable de evitar que los elementos "tembloren" durante el desplazamiento rápido.

Trabajando con Cualquier Eje

Puedes configurar la suavidad para el desplazamiento vertical, horizontal o incluso anidado. Este último es especialmente agradable: a menudo necesitas que la página principal se desplace suavemente mientras algún bloque modal en su interior vive su propia vida.

Soporte de Frameworks

Aunque prefiero vanilla JS para cosas como esta, el proyecto tiene adaptadores oficiales para React, Vue e incluso Framer. Esto ahorra tiempo en pasar refs y gestión del ciclo de vida de los componentes.

Cómo Empezar

La instalación es estándar:

npm i lenis

La inicialización básica es tan simple como parece. Puedes habilitar el bucle de animación automático (autoRaf) para que no tengas que lidiar con requestAnimationFrame manualmente:

import Lenis from 'lenis'
import 'lenis/dist/lenis.css'

const lenis = new Lenis({
  autoRaf: true,
});

// Можно подписаться на события, если нужно обновлять свои анимации
lenis.on('scroll', (e) => {
  console.log('Текущая позиция:', e.scroll);
});

Si estás usando GSAP (y para sitios geniales, es el estándar de facto), la integración será un poco más compleja, pero más confiable:

const lenis = new Lenis();

lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});

gsap.ticker.lagSmoothing(0);

Detalles Finos y Limitaciones

A pesar de lo genial que es, Lenis tiene sus peculiaridades. Por ejemplo, en Safari, las actualizaciones de tasa de cuadros pueden estar limitadas a 60 FPS (o incluso 30 FPS en modo de bajo consumo), lo que a veces puede notarse en monitores de alta frecuencia de actualización.

Otra cosa — iframe. El desplazamiento dentro de iframes no será suave, ya que estos no propagan los eventos de rueda del ratón hacia afuera. Esta es una restricción de seguridad del navegador, y la biblioteca no puede hacer nada al respecto.

Si tienes elementos en tu página que deberían desplazarse normalmente (como un campo de texto o un menú desplegable), usa el atributo data-lenis-prevent. Esto te ahorrará un comportamiento extraño de la interfaz.

¿Vale la Pena Implementarlo

Si estás construyendo una landing page, portafolio o sitio promocional donde la estética importa — definitivamente sí. Lenis te da ese efecto "costoso" sin comprometer la accesibilidad.

Para dashboards pesados o paneles de administración con toneladas de tablas, probablemente me abstendría. Allí, una capa extra de abstracción sobre el desplazamiento solo puede interponerse en el camino de los usuarios que navegan rápidamente por los datos.

En general, es una de las herramientas más limpias y con mejor rendimiento en su clase hoy en día. Echa un vistazo a su Showcase — tiene ejemplos realmente impresionantes de cómo el desplazamiento ordinario se convierte en parte de la narrativa visual.