Edit

Contents

  1. Change a value name
  2. Add a new value
  3. Add a keyframe
  4. Move a keyframe
  5. Edit a keyframe
  6. Delete a keyframe

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.

Change value dialog

Add a new value

Next to every element name is a plus icon. Click it to add a new value.

New value dialog

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.

Move keyframe button

Edit a keyframe

By clicking a keyframe:

Keyframe

The Edit Keyframe dialog will open.

Edit keyframe panel

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.

Delete keyframe button