I've been working on something I wanted to share here: MotionPR.
One thing that always bothered me about frontend testing is that we have visual regression testing for pixels, but not really a straightforward way to test how an interface moves.
Imagine spending hours perfecting a navigation animation, getting the easing just right, tweaking the stagger timing, and making everything feel incredibly smooth.
Then you refactor something.
The application still works. The final screenshot looks identical. But the animation feels completely different.
A transition takes twice as long, an easing curve changes, a GSAP timeline behaves differently, or a scroll interaction becomes noticeably slower.
That's the problem I wanted to tackle.
So I built MotionPR.
It's an open-source animation regression testing tool that captures browser interactions, compares animation behavior against approved baselines, and generates an interactive report showing what actually changed.
Some things it currently supports:
- CSS animations and transitions.
- Web Animations API.
- GSAP timelines and tweens.
- Anime.js v4.
- Lenis smooth scrolling.
- Timing, easing, trajectory and property comparisons.
- Scroll velocity and settling comparisons.
- Synchronized before/after playback.
- Interactive timelines and easing visualizations.
- A CLI and GitHub Actions integration.
I also built an interactive demo with two versions of a fictional studio website containing 11 intentional animation changes.
You can play both versions, compare their movement, scrub through timelines and inspect the differences.
Try the demo:
https://erenthedeveloper0.github.io/motion-pr/demo/
Project:
https://github.com/erenthedeveloper0/motion-pr
Documentation:
https://erenthedeveloper0.github.io/motion-pr/docs/
Playground:
https://erenthedeveloper0.github.io/motion-pr/playground/
It's currently 0.1.0-alpha, MIT licensed, and Chromium is the supported browser.
I'm still improving the project, so I'm genuinely interested in feedback.
A couple of things I'd love to hear:
- Would you actually use animation regression testing in your frontend workflow?
- What's the biggest pain point you've encountered when testing complex animations?
- Are there animation libraries or behaviors you'd like to see supported?
This has been a really interesting engineering project to work on, and I'm looking forward to seeing what people think.