Inspect

Contents

  1. Record
  2. Playback
  3. Keyframes
  4. Elements

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

Record

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.

Timeline

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

Disabled record button

Playback

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.

Scrubber

Keyboard shortcuts

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

Keyframes

Each animation keyframe is represented by this icon:

Keyframe

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.

Elements

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>