Inspect

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.

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.

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.

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.

Keyframes

Each animation keyframe is represented by this icon:

Click on a keyframe to open the 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.

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>