Motion DevTools can be used to edit every part of an animation. Your changes will be reflected on the page in real-time.
Value names are editable input fields. Names can be in either CSS-style pipe-case or Motion One-style camelCase.
Next to every element name is a plus icon. Click it to add a new value.
Click outside an existing keyframe to insert a new keyframe into a value's animation.
Drag a keyframe to change its position in the timeline. Currently, keyframes are snapped to 0.05s increments.
By clicking a keyframe:
The Edit Keyframe dialog will open.
Here, the value and easing of the keyframe can be changed.
Keyframes can be deleted by opening the Edit Keyframe panel and pressing the "Delete keyframe" button.
Sign up to the Motion newsletter to stay up to date with the latest Motion One and Motion DevTools news.