The Capture Motion blog
How real web animations are built, and how to copy, rebuild and ship them: CSS, React, Framer Motion, GSAP, easing and Figma Motion.
How-to
CSS animation to Figma Motion: move real timing into your design fileMove a CSS animation to Figma Motion with real timing, easing and keyframes. Capture it with Capture Motion instead of rebuilding it by eye.How to capture hover animationsHover animations vanish the moment you move to DevTools. How to force :hover, freeze the page, handle JavaScript mouseenter effects and capture the real motion.How to copy an animation from any websiteTwo ways to copy an animation from a website: read it by hand in Chrome DevTools, or capture its keyframes, timing and easing with the Capture Motion extension.How to find the easing curve of any animationFind the easing curve a site uses: the DevTools easing editor, getAnimations() and getKeyframes(), GSAP eases as cubic-bezier, and linear() springs.How to import a website animation into FigmaImport a website animation into Figma as an editable timeline: capture it with the Capture Motion extension, open it with the Figma plugin, edit and hand off.How to inspect CSS animations in Chrome DevToolsInspect CSS animations in Chrome DevTools: the Animations panel, 10% playback, scrubbing, the easing editor, forced :hover and getAnimations() in the console.
Components
Animated avatar stack: a hover fan-out in CSS and ReactOverlapping avatars that fan out and lift on hover with a staggered delay, plus a +3 counter. Live demo, CSS-only avatars, React code and timing values.Liquid tabs: an animated tab indicator that stretchesA tab indicator that stretches toward the new tab, then pulls its tail in. Live demo, CSS and a little JS, React, timing values and the FLIP alternative.Orbit animation in CSS: integration icons circling a logoBuild an integration orbit: icons circling a center logo on two rings at different speeds, kept upright, paused on hover. Live demo, CSS, React and timing.Slide to confirm: build the button in CSS and ReactA slide-to-confirm button with a draggable handle, a filling track and a snap-back spring. Live demo, plain HTML/CSS/JS, a React version and the timing that makes it feel right.
Comparisons
CSS animation vs Lottie: file size, performance and when to use eachCSS animation or Lottie? A neutral comparison of file size, performance, interactivity and tooling, with code for both and a simple rule for picking one.html.to.design alternative for animations: when you need the motion toohtml.to.design brings a web page into Figma as static layers. Capture Motion brings in how it moves. What each does, when to use which, and how to combine them.
Easing
CSS easing functions explained, with cubic-bezier valuesWhat ease, ease-in, ease-out and linear really do, how the four cubic-bezier numbers work, steps(), overshoot, named curves and which easing to use when.The CSS linear() easing function: springs and bounces without JavaScriptHow CSS linear() works, how it approximates spring and bounce easing, a hand-written bounce, a JS function that turns a spring into linear(), and fallbacks.
Tutorials
Convert CSS keyframes to Framer Motion (Motion for React)Map every part of a CSS @keyframes animation to Motion for React: keyframe arrays, times, duration, ease arrays, repeat and repeatType, with a worked example.Framer Motion stagger: animate a list in, then outStagger list items with Motion for React (formerly Framer Motion): variants, delayChildren with stagger(), exit with AnimatePresence and reduced motion.