r/WebdevTutorials • u/Indy_dln • 5d ago
I built a scrubbable visual debugger for GSAP and CSS animations (free npm package)
Enable HLS to view with audio, or disable this notification
1
Upvotes
Hi everyone.
Today I'm launching Timeline Lens in Beta.
It's a free visual debugger that shows animations on your app/website during development as a scrubbable timeline track including GSAP, CSS keyframes/transitions, the Web Animations API, and (kinda!) Motion.
What it does:
- Detect - Finds every animation running on your page automatically, no setup needed — even ones that already finished and disappeared before you could catch them.
- Scrub - Play, pause, reverse, speed up or slow down, or drag through any animation like a video timeline. You're controlling the real thing, not a copy or a re-creation.
- Inspect - See what each animation is targeting, how long it runs, when it starts, and how it eases in and out — plus a readable version of the code that likely created it.
- Highlight - Hover over an animation and the exact element it's moving lights up on the page, so you always know what you're looking at.
It's a dev dependency and mounts behind a dev-only guard so doesn't ship to production.
I've also got a browser extension is in testing now.
Not affiliated with GreenSock/GSAP or Motion.
Give it a try live at timelinelens.com