EaseKitDocs
Stage and timeline · Tuning and reduced motion
Documentation

Tuning and reduced motion

Scale speed, stagger, bounce and distance live, and preview the reduced-motion version.

Tuning is the fastest way to adjust the feel of a whole animation without touching keyframes: four dials scale the real animation, and the score updates as you drag. The reduced-motion preview shows what people with Reduce Motion turned on will see.

Reshaping a curve in the curve editor, then dragging the Bounce and Speed dials

Tuning dials

Open Refine (⌥⌘4). The Tuning module has four dials, each a multiplier on the real animation:

DialRangeDefaultWhat it changes
Speed0.5× to 2×1×Overall tempo
Stagger0× to 3×1×The delay between elements
Bounce0× to 2.5×1×Overshoot of springs
Distance0.25× to 2.5×1×How far things travel
  1. Drag a dial and watch the stage. The score next to Tuning updates live.
  2. Click Apply to save the tuned animation as a new version, or Reset to go back.
Refine: tuning dials and camera

Reduced motion preview

People who turn on Reduce Motion in macOS or iOS should still understand your UI. Click the Reduced Motion button in the transport bar to preview the reduced version: the end state stays the same, only the way there gets calmer. Opacity and color changes stay, while movement and scale become fewer and gentler.

Code exports respect the setting on their own: React, Web Animations, CSS, HTML and SwiftUI all check it. The Audit includes a Reduced Motion check.