Quick start

Contents

  1. Introduction
  2. Install
  3. Inspect
  4. Edit
  5. Export
  6. Conclusion

Introduction

Motion DevTools is a free, open source 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.

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

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

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.