Media
1 item
Description
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 visual inspection tool 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 do and 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. 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 vs. NPM: Scanning and the timeline/track view are free in the extension. 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. The NPM package has all the features for inspecting your sites for free including properties, HTML/CSS/JS and animations code export. See our website https://timelinelens.com for details. *Limitations: Timeline Lens reads GSAP animations directly off window.gsap, so on sites that bundle GSAP as a module (common with modern frameworks) without exposing it globally, full GSAP detail may not be available - you may see a "GSAP detected" note without a scrubbable list, you may see nothing at all. CSS animations, transitions, and element.animate() calls are unaffected by this and detect reliably on any site via the browser's Web Animations API. Scanning is manual (click Scan/Rescan) rather than continuous, so animations that finish before you scan won't appear. Timeline Lens is strictly read-only and is primarily a debugging tool for your own websites hosted on eg localhost in developer mode. We recommend using the free NPM package on your own sites. For more information, visit https://timelinelens.com Not affiliated with or endorsed by GreenSock/GSAP.