Nesta aula eu mostro como refinar animações no Framer de forma sutil e controlada. Começo selecionando imagens e ajustando Styles (Point Events None e Draggable None) para evitar arrastar elementos. Em seguida aplico Effects > Appear com Slide (left) e ajusto Time e Delay para que os movimentos sejam lentos e discretos. Copio e colo esses efeitos em containers, mudo para Layering View quando necessário e redefino offsets para que elementos entrem de baixo para cima ou de cima para baixo conforme o design. Também desativo Replay para evitar que as animações disparem repetidamente ao rolar a página e testo com reload e tamanhos diferentes para garantir que nada quebre. Finalizo sequenciando animações com delays crescentes para criar um fluxo natural (menu, blocos e planos) e ajusto o Start/On Appear para que as animações só iniciem quando o usuário chegar na área desejada. Depois de todas as animações funcionando, parto para a parte de SEO. Dica prática: mantenha movimentos leves, teste em diferentes larguras e sempre verifique o Replay e os pontos de disparo para não atrapalhar a experiência do usuário. Termos técnicos: - Styles: configurações de estilo dos elementos. - Point Events None: desativa eventos de clique/arrasto naquele elemento. - Draggable None: impede que o elemento seja arrastado. - Effects > Appear / Slide: efeito de entrada do elemento (ex.: entrar da esquerda). - Delay / Time: tempo antes de iniciar e duração da animação. - Container: bloco que agrupa outros elementos. - Layering View / On Appear / Start: modo/posição de camada e gatilho de início da animação. - Replay: opção que faz a animação repetir ao rolar/visualizar. - Reload: recarregar a página/preview. - Framer: editor/plataforma usada para criar protótipos e animações. - SEO: otimização para mecanismos de busca.