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>
Sign up to the Motion newsletter to stay up to date with the latest Motion One and Motion DevTools news.