Blog
Para quem já sabe o básico e quer ir fundo. Aqui o assunto é como os modelos funcionam em produção: memória, roteamento, ferramentas, agentes. O lado técnico que pouca gente explica direito.
Framer Motion (agora "Motion") v12: layout animations automáticas, gestures (drag, hover, tap), useScroll, useTransform, AnimatePresence, layoutId magic. Patterns de shared element transition entre rotas.
GSAP 100% gratuito desde maio/2024 (Webflow). Timeline orchestration, ScrollTrigger, Flip plugin (FLIP technique nativo), MorphSVG, MotionPath. Por que sites premium ainda escolhem GSAP em 2026.
Tudo que dá pra fazer com CSS puro em 2026: @keyframes, @starting-style, animation-composition, @scroll-timeline, @view-timeline, allow-discrete (display:none transitions). Quando CSS basta e você não precisa de JS.
View Transitions cross-document (Chrome 126+) e same-document. document.startViewTransition, view-transition-name, snapshots auto, customizar via ::view-transition-old/new. Integração Next.js, Astro, SvelteKit.
Animação ligada a scroll sem JS. animation-timeline: scroll(), view(), named timelines. Polyfill do Bramus para browsers antigos. Padrões: parallax, scroll-progress bar, reveal sequencial.
First, Last, Invert, Play (Paul Lewis, Google). Como animar mudança de DOM/layout (que normalmente bate em paint) usando transform invertido. Implementação manual, com Motion, com GSAP Flip. Casos: tabs, lists, cards reordering.
O que separa motion ruim de Apple-style: easing (cubic-bezier vs spring), duration hierarchy (300ms macro / 150ms micro), stagger sequences, principles de Disney (squash & stretch, anticipation). Material Motion / IBM Motion specs.
Quando motion mata FPS — composite-only properties (transform/opacity), will-change cuidado, GPU layers. A11y: prefers-reduced-motion (vestibular disorders), respeitar mesmo em animation libs. Lighthouse / DevTools Performance panel.