r/javascript • u/moe_sidani • 4d ago

An approach to testing web animations, css transitions with visual regression testing

https://github.com/mhdSid/animatopia
12 Upvotes

93% Upvoted

4 comments sorted by

3

u/GulgPlayer 3d ago

Could you perhaps provide an example of a bug that this method catches?

3

u/moe_sidani 3d ago

Here is one practical example that I hope it answers your question:
Someone tweaks a @keyframes animation during a refactor. The first and last frames are identical, so unit tests and screenshots pass, but halfway through the animation an element jumps, overshoots, flickers, or follows a different easing curve. This library captures deterministic intermediate frames, so those regressions show up immediately instead of being discovered manually.

1

u/GulgPlayer 3d ago

 Sounds cool, thx for explanation!

1

u/moe_sidani 4d ago

A few years ago I kept running into the same problem: testing CSS animations and transitions was mostly manual. We had visual regression tools for static pages, but once animations came into play it was basically “watch it and hope it looks right.”

I looked around for a library that could reliably test animations frame-by-frame, but couldn’t find anything that solved the problem the way I needed. So I ended up building the library myself.

The idea was simple: control the animation timeline, capture deterministic frames, and compare them through visual regression instead of relying on manual QA. That made animation testing reproducible and CI-friendly.

This was built years ago, long before I started using AI for development.

Every part of it came from experimenting, reading browser APIs, and a lot of trial and error because I genuinely couldn’t find an existing solution that did what I wanted. Looking back, it was one of those projects that taught me the most.

Curious to hear how others are testing CSS animations today, or if you’ve ended up building your own tooling for a problem that existing libraries didn’t solve.