Motion Inspector

See what moves on any website, how it moves, and take the ease to After Effects.

Motion Inspector shows you how things move on a website, and takes that motion into After Effects. Turn it on and everything that has moved on the page gets an outline. Click one to see what it does in plain words ("slides up 36 px and fades in"), its ease as a curve, its timing and its values. Play it back on the page, slowed down if you like. With the free After Effects panel (Mac, After Effects 2024 or newer) one click builds it in After Effects: native shape and text layers with their keyframes and the same ease, rebuilt faithfully (gradients, shadows, borders, blend modes, frosted glass, styled text, pictures and video), with a picture of the original as a guide layer to check against. Things that don't rebuild as shapes go in as a picture of themselves with the real motion keyed on it. Or put just the ease on keyframes you've selected. Get the After Effects panel (pay what you want, from €0): https://motionidentitycourse.com/b/DOXCq What it reads: • CSS transitions and animations, Web Animations and SVG animations, exactly as the site wrote them • Script tweens from GSAP and Motion, measured frame by frame, shown only when they read cleanly • Lottie animations (download the file) and video It's strict on purpose: motion it can't read reliably (springs you set off, physics, things that follow the mouse, canvas) is left out instead of guessed. Nothing leaves your computer: no account, no tracking, no data sent anywhere. The only connection it makes is to the After Effects panel on your own machine. Early test version. Feedback welcome. Category: Developer Tools (or Productivity) Language: English