Motion Developer Tools alpha

[mattgperry]

Hi everyone!

I want to share something I've been working on the last couple months thats now ready for some first eyes - Motion Developer Tools!

This is a browser dev tools extension, currently for Chrome but in the medium term I'd like to extend to Safari, Edge and Firefox too.

Once installed, you'll get a new tab in the developer tools window called Motion

When you press record, the panel will start listening for any Motion One animations generated by the page. These will then appear in tabs, currently with auto-generated names. You can see in this video we've recorded an animation with a .5 second delay, duration of 1 second and it repeats 1 time:

Screen.Recording.2022-03-14.at.17.12.08.mov

With this interface you can tab between all the recorded animations, scrub and play them back, and inspect individual keyframes.

When you inspect a keyframe, a dialog opens:

From here, you can inspect and edit values in real time. As you change them, they update on the page:

Screen.Recording.2022-03-14.at.17.35.43.mov

This lets you tweak animations with a much faster feedback loop than ever before.

Motion Developer Tools is still an alpha. I have a long, long roadmap of features and QoL improvements in the pipeline and there's a couple major known bugs, notably:

• Easing updates don't have any effect
• Spring/glide/steps are unsupported
• First recorded animation doesn't play on website (because its automatically selected and placed straight into editing mode)

However, if you're interested to play around already, you can check out the feautre/dev-tools branch, visit chrome://extensions/ and, with developer mode enabled, load packages/devtools/app with the "Load unpacked" option. It'd be great to hear what things people run into and what features you'd like to see.

The idea is for this to go into Early Access in the next few weeks via the Chrome store. This milestone will be a polished version of the existing feature set, plus sponsor authentication via motion.dev.