Timeline Lens

Visual inspector for GSAP, CSS, and Web Animations API animations on a page. Not affiliated with GreenSock/GSAP.

See every animation on a page - as scrubbable timelines you can pause, scrub, and inspect. Timeline Lens is a read-only visual debugger for front-end animations. Click the toolbar icon on any site and it scans the page for GSAP timelines, CSS animations, CSS transitions, and JS element.animate() calls (including animations authored with the Motion library), then lays them out as scrubbable tracks - just like GSAP's own GSDevTools, but engine-agnostic and built for pages you don't control. What it does: - Detects GSAP, CSS animations/transitions, Web Animations API calls, and Motion-authored animations in one merged view - Full transport controls - play, pause, scrub, and change playback speed on any animation, live - Hover a track to highlight its real DOM target on the page - Reconstructs completed or auto-removed animations so you can still scrub them after they finish - Recovers scroll-driven animations (ScrollTimeline/ViewTimeline), CSS transitions, and @media-scoped keyframes - Manual Scan/Rescan — nothing runs in the background, so it won't interfere with the page's own performance What it doesn't do: Nothing is created, edited, or exported by default. This is pure inspection of animations that already exist on the page — it doesn't write to the DOM, modify styles, or alter behavior. Free vs. Pro: Scanning and the timeline/track view are free. Upgrading unlocks the Properties panel (full animation details, easing, keyframes, triggers), the Code panel (recovered/reconstructed source), and JSON export of the detected animation tree. Not affiliated with or endorsed by GreenSock/GSAP.