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.

Note: Editing animations is exclusive to Motion One Pro subscribers. Features mentioned in this article will be disabled unless you're logged in.

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

Sign up to the Motion newsletter to stay up to date with the latest Motion One and Motion DevTools news.