● v1.0 — Powered by GSAP

Animações
declarativas
para HTML

Adicione animações profissionais ao seu site com atributos HTML.
Zero JavaScript necessário. Só um <script>.

Começar agora ↓ Download

Laboratórios: 1. Básicos 2. Stagger 3. Scroll 4. Vídeo 5. Texto 6. SVG 7. UI 8. Premium 9. Transições

Scroll

Quick Start

Um script. Pronto.

Inclua o Smooll no seu HTML e comece a animar com atributos. Funciona em qualquer página estática ou servidor.

Link CDN

https://smooll.sanweb.com.br/dist/smooll.min.js?v=1777061260862

exemplo-basico.html

<!DOCTYPE html>
<html>
<body>

  <!-- Qualquer elemento com sm-animate já anima no load -->
  <h1 sm-animate="fade-up">Olá Mundo</h1>
  <p  sm-animate="fade-up" sm-delay="0.2">Subtítulo</p>

  <!-- Ativa quando entrar na tela (scroll) -->
  <div sm-animate="slide-right" sm-trigger="scroll">Card</div>

  <!-- Transição de página entre links -->
  <a href="outra-pagina.html" sm-link="fade">Navegar</a>

  <!-- Inclua ao final do body -->
  <script src="dist/smooll.min.js"></script>

</body>
</html>

Recursos

Tudo que o Smooll oferece

✦

Animações de Entrada

24 efeitos pré-programados. Fade, Zoom, Slide, Flip, Reveal, Bounce, Elastic e mais.

sm-animate sm-delay sm-duration

⟳

Ativação por Scroll

Elementos animam quando entram na viewport. Controle início, fim e sensibilidade.

sm-trigger="scroll" sm-scroll-start sm-batch

▶

Video Scrub

O tempo de um vídeo é controlado pelo scroll da página. Efeito cinematográfico com um atributo.

sm-video-scrub sm-scroll-pin sm-scroll-scrub

Texto Animado

Split por letras/palavras, efeito Scramble e Typewriter. Tudo declarativo.

sm-split sm-scramble sm-typewriter

⬡

Transições de Página

PJAX integrado. Navegue entre páginas com fade, slide, wipe, flip e scale.

sm-link="fade" sm-link="wipe" sm-link="flip"

◎

Premium UI

Cursor customizado, campos magnéticos, tilt 3D e marquee infinito.

sm-cursor sm-magnetic sm-hover-tilt

Passo a Passo

Como usar

Inclua o script no seu HTML

Coloque o script ao final do <body>. Ele carrega GSAP automaticamente — nenhuma outra dependência necessária.

Adicione atributos nos elementos

Coloque sm-animate em qualquer elemento HTML. O Smooll detecta e anima automaticamente no carregamento.

<h1 sm-animate="fade-up" sm-delay="0.2">Título</h1>
                                    <p sm-animate="fade-up" sm-delay="0.4">Parágrafo</p>
                                    <img sm-animate="zoom-in" sm-trigger="scroll">
                                

Para transições de página

Envolva o conteúdo em uma <main id="smooll-view"> e adicione sm-link nos seus links.

<main id="smooll-view">
  <!-- conteúdo da página -->
</main>

<a href="pagina2.html" sm-link="fade">Ir para página 2</a>
<a href="pagina3.html" sm-link="slide">Ir para página 3</a>

Laboratórios

Veja em ação

Cada lab demonstra um conjunto de recursos com exemplos reais e código.

sm-link="fade"

1. Básicos

Fades, Zooms e Flips

sm-link="slide"

2. Stagger

Animações em cascata

sm-link="slide-right"

3. Scroll

Ativação por scroll

sm-link="slide-up"

4. Video Scrub

Vídeo controlado pelo scroll

sm-link="scale"

5. Texto

Split, Scramble, Typewriter

sm-link="wipe"

6. SVG

DrawSVG e Motion Path

sm-link="flip"

7. UI

Drag, Flip, Observer

sm-link="slide"

8. Premium

Cursor, Magnetic, Marquee