Features

Animações Framework

4 camadas: Reveal (scroll trigger) - Timed (one-shot) - Loop (infinito) - Micro (hover). Clique nos demos para repetir.

1. Reveal - Scroll Trigger

Elementos entram na tela ao serem detectados pelo scroll via IntersectionObserver. Adicione class="reveal-*" - o Y2 observa automaticamente.

.reveal-up
.reveal-down
.reveal-left
.reveal-right
.reveal-in
.reveal-out
.reveal-blur

Velocidade + Delay

.spd-f
0.25s
base
0.55s
.spd-s
0.9s
.spd-xs
1.6s
.dly-1
0.1s delay
.dly-3
0.3s delay
.dly-5
0.5s delay
.dly-8
1.2s delay

2. Timed - One-Shot

Roda uma vez. Ideal para modais, popups e notificações. Clique para repetir.

Direção

.ani-fade
.ani-up
.ani-down
.ani-left
.ani-right
.ani-in
.ani-out
.ani-flip
.ani-drop

Velocidade (aplica em qualquer ani-*)

.spd-f
0.25s fast
base
0.55s
.spd-s
0.9s slow
.spd-xs
1.6s

2b. Timed Avançado - 11 modelos exclusivos

Clip-path, 3D perspectiva, skew, roll, pop spring e mais. Clique para repetir.

Clip-path Wipes (revela direcional sem fade)

.ani-wipe-l
wipe
.ani-wipe-r
wipe
.ani-wipe-t
wipe
.ani-wipe-b
wipe

3D Perspectiva

.ani-3d-l
rotateY -90°
.ani-3d-r
rotateY +90°
.ani-3d-t
rotateX 80°

Skew + Roll + Pop + Swing

.ani-skew-l
inclina entrada
.ani-skew-r
inclina entrada
.ani-roll
gira + desliza
.ani-pop
spring overshoot
.ani-zoom-blur
zoom + desfoca
.ani-swing
p�ndulo

3. Loop - Animação Infinita

Anima continuamente. Ideal para ícones, loaders e decorações.

Loop Clássicos (10)

.loop-spin
.loop-spin-r
reverso
.loop-pulse
.loop-float
flutua
.loop-float-r
flutua
.loop-fade
pisca
.loop-shake
.loop-bounce
.loop-glow
brilho pulsante
.loop-flicker
efeito neon

Loop Avançados (6)

.loop-breathe
respira suave
.loop-swing
pêndulo
.loop-jello
elástico jello
.loop-hbeat
batimento
.loop-rubber
rubber band
.loop-wave
onda diagonal

4. Micro - Hover

Interações de hover via transform e filter. Sem JS. Passe o mouse.

Movimento

.hov-up
.hov-down
.hov-left
.hov-right
.hov-in
.hov-out
.hov-lift
sobe + sombra

Filtros

.hov-bright
.hov-dim
.hov-sat
.hov-glow

Animações no hover

.hov-shake
.hov-tada
.hov-pulse
.hov-bounce

Hover Avançados

.hov-flip
rotateY 180
.hov-skew
skewX
.hov-jello
jello
.hov-rubber
rubber band
.hov-roll
gira + desliza

Scroll Mount/Unmount

Sistema bidirecional: elementos montam ao entrar na viewport e desmontam ao sair. Use y2anime-mnt combinado com class="reveal-*".

Ver demo completo do Scroll

5. Delays - .dly-1 a .dly-9

Funciona com reveal, timed e loop. Clique "Replay" para ver a cascata.

.dly-1
0.1s
.dly-2
0.2s
.dly-3
0.3s
.dly-4
0.4s
.dly-5
0.5s
.dly-6
0.7s
.dly-7
0.9s
.dly-8
1.2s
.dly-9
1.6s

6. Variveis CSS

Override no seu :root para ajustar todo o sistema de animações.