Repolode
Enviar
darkroomengineering

darkroomengineering/lenis

Una biblioteca ligera de desplazamiento suave para la web, sin dependencias, que añade movimiento animado y progresivo al desplazamiento nativo.

Ver en GitHubSitio web
Estrellas
17,138
Forks
778
Issues abiertos
33
Último commit
hace 9 días

¿Qué es?

Lenis es una biblioteca de desplazamiento suave para páginas web. Intercepta las entradas de rueda y táctiles, y anima la posición de desplazamiento hacia el destino para que los sitios se sientan más fluidos. Funciona envolviendo el desplazamiento propio del navegador, en lugar de sustituirlo, por lo que siguen funcionando `position: sticky`, los enlaces de anclaje y el comportamiento de accesibilidad.

Admite desplazamiento vertical, horizontal y anidado desde una sola instancia, y ofrece eventos y un método `raf` por fotograma para que las escenas de WebGL, GSAP ScrollTrigger y los efectos parallax puedan mantenerse sincronizados con la posición de desplazamiento. Los paquetes oficiales son compatibles con React, Vue y Framer, y hay un plugin snap independiente para alinear secciones. La configuración permite ajustar la duración, el easing o `lerp`, la gestión del movimiento reducido y las excepciones por elemento mediante atributos `data` o una función de callback `prevent`.

Lenis se puede instalar mediante npm o cargar desde un script CDN para usarlo sin proceso de compilación. Entre sus limitaciones conocidas están la falta de compatibilidad con CSS scroll-snap, que el desplazamiento suave no atraviesa iframes y un límite de 60 fps en Safari.

Funciones clave

  • 01Sin dependencias en tiempo de ejecución y con un tamaño de bundle reducido
  • 02Desplazamiento suave vertical, horizontal y anidado desde una sola instancia
  • 03Mantiene comportamientos de desplazamiento nativos, como `position: sticky` y los enlaces de anclaje
  • 04Se sincroniza con escenas de WebGL, GSAP ScrollTrigger y efectos parallax
  • 05Paquetes oficiales para React, Vue y Framer, además de un plugin snap

Casos de uso

  • Añadir desplazamiento suave a sitios web de marketing o portafolios
  • Sincronizar una escena de Three.js o WebGL con el desplazamiento de la página
  • Crear animaciones controladas por el desplazamiento con GSAP ScrollTrigger
  • Crear contenedores de desplazamiento suave dentro de modales o paneles anidados

Inicio rápido

  1. 1

    Instala Lenis con npm

    npm i lenis
  2. 2

    Importa Lenis en tu código

    import Lenis from 'lenis'
  3. 3

    Crea una instancia con autoRaf activado

Antes de usarlo

  • Debes integrar Lenis en tu propio desplazamiento y bucle de animación, a menos que uses autoRaf o la configuración sin código.

Temas

#smooth-scroll#javascript#typescript#animation#scroll#react#vue#webgl#darkroom-engineering#performance

Preguntas frecuentes

¿Qué es lenis?
Una biblioteca ligera de desplazamiento suave para la web, sin dependencias, que añade movimiento animado y progresivo al desplazamiento nativo. Lenis es una biblioteca de desplazamiento suave para páginas web. Intercepta las entradas de rueda y táctiles, y anima la posición de desplazamiento hacia el destino para que los sitios se sientan más fluidos. Funciona envolviendo el desplazamiento propio del navegador, en lugar de sustituirlo, por lo que siguen funcionando `position: sticky`, los enlaces de anclaje y el comportamiento de accesibilidad.
¿lenis es gratuito? ¿Qué licencia tiene?
lenis es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿lenis sigue mantenido?
Mantenimiento activo. El último commit de lenis fue el 29 oct 2026.
¿Para qué puedo usar lenis?
Añadir desplazamiento suave a sitios web de marketing o portafolios Sincronizar una escena de Three.js o WebGL con el desplazamiento de la página Crear animaciones controladas por el desplazamiento con GSAP ScrollTrigger Crear contenedores de desplazamiento suave dentro de modales o paneles anidados
¿Cómo se instala lenis?
Instala Lenis con npm: npm i lenis Importa Lenis en tu código: import Lenis from 'lenis' Crea una instancia con autoRaf activado
¿Dónde consigo lenis?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/darkroomengineering/lenis

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados