Tuning and reduced motion as previews
Tuning dials and the Reduced Motion button change what you see, not the animation, until you apply or start editing.
Two controls in EaseKit are previews: the Tuning dials in Refine and the Reduced Motion button in the transport bar. They sit on top of the real animation and change how it plays, without touching its keyframes. That makes them safe to explore, and it explains what happens when you start editing while one is on.
Tuning
The four dials are multipliers on the whole animation:
| Dial | Range | Default | Scales |
|---|---|---|---|
| Speed | 0.5× to 2× | 1× | The overall tempo |
| Stagger | 0× to 3× | 1× | Delays between elements |
| Bounce | 0× to 2.5× | 1× | Spring overshoot |
| Distance | 0.25× to 2.5× | 1× | How far things travel |
While any dial is off 1×, the Tuning panel shows Reset and Apply, and the score next to its title reflects the tuned result. Apply saves the tuned animation as a new version (origin Tempo).
Reduced Motion
The Reduced Motion button previews the variant people see with Reduce Motion on in macOS or iOS: the end state stays the same, only the way there gets calmer. Opacity and color changes stay; travel, scale and bounce shrink.
What happens when you edit
Editing always lands on the real animation, never on a preview. So instead of refusing your edit, EaseKit ends the preview first:
| Preview on | You start editing | EaseKit |
|---|---|---|
| Reduced Motion | Drag, type, change a value | Switches the preview off and says “Reduced Motion preview is off while you edit” |
| Tuning (not applied) | Drag, type, change a value | Bakes the tuning into your draft as one undo step, Apply Tuning, resets the dials, and says “Tuning applied to the draft — undo brings it back” |
Your edit then lands on exactly what you saw. Press ⌘Z once to undo your edit, and again to undo the baked tuning.
Why previews instead of edits
- You can compare quickly: drag a dial back to 1× and the original is there.
- The quality score updates live, so you see if a faster tempo breaks readability before you commit.
- Exports respect reduced motion on their own: React, Web Animations, CSS, HTML and SwiftUI all check the viewer's setting, so you rarely need a separate reduced version.