[ BIBLIOTECA DE ANIMAÇÕES ]

15 animações de scroll. Com nome, preview e código.

Pare de pedir "uma animação legal". Escolhe pelo nome, copia a frase, o prompt e o código, e cola no Claude Code, no ChatGPT ou no Gemini. 5 são grátis. As outras 10 estão no Premium.

Entenda os 6 tipos de scroll →Ver as 10 do Premium

Grátis

Copia agora, sem cadastro.

01Scroll-triggeredGrátis

Cards que entram na hora certa

Cada card aparece quando chega na tela, um depois do outro. Rolando pra cima, eles saem do mesmo jeito.

Peça assim

Usa scroll-triggered nos cards: cada um entra de baixo (y 60 → 0, opacity 0 → 1) quando chega a 88% da tela, com stagger de 0.08s e power3.out.

02Scroll-linkedGrátis

Imagem que cresce com a rolagem

A seção trava e a imagem vai de card pequeno até a tela cheia, acompanhando o scroll quadro a quadro.

Peça assim

Usa scroll-linked com a seção presa: a imagem começa em scale 0.5 com cantos de 28px e chega à tela cheia acompanhando a rolagem (scrub 0.6).

03ParallaxGrátis

Parallax em três camadas

Fundo, título e fotos andando em velocidades diferentes no mesmo trecho de scroll. É isso que cria profundidade.

Peça assim

Usa parallax com 3 camadas no mesmo trecho de scroll: o fundo anda 16%, o título 120% e as fotos da frente até 320%.

04StickyGrátis

Título fixo, etapas passando

O título da esquerda fica parado enquanto as etapas da direita rolam. A etapa ativa acende e o contador muda.

Peça assim

Usa sticky no título da esquerda enquanto as etapas da direita passam; a etapa que cruza 55% da tela fica ativa e atualiza o contador.

05Horizontal scrollGrátis

Galeria que anda pro lado

A seção trava e a rolagem vertical vira deslocamento lateral da galeria. Acabou a galeria, a página volta ao normal.

Peça assim

Usa horizontal scroll: prende a seção e converte a rolagem vertical em translateX da fileira, com o curso do pin igual à largura que sobra.

Premium

O preview é aberto pra todo mundo. O prompt e o código liberam com o Premium.

06Scroll snapPremium

Cenas que encaixam

Cada rolagem termina no começo de uma cena de tela cheia. O texto entra depois do encaixe e os pontos mostram onde você está.

Peça assim

Usa scroll snap (scroll-snap-type: y mandatory) em seções de 100vh; o texto de cada cena entra só depois do encaixe e a foto faz um zoom-out ligado ao scroll.

07Scroll-triggeredPremium

Texto revelado linha por linha

Cada linha sobe de trás de uma máscara, uma de cada vez, com uma leve rotação que endireita no caminho.

Peça assim

Usa scroll-triggered com máscara por linha: cada linha sobe de yPercent 115 dentro de um overflow hidden, com expo.out em 1.1s e stagger de 0.09s.

08Scroll-linkedPremium

Janela que abre com clip-path

A imagem fica presa e uma janela recortada se abre até a tela cheia, enquanto a foto assenta do zoom.

Peça assim

Usa scroll-linked com clip-path: a imagem fica sticky e abre de inset(32% 38% round 20px) até a tela cheia, com a foto indo de scale 1.4 pra 1.

09StickyPremium

Cards empilhados

Um card gruda por cima do outro como um baralho. O de baixo encolhe e escurece quando o próximo chega.

Peça assim

Usa stacking cards: cada card é sticky com 18px a mais de offset e, quando o próximo sobe, o de baixo vai pra scale 0.92 e brightness 0.45.

10Scroll-linkedPremium

Hero que vira card

A foto em tela cheia do hero fecha até virar um card no meio da tela, enquanto o título some e os textos laterais aparecem.

Peça assim

Usa scroll-linked com o hero preso: a foto em tela cheia fecha num card central via clip-path inset(22% 34% round 24px) enquanto o título some.

11Scroll-linkedPremium

Texto que acende palavra por palavra

O parágrafo fica parado e cada palavra acende no ritmo da rolagem. Uma palavra-chave acende na cor de destaque.

Peça assim

Usa text fill scroll-linked: quebra o parágrafo em palavras e acende cada uma de opacity 0.14 pra 1 em sequência, com a seção sticky.

12Velocidade do scrollPremium

Marquee que acelera com o scroll

Três faixas de texto em loop que aceleram e inclinam quanto mais rápido você rola, e voltam ao normal quando você para.

Peça assim

Usa marquee com a velocidade do scroll: o loop acelera até 6x conforme o getVelocity() e inclina até 10° em skewX, voltando ao normal quando a rolagem para.

13Scroll-linkedPremium

Números que sobem com a rolagem

Os números contam de zero até o valor e as barras enchem junto, tudo amarrado ao scroll. Volta, e eles descem.

Peça assim

Usa um contador scroll-linked: os números sobem de 0 até o valor e as barras enchem junto, tudo numa timeline com scrub e a seção presa.

14StickyPremium

Cortina entre seções

Cada seção trava e a próxima sobe por cima dela como uma cortina, com cantos arredondados e sombra.

Peça assim

Usa cortina entre seções: cada seção trava com pinSpacing false e a próxima sobe por cima; a de baixo vai pra scale 0.88 e opacity 0.3.

15StickyPremium

Tela dividida com imagem fixa

A imagem da esquerda fica presa e troca por cross-fade a cada bloco de texto que passa à direita.

Peça assim

Usa split screen sticky: imagem presa à esquerda, textos passando à direita, e cross-fade ligado ao scroll entre as imagens a cada bloco.

Promptfly PremiumAcesso vitalício

As 10 animações Premium e todo o resto

R$ 129, pagamento único e acesso vitalício.

  • As 10 animações Premium com prompt e código
  • Mentoria pronta: o método do primeiro site ao primeiro cliente
  • Os prompts completos de todos os templates cinematográficos
  • As skills cinematográficas pro Claude Code
  • Grupo VIP no Discord
  • Pagamento via Hotmart, garantia de 7 dias
Quero o Premium →