Motion DevTools

Motion DevTools

Inspect, edit, export.

4.3
4 reviews

24 followers

Motion DevTools is a Chrome extension that speeds up your animation design and development. Use a classic timeline interface to inspect, edit and export animations made with CSS or Motion One.
Motion DevTools gallery image
Motion DevTools gallery image
Motion DevTools gallery image
Motion DevTools gallery image
Motion DevTools gallery image
Free Options
Launch Team

What do you think? …

Maciej Ziółkowski
At last the tool tailored for web animations. Any integration / seamless import with / to Framer planned?
Matt Perry
@maciejziolkowski No but I think it'd be cool to get a timeline into Framer in the future!
Matt Perry
Hi Product Hunt, I'm Matt, creator of Framer Motion, Motion One and now: Motion DevTools! With Motion DevTools, I'm making the Chrome extension I've always wanted to use. Typically, developing animations with CSS or JavaScript animation libraries like Motion One is a cycle of bouncing between your code editor and browser, refreshing > editing > refreshing and so on. With Motion DevTools, you can inspect and edit your animations, live on your website. Scrub through and replay to your heart's content. Edit values and easings; add, move and remove keyframes. When you're happy with your new animation, export straight back into code. Iteration has never been faster, or more fun! I'm hoping to bring back some of that Flash playfulness to web animation. This is just the start, with a long roadmap of features and UX upgrades on the horizon. I know what I want to see next, but I'd love to hear what features you want in this tool!
Omar Duarte
@mattgperry Hi Matt! We use motion extensively Acapela (fellow product launching today)! Everyone in our team is super happy to see this. Great stuff you've built <3
Christoph Paterok
Wow! That's an amazing product in my opinion. Looking forward to test it out and understand css animation more than now. 🙂 Good luck with your launch!