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.
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!
Framer