● v1.0 — Powered by GSAP

Animações
declarativas
para HTML

Adicione animações profissionais ao seu site.
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=1779306840932
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?v=1779306840932"></script> </body> </html>

Recursos

Tudo que o Smooll oferece

✦

Animações de Entrada

30 efeitos pré-programados. Fade, Zoom, Slide, Flip, Reveal, Bounce, Stretch, Drop 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
T

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

Novidades

6 novos efeitos

Cada card abaixo usa o próprio efeito que demonstra — rola a página e veja ao vivo.

Novo sm-animate="fade-up-left"

Diagonal da esquerda — ótimo para grids e listas em cascata.

ease: power3.out
Novo sm-animate="fade-up-right"

Diagonal da direita — variação simétrica para layouts balanceados.

ease: power3.out
Novo sm-animate="zoom-blur"

Zoom + desfoque. Sensação de foco cinematográfico ao revelar.

ease: power3.out
Novo sm-animate="drop"

Queda do alto com amortecimento. Leve bounce ao aterrissar.

ease: back.out(1.5)
Novo sm-animate="stretch-x"

Expansão horizontal — reveal pela escala do eixo X, da esquerda para direita.

ease: power4.out
Novo sm-animate="stretch-y"

Expansão vertical — reveal pela escala do eixo Y, de cima para baixo.

ease: power4.out

Passo a Passo

Como usar

1

Inclua o script no seu HTML

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

<script src="dist/smooll.min.js?v=1779306840932"></script>
2

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">
3

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

 sm-link="scale"

9. Transições

Transições de seção e página

Download

Escolha como usar

Via CDN

Forma mais simples. Inclua o link direto no HTML. Sempre na versão mais recente.

<script src="https://smooll.sanweb.com.br/dist/smooll.min.js?v=1779306840932"></script>

Download direto

Baixe o arquivo smooll.min.js?v=1779306840932 e hospede junto com seu projeto. Funciona offline e sem dependência externa.

↓ smooll.min.js?v=1779306840932

Inclua no final do <body> do seu HTML.