● Lab 01 — Efeitos Base
Tudo que o Smooll
pode animar
24 efeitos pré-programados + controles completos de tempo, física e repetição.
Parâmetros disponíveis
Tudo que pode ser controlado direto na tag HTML, sem JavaScript.
| Tag | Tipo | Descrição | Exemplo |
|---|---|---|---|
| sm-animate | string | Nome do efeito pré-fabricado | "fade-up" |
| sm-duration | número (s) | Duração da animação em segundos | "1.5" |
| sm-delay | número (s) | Atraso antes de começar | "0.4" |
| sm-ease | string GSAP | Curva de física do movimento | "back.out(2)" |
| sm-repeat | número | Repetições (-1 = infinito) | "-1" |
| sm-yoyo | true/false | Vai e volta nas repetições | "true" |
| sm-stagger | número (s) | Cascata nos filhos diretos | "0.1" |
| sm-from-x | número (px) | Posição inicial X (sobrescreve efeito) | "200" |
| sm-from-y | número (px) | Posição inicial Y (sobrescreve efeito) | "-150" |
| sm-from-scale | número | Escala inicial (sobrescreve efeito) | "0.1" |
| sm-from-rotation | graus | Rotação inicial em graus | "360" |
| sm-from-opacity | 0–1 | Opacidade inicial | "0.2" |
| sm-trigger | "scroll" | Ativa ao entrar na tela | "scroll" |
Fades
Entrada com deslocamento + fade de opacidade.
fade-up
sm-animate="fade-up"
sm-duration="1"
sm-duration="1"
fade-down
sm-animate="fade-down"
fade-left
sm-animate="fade-left"
fade-right
sm-animate="fade-right"
fade-in
sm-animate="fade-in"
Zooms
Cresce ou diminui na entrada.
zoom-in
sm-animate="zoom-in"
sm-ease="back.out(2)"
sm-ease="back.out(2)"
zoom-out
sm-animate="zoom-out"
bounce-in
sm-animate="bounce-in"
sm-ease="back.out(3)"
sm-ease="back.out(3)"
Flips 3D
Rotação tridimensional na entrada.
flip-left
sm-animate="flip-left"
flip-right
sm-animate="flip-right"
flip-up
sm-animate="flip-up"
flip-down
sm-animate="flip-down"
Rotate
Gira ao entrar na tela.
rotate-in
sm-animate="rotate-in"
rotate-in-cw
sm-animate="rotate-in-cw"
Skew
Distorção angular na entrada.
skew-left
sm-animate="skew-left"
skew-right
sm-animate="skew-right"
Elástico
Mola e Bouncing na entrada.
elastic-up
sm-animate="elastic-up"
sm-ease="elastic.out(1,0.3)"
sm-ease="elastic.out(1,0.3)"
Reveal (Clip)
Revela como uma cortina.
reveal
sm-animate="reveal"
sm-duration="1.5"
sm-duration="1.5"
reveal-left
sm-animate="reveal-left"
reveal-right
sm-animate="reveal-right"
reveal-center
sm-animate="reveal-center"
Blur
Desfoque que resolve na entrada.
blur-in
sm-animate="blur-in"
blur-up
sm-animate="blur-up"
Personalizado via Tags
Sem preset — você define tudo diretamente no HTML.
from-x + rotation custom
sm-animate="fade-in"
sm-from-x="-200"
sm-from-rotation="45"
sm-ease="back.out(1.5)"
sm-from-x="-200"
sm-from-rotation="45"
sm-ease="back.out(1.5)"
repeat + yoyo infinito
sm-animate="zoom-in"
sm-repeat="-1"
sm-yoyo="true"
sm-duration="0.8"
sm-repeat="-1"
sm-yoyo="true"
sm-duration="0.8"
● Modo Scroll
Os mesmos efeitos,
ativados pelo Scroll
Basta adicionar sm-trigger="scroll" em qualquer tag. Role para baixo e veja a mágica acontecer.
↓
NOVO PARÂMETRO
sm-scroll-once
Controla se a animação se repete toda vez que o elemento entra na tela ou se toca somente uma vez. Role para baixo e faça o teste nos dois cards abaixo — depois suba e desça de novo.
Fades via Scroll
Cada card entra quando aparece na tela.
fade-up
sm-animate="fade-up"
sm-trigger="scroll"
sm-trigger="scroll"
fade-down
sm-animate="fade-down"
sm-trigger="scroll"
sm-trigger="scroll"
fade-left
sm-animate="fade-left"
sm-trigger="scroll"
sm-trigger="scroll"
fade-right
sm-animate="fade-right"
sm-trigger="scroll"
sm-trigger="scroll"
fade-in
sm-animate="fade-in"
sm-trigger="scroll"
sm-trigger="scroll"
Zooms via Scroll
zoom-in
sm-animate="zoom-in"
sm-trigger="scroll"
sm-ease="back.out(2)"
sm-trigger="scroll"
sm-ease="back.out(2)"
zoom-out
sm-animate="zoom-out"
sm-trigger="scroll"
sm-trigger="scroll"
bounce-in
sm-animate="bounce-in"
sm-trigger="scroll"
sm-ease="back.out(3)"
sm-trigger="scroll"
sm-ease="back.out(3)"
Flips 3D via Scroll
flip-left
sm-animate="flip-left"
sm-trigger="scroll"
sm-trigger="scroll"
flip-right
sm-animate="flip-right"
sm-trigger="scroll"
sm-trigger="scroll"
flip-up
sm-animate="flip-up"
sm-trigger="scroll"
sm-trigger="scroll"
flip-down
sm-animate="flip-down"
sm-trigger="scroll"
sm-trigger="scroll"
Rotate / Skew / Elástico via Scroll
rotate-in
sm-animate="rotate-in"
sm-trigger="scroll"
sm-trigger="scroll"
rotate-in-cw
sm-animate="rotate-in-cw"
sm-trigger="scroll"
sm-trigger="scroll"
skew-left
sm-animate="skew-left"
sm-trigger="scroll"
sm-trigger="scroll"
skew-right
sm-animate="skew-right"
sm-trigger="scroll"
sm-trigger="scroll"
elastic-up
sm-animate="elastic-up"
sm-trigger="scroll"
sm-trigger="scroll"
Reveal (Clip) via Scroll
reveal
sm-animate="reveal"
sm-trigger="scroll"
sm-duration="1.2"
sm-trigger="scroll"
sm-duration="1.2"
reveal-left
sm-animate="reveal-left"
sm-trigger="scroll"
sm-trigger="scroll"
reveal-right
sm-animate="reveal-right"
sm-trigger="scroll"
sm-trigger="scroll"
reveal-center
sm-animate="reveal-center"
sm-trigger="scroll"
sm-trigger="scroll"
Blur via Scroll
blur-in
sm-animate="blur-in"
sm-trigger="scroll"
sm-trigger="scroll"
blur-up
sm-animate="blur-up"
sm-trigger="scroll"
sm-trigger="scroll"