Quick start

Introduction

Motion DevTools is a Chrome extension that helps you inspect, edit and export animations made with CSS and Motion One.

In this quick start guide, we'll install Motion DevTools, as well as inspect, edit and export our first animation.

Note: Inspecting is free for all users. Editing and exporting requires a Motion One Pro subscription.

Install

Motion DevTools is available via the Chrome Web Store.

With Motion DevTools installed, Chrome's developer tools will gain a new "Motion" tab.

Motion tab in Chrome DevTools

Chrome's developer tools can be opened either by right-clicking on a page and choosing "Inspect element", or via the View > Developer > Developer tools option in the main menu.

Inspect

When the Motion tab is opened, Motion DevTools will automatically begin listening for CSS and Motion One animations. This is indicated by the red record button.

Record button

While recording, reload or interact with the page to trigger animations. Detected animations will appear as a timeline.

Animations can be replayed using the playback controls. With these, we can start, pause and skip back to the beginning of an animation.

Playback controls

Click on a keyframe icon to open the Edit keyframe tool:

Keyframe

Here, you're able to inspect the value and easing of a keyframe.

Edit keyframe panel

Learn more about inspecting animations.

Edit

Note: Editing animations is exclusive to Motion One Pro subscribers. Features mentioned in this section will be disabled unless you're logged in.

If you're logged in, the Edit keyframe panel will also allow you to change the value and easing of a keyframe and see those changes reflected in real-time.

Additionally, you can add/move and remove keyframes from the timeline, and add entirely new values. Try moving a keyframe by dragging it:

Move keyframe button

Learn more about editing animations.

Export

Note: Exporting animations is exclusive to Motion One Pro subscribers. Features mentioned in this section will be disabled unless you're logged in.

The export panel is opened with the "Export" button at the bottom of the left-panel.

Export button

The export panel allows you to export code as a CSS animation, CSS transition, or Motion One animation. From here, you can copy/paste the relevant changes back into your original code.

Learn more about exporting animations.

Conclusion

In this guide we've seen a very brief overview about how Motion DevTools can be used to develop web animations. The individual inspect, edit and export pages have much more information about each set of features.

Sign up to the Motion One newsletter to stay up to date with the latest Motion One and Motion DevTools news.