Animation
Animation curves
Every curve takes an optional { duration }; spring also takes { bounce }. Two seconds is a hard ceiling in a widget and the system cuts anything longer off part-way. Longer durations are clamped and a warning appears in the console.
Methods
.delay(seconds)Animation ›Waits before starting. Counts against the same two-second ceiling.
- seconds Duration required
A Duration, or a plain number of seconds.
.speed(multiplier)Animation ›Scales the duration. 2 runs it twice as fast.
- multiplier Number required
Above 1 is faster, below 1 is slower.
.repeatCount(count)Animation ›Repeats. The two-second ceiling still applies to the whole thing, so a large count will be cut off.
- count Number required
How many times.
Animation.default(options?)Animation ›The system's standard curve.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.linear(options?)Animation ›Constant speed throughout.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.easeIn(options?)Animation ›Starts slow, ends at full speed.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.easeOut(options?)Animation ›Starts at full speed, ends slow.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.easeInOut(options?)Animation ›Slow at both ends.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.bouncy(options?)Animation ›A spring that overshoots.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.smooth(options?)Animation ›A spring with no overshoot.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.snappy(options?)Animation ›A spring with a little overshoot.
- options Any
- duration Duration
How long it runs. Clamped to two seconds, the widget ceiling.
- duration Duration
Animation.spring(options?)Animation ›A spring you tune yourself.
- options Any
- duration Duration
How long it runs. Clamped to two seconds.
- bounce Number
0 is no overshoot, 1 is very springy. Default 0.
- duration Duration
Animation.none()Animation ›No animation: the update simply appears.
Examples
Curves
Animation.spring({ duration: 0.3, bounce: 0.2 })
Animation.easeInOut({ duration: 0.4 }).delay(0.1)
Animation.linear({ duration: 1 }).speed(2)
Animation.none() // no animation at all