Motion DevTools can be used to edit every part of an animation. Your changes will be reflected on the page in real-time.
Change a value name
Value names are editable input fields. Names can be in either CSS-style pipe-case or Motion One-style camelCase.
Add a new value
Next to every element name is a plus icon. Click it to add a new value.
Add a keyframe
Click outside an existing keyframe to insert a new keyframe into a value's animation.
Move a keyframe
Drag a keyframe to change its position in the timeline. Currently, keyframes are snapped to 0.05s increments.
Edit a keyframe
By clicking a keyframe:
The Edit Keyframe dialog will open.
Here, the value and easing of the keyframe can be changed.
Delete a keyframe
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.