Animações ao Scroll

Sistema de animações inspirado no estilo Apple, usando Intersection Observer para performance otimizada

Fade Up

Animação padrão do estilo Apple. Elemento surge de baixo com fade.

Card 1

Animação fade-up com delay de 100ms

Card 2

Animação fade-up com delay de 200ms

Card 3

Animação fade-up com delay de 300ms

Fade Down

Elemento surge de cima com fade.

Card 1

Animação fade-down com delay de 100ms

Card 2

Animação fade-down com delay de 200ms

Card 3

Animação fade-down com delay de 300ms

Fade Left & Right

Elementos surgem das laterais com fade.

← Fade Left

Surge da esquerda

Fade Right →

Surge da direita

Scale Up

Efeito de zoom in com fade. Ideal para cartões e imagens.

Card 1

Animação scale-up com delay de 100ms

Card 2

Animação scale-up com delay de 200ms

Card 3

Animação scale-up com delay de 300ms

Fade

Apenas fade in, sem movimento. Sutil e elegante.

Card com Fade Simples

Apenas aparece suavemente, sem movimento direcional

Blur Up

Efeito sofisticado com desfoque. Perfeito para títulos e destaques.

Card com Blur Up

Surge com efeito de desfoque para foco nítido

Como Usar

<!-- Uso básico -->
<ScrollAnimate type="fade-up">
  <div>Seu conteúdo aqui</div>
</ScrollAnimate>

<!-- Com delay e duração customizada -->
<ScrollAnimate
  type="scale-up"
  delay={200}
  duration={800}
>
  <Card>...</Card>
</ScrollAnimate>

<!-- Stagger effect (sequência) -->
{items.map((item, index) => (
  <ScrollAnimate type="fade-up" delay={index * 100}>
    <Card>{item}</Card>
  </ScrollAnimate>
))}

Tipos de Animação

fade-upFade in + slide up (padrão Apple)

fade-downFade in + slide down

fade-leftFade in + slide from left

fade-rightFade in + slide from right

fadeApenas fade in

scale-upFade in + scale from smaller

slide-upApenas slide up sem fade

blur-upBlur + fade + slide up