Contents
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.