Repolode
Enviar
darkroomengineering

darkroomengineering/lenis

Uma biblioteca leve e sem dependências para adicionar rolagem suave à web, com animação e aceleração gradual sobre a rolagem nativa.

Ver no GitHubSite
Estrelas
17,120
Forks
779
Issues abertas
33
Último commit
há 9 dias

O que é?

Lenis é uma biblioteca de rolagem suave para páginas web. Ela intercepta a entrada do mouse e do toque e anima a posição da rolagem em direção ao destino, deixando os sites com uma sensação mais fluida. Em vez de substituir a rolagem do navegador, ela funciona sobre ela, preservando recursos como position: sticky, links âncora e o comportamento de acessibilidade.

Com uma única instância, oferece rolagem vertical, horizontal e aninhada. Também disponibiliza eventos e um método raf por frame para manter cenas WebGL, GSAP ScrollTrigger e efeitos parallax sincronizados com a posição da rolagem. Há pacotes oficiais para React, Vue e Framer, além de um plugin snap separado para alinhar seções. As configurações incluem duração, easing ou lerp, suporte a movimento reduzido e exclusão de elementos específicos por meio de atributos data ou de um callback prevent.

Lenis pode ser instalado pelo npm ou carregado por um script de CDN para uso sem etapa de build. Entre as limitações conhecidas estão a falta de suporte a CSS scroll-snap, a impossibilidade de a rolagem suave atravessar iframes e o limite de 60 fps no Safari.

Recursos principais

  • 01Nenhuma dependência em runtime e bundle pequeno
  • 02Rolagem suave vertical, horizontal e aninhada em uma única instância
  • 03Preserva comportamentos nativos de rolagem, como position: sticky e links âncora
  • 04Sincroniza cenas WebGL, GSAP ScrollTrigger e efeitos parallax
  • 05Pacotes oficiais para React, Vue e Framer, além de um plugin snap

Casos de uso

  • Adicionar rolagem suave a sites de marketing ou portfólios
  • Sincronizar uma cena Three.js ou WebGL com a rolagem da página
  • Criar animações controladas pela rolagem com GSAP ScrollTrigger
  • Criar áreas de rolagem suave dentro de modais ou painéis aninhados

Início rápido

  1. 1

    Instale o Lenis com npm

    npm i lenis
  2. 2

    Importe o Lenis no seu código

    import Lenis from 'lenis'
  3. 3

    Crie uma instância com autoRaf ativado

Antes de usar

  • Você precisa integrar o Lenis ao seu próprio fluxo de rolagem e loop de animação, a menos que use autoRaf ou a configuração sem código.

Tópicos

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

Perguntas frequentes

O que é lenis?
Uma biblioteca leve e sem dependências para adicionar rolagem suave à web, com animação e aceleração gradual sobre a rolagem nativa. Lenis é uma biblioteca de rolagem suave para páginas web. Ela intercepta a entrada do mouse e do toque e anima a posição da rolagem em direção ao destino, deixando os sites com uma sensação mais fluida. Em vez de substituir a rolagem do navegador, ela funciona sobre ela, preservando recursos como position: sticky, links âncora e o comportamento de acessibilidade.
lenis é gratuito? Qual é a licença?
lenis é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
lenis ainda é mantido?
Manutenção ativa. O último commit de lenis foi em 29 de out. de 2026.
Para que posso usar lenis?
Adicionar rolagem suave a sites de marketing ou portfólios Sincronizar uma cena Three.js ou WebGL com a rolagem da página Criar animações controladas pela rolagem com GSAP ScrollTrigger Criar áreas de rolagem suave dentro de modais ou painéis aninhados
Como instalar lenis?
Instale o Lenis com npm: npm i lenis Importe o Lenis no seu código: import Lenis from 'lenis' Crie uma instância com autoRaf ativado
Onde consigo lenis?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/darkroomengineering/lenis

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados