Chrome extension · Figma plugin
Copy any animation from any website
Point at an element, play its animation, and get the real keyframes, timing and easing. Paste it as CSS or React, hand it to your AI assistant, or open it as a timeline in Figma.
No account needed to capture and preview.
Stop guessing durations in DevTools
DevTools shows you one property at a time, and only for CSS. Most of the animations you admire are a dozen tracks with their own delays and curves, often written in GSAP or the Web Animations API. Capture Motion records all of it in one pass.
Every track, with its timing
Transform, opacity, color, size and more, each with its own duration, delay and easing curve, exactly as the browser ran them.
CSS, GSAP, Lottie and WAAPI
Works with the libraries real sites use, not only CSS. Hover states are triggered for real, so hover animations come out right.
A preview you can replay
The element is rebuilt from what was captured, so you can scrub, replay and check it before you export anything.
Three steps
- Pick the element. Click the extension, then click the element whose animation you want: a button, a card, a hero, a menu.
- Play it. Scroll, hover or click so the animation runs. Capture Motion records every animated property while it plays.
- Export it. Copy it as CSS, React or GSAP code, as JSON or as an AI prompt, or paste it into the Figma plugin to keep designing.
Where the animation goes next
Into your code
A self-contained HTML file or a React component that plays the same motion, with the same curves. See animation to code.
Into Figma
The Figma plugin rebuilds the capture as a Figma Motion timeline, so designers can edit it with real numbers. See website animation to Figma.
Into your AI assistant
A prompt that carries the exact keyframes and timing, so Claude, ChatGPT or Cursor rebuild the motion instead of inventing one.
Learn the details
Questions
Is Capture Motion free?
Capturing and previewing animations is free and needs no account. A free account lets you copy and download captures; paid plans add more exports, edits and saved animations. See the pricing page for current limits.
Which animations can it capture?
CSS transitions and keyframe animations, the Web Animations API, GSAP and Lottie. Hover animations are captured with a real hover state, not a simulated one.
What do I get out of a capture?
The element's keyframes, durations, delays and easing curves, plus a rebuilt preview. Export it as CSS and HTML, a React component, JSON, a prompt for an AI coding assistant, or a timeline for the Capture Motion Figma plugin.
Does it read my browsing or upload my pages?
No. It only reads the element you pick, only when you start a capture, and the capture stays in your browser unless you save it to your account.
Is it legal to copy an animation from another website?
Timing and easing values are not protected the way artwork or code is, and studying them is how most motion designers learn. Rebuild with your own visuals and do not copy someone else's brand assets or source code wholesale.