Por que isso é importante

A rolagem da página deixou de ser apenas “mover o conteúdo”. Animações baseadas no scroll chamam atenção, captam usuários e transformam páginas comuns em experiências dinâmicas. Aprender a animar propriedades como border-radius, controlando a suavidade e o tempo do efeito, abre portas para interfaces modernas, engajadoras e preparadas para encantar ou vender. Quem domina GSAP + ScrollTrigger sai na frente no front-end de alto impacto.

Transforme o scroll em mágica visual

Você já quis que um elemento mudasse de forma, suavemente, à medida que a página é rolada? É hora de ir além dos botões e banners prontos. Com o GSAP ScrollTrigger, animar o border-radius de uma caixa é questão de poucos passos — mas com um efeito visual que ninguém da sua audiência vai ignorar.

⚠️Atenção

Só usar transições não basta. Sem controle via rolagem, a animação pode acontecer fora do tempo ou sem contexto para o usuário. Se vincular ao scroll, dá mais poder e previsibilidade ao movimento.

Como funciona: a lógica da animação

Você decide: quem vai animar? No exemplo clássico, escolha uma caixa (div). Defina um valor inicial — border-radius: 0px — e decida para onde ela vai. Aqui, queremos um efeito de transformação até border-radius: 80px, quase uma bolha. Quem faz o “meio de campo” é o GSAP, vinculando a animação ao quanto a página foi rolada, com total sincronia.

ℹ️Dica técnica

Use border-radius puro no GSAP. O corner-shape não precisa ser animado, deixe esse ajuste no CSS. O segredo real está no vínculo entre scroll e a propriedade animada.

Preparando o terreno: GSAP e ScrollTrigger

Antes de tudo, certifique-se de ter instalado o GSAP e o plugin ScrollTrigger. Ambos são necessários para a animação acontecer conforme o usuário navega. Sem eles, nada rola — literalmente.

Configuração do elemento a ser animado

O alvo é uma div – a “caixa” – com ID ou classe única para ser facilmente selecionada pelo GSAP. Defina as propriedades CSS iniciais, especialmente o border-radius em 0px e, se quiser, cor, tamanho e display para melhor visualização.

Configurando o GSAP: passo rápido, efeito marcante

No código GSAP, escolha a caixa certa. Diga ao GSAP: “Quero que o border-radius vá de 0px até 80px”. Em seguida, vem o detalhe: quando começa e quando termina a animação? Use `start: 'top top'` para começar no topo da página e `end: '+=2000'` para terminar 2000 pixels após a rolagem. Assim, você tem controle total sobre a faixa de disparo da animação.

Vincule o efeito ao ScrollTrigger

Toda mágica está aqui: o ScrollTrigger observa a posição do scroll da página e, de acordo com o quanto você já rolou, avança a animação do border-radius em tempo real. O segredo é ativar a opção `scrub` — se colocar `scrub: 2`, a animação acontece de maneira suave, acompanhando o scroll com um leve atraso controlado.

Pin: fixe o elemento à tela

O comando `pin: true` mantém a caixa fixa enquanto você rola a página nos pixels definidos pelo ScrollTrigger. Isso faz a animação acontecer de modo destacado, sem o elemento sumir logo ou perder o foco do usuário durante a rolagem.

O que acontece na prática?

Quando você começa a rolar, vê o border-radius da caixa aumentando gradualmente até virar quase uma bolha. No centro, pode aparecer um símbolo (como um “+”), trazendo ainda mais impacto visual. O efeito não é só bonito — é resposta clara a uma ação do usuário.

✅Experimente aí

Teste valores diferentes de border-radius (60, 80 ou até 100px) e perceba como o formato muda. Pequenos ajustes provocam grandes diferenças no efeito final.

Da inspiração ao próximo nível: criações possíveis

Que tal, após virar uma bolha, girar o símbolo ou disparar outra animação? O GSAP permite encadear timelines, rotacionar elementos, criar eventos secundários ao fim da animação e transformar interfaces antes monótonas em experiências que viralizam.

Evite erros comuns já na largada

O maior erro é não vincular claramente o início e fim do ScrollTrigger, fazendo com que a animação dispare antes da hora ou termine antes do esperado. Teste os parâmetros do start, end, scrub e pin até entender exatamente como cada um altera a experiência do usuário.

⚠️Cuidado

Se esquecer de importar o ScrollTrigger e registrar o plugin no GSAP, nada acontece. Sempre confira se ambos estão presentes no seu projeto, e evite tomadas de decisão por suposição.

Este efeito serve para sua aplicação?

Use scroll + border-radius quando quiser guiar o olhar do usuário ou reforçar o clique em uma interação, não só por estética. A animação pode indicar avanço, discovery (descoberta) ou até reforçar mensagens-chave em landing pages, e-commerce e plataformas com storytelling.

Como integrar com React e frameworks modernos

Em apps React, use gsap.context para evitar leaks e facilitar a desmontagem da animação ao sair da página. Monte o useEffect/import dinâmico e garanta que a caixa exista antes do GSAP iniciar — reatividade faz diferença.

ℹ️Atenção ao framework

Cada framework tem seu ciclo de vida. Não inicie a animação antes do elemento existir no DOM. No React, use refs. Em Vue, use hooks de montagem.

Aprofunde seu domínio: o que mais dá pra animar?

Com GSAP e ScrollTrigger, qualquer propriedade animável do CSS pode reagir à rolagem: cor, opacidade, tamanho, shadow, border, deslocamento, rotação e muito mais. O segredo está em experimentar, medir resultados e iterar.

Resumo para lembrar para sempre

Animação de border-radius no scroll, com GSAP + ScrollTrigger, é simples no código e gigante no impacto visual. Ajuste start, end, scrub e pin conforme o contexto e sempre vincule a ação ao desejo do usuário. Pequenos detalhes fazem sua interface saltar o nível.

Bônus: veja o efeito acontecendo ao vivo

Quer ver tudo isso em ação, com explicação em vídeo e exemplos práticos? Entre agora e confira mais tutoriais e desafios no canal Dev Doido no YouTube. Aprenda no detalhe e veja seu código ganhar vida!

✅Gostou? Pratique!

Nunca aprenda só na teoria. Implemente um exemplo agora mesmo e teste na sua página. Compartilhe resultados e dúvidas, e evolua do básico para criações hipnotizantes!

Como animar border-radius no scroll com GSAP ScrollTrigger