16 de jan. de 2026
Quebre a Monotonia do Grid: A Era do Design Circular.
Estamos acostumados a alinhar tudo em grids quadrados e retangulares. Mas e se você pudesse fazer suas imagens, logos ou depoimentos girarem suavemente em uma órbita perfeita?
Animações circulares (ou orbitais) são a tendência do momento para criar hero sections dinâmicas, galerias de times interativas ou logo walls que fogem do comum.
Antigamente, fazer isso exigia cálculos trigonométricos e muito código CSS. No Framer, com o componente certo, você faz isso em segundos.
Neste tutorial, vou te ensinar a usar o Circle Animator para transformar elementos estáticos em experiências interativas fluídas. E, se você quer entender a fundo como funcionam loops infinitos, tenho um material extra especial para você neste post.
Começando com o Circle Animator
O segredo não é "hackear" a ferramenta, mas sim usar o componente Circle Animator. Ele é um "container" inteligente que organiza tudo o que você coloca dentro dele em um círculo perfeito.
Ao adicionar o componente ao seu projeto, você tem um controle imediato: o botão Preview. Você pode ligar ou desligar a animação enquanto edita, o que é essencial para posicionar outros elementos na tela sem ficar tonto vendo tudo girar enquanto trabalha.
Escolhendo o Modo: Imagens ou Componentes?
O componente oferece dois modos de operação, dependendo do que você precisa:
Modo Images: Perfeito para carrosséis de logos ou galerias de fotos simples. Basta fazer o upload.
Modo Components (O mais poderoso): Aqui você pode conectar qualquer componente que já criou no Framer.
Dica Pro: Use o modo Components para criar "cards" complexos (com foto, nome e cargo) e faça todos eles girarem em órbita. No painel, você encontrará a opção "Count" para definir quantos itens aparecerão no círculo.
Ajustando Tamanho e Raio (Radius)
Agora, vamos dar forma à órbita nas opções de Sizing.
Fixed vs. Fit: Decida se os elementos terão um tamanho fixo ou se adaptarão ao conteúdo.
Radius (Raio): Este é o controle mais importante. Ele define a distância do centro até os elementos.
Raio pequeno: Cria um círculo denso e dinâmico.
Raio grande: Cria uma sensação arejada, elegante e expansiva.
🎥 Quer Dominar a Lógica de Loops Infinitos?
Antes de falarmos sobre a velocidade, é importante entender como funcionam as animações de loop (aquelas que nunca acabam). Se você quer ir além deste componente e criar suas próprias animações manuais de loop no Framer, preparei um vídeo detalhado sobre isso.
No vídeo abaixo, eu mostro na prática como configurar loops perfeitos, uma técnica essencial para complementar o que estamos aprendendo aqui:
ASSISTA: Como Criar Animações de Loop Infinito no Framer (O vídeo já começa no ponto exato onde ensino a técnica!)
Controlando o Movimento e a Direção
De volta ao Circle Animator, a mágica acontece nos controles de Speed (Velocidade) e Direction.
Sentido Horário ou Anti-horário: Varie a direção para criar contraste visual.
Velocidade: Uma rotação lenta passa sofisticação e calma. Uma rotação rápida cria energia e urgência.
O Truque da Orientação (Para Seus Elementos Não Ficarem de Cabeça para Baixo)
Este é o ponto onde a maioria dos designers trava. Quando um elemento gira em círculo, ele deve girar junto ou ficar "em pé"?
Em Orientation, você decide:
Fixed (Fixo): Os elementos giram conforme orbitam (como a Terra girando ao redor do Sol). Ótimo para formas geométricas.
Pin (Alfinetado): Os elementos ficam sempre na vertical ("em pé") enquanto orbitam. Isso é obrigatório para fotos de pessoas ou textos, senão eles ficariam de cabeça para baixo na parte inferior do círculo.
Se você escolher Fixed, ainda pode brincar com o ângulo de rotação (Radial ou Tangente) para criar efeitos de galeria espiral.
Bônus: Pausa ao Passar o Mouse (Hover)
Para elevar a experiência do usuário (UX), ative a opção On Hover: Pause.
Isso faz com que a rotação pare suavemente quando o usuário passa o mouse sobre o círculo. É um detalhe sutil, mas que dá ao visitante a chance de ler o conteúdo ou clicar em um item específico sem ter que "caçar" o elemento em movimento.
Conclusão
O componente Circle Animator é a prova de que animações avançadas no Framer não precisam ser complexas. Em poucos minutos, você transforma uma lista estática de logos ou depoimentos em um elemento visual magnético.
Use essa técnica para:
Carrosséis de depoimentos (Social Proof).
Apresentação da equipe (Team Showcase).
Logo Wall interativo.
Menu de navegação criativo.
Abra seu Framer agora e comece a girar!
FAQ - Perguntas Frequentes
Esse efeito deixa o site pesado? Não. Animações nativas e componentes bem otimizados no Framer utilizam aceleração de hardware (GPU), garantindo que a animação seja fluida (60fps) sem travar o navegador do usuário.
Posso colocar links nos itens que estão girando? Sim! Se você usar o modo "Components", pode adicionar links (Link property) em cada componente individualmente. Lembre-se de ativar a opção "Pause on Hover" para facilitar o clique do usuário.
Como faço para os elementos não ficarem de cabeça para baixo? Certifique-se de definir a propriedade Orientation (Orientação) para Pin. Isso manterá seus elementos alinhados verticalmente durante toda a rotação.
