Motion DevTools can be used to inspect CSS and Motion One animations via a timeline interface.


When the Motion tab is first opened, Motion DevTools will automatically begin listening for 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 timelines.


Click the record button or interact with a timeline to stop recording.

Disabled record button


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

Playback controls

The playhead indicates the current progress of the animation. It can be dragged to scrub through the animation.


Keyboard shortcuts

  • Space: Toggle the playback of the currently inspected animation.
  • Shift & Space: Play the animation from the beginning.


Each animation keyframe is represented by this icon:


Click on a keyframe to open the edit keyframe panel.

Edit keyframe panel

Here, you can see the value and easing curve of this keyframe. If you're a Motion One Pro subscriber, this is where you can also edit the value of a keyframe.


The left-side of a timeline lists the elements and values used in the animation.

Element with values

The magnifying glass icon next to each element name can be clicked to jump to that element in Chrome's Elements panel.

Element names

Elements are displayed with their id attribute. If none is found, one will be generated using the element's tag name and its number.

Custom names can be provided via the data-motion-id attribute:

<button data-motion-id="Login button">Login</button>