Inglorious MotionAPI Reference
withMotion(config)
Composes a type with motion behavior.
ts
type MotionVariantDefinition = {
frames?: Keyframe[] | PropertyIndexedKeyframes
keyframes?: Keyframe[] | PropertyIndexedKeyframes
options?: KeyframeAnimationOptions
}
type MotionVariants = Record<string, MotionVariantDefinition>
type MotionLayoutOptions =
| boolean
| {
duration?: number
easing?: string
}
type MotionPresenceOptions = {
mode?: "sync" | "wait"
groupKey?: string
}
type WithMotionConfig = {
variants: MotionVariants
initial?: string
exitVariant?: string
classPrefix?: string
fallbackBufferMs?: number
animateOnMount?: boolean
layout?: MotionLayoutOptions
layoutIdKey?: string
presence?: MotionPresenceOptions
}
function withMotion(config?: WithMotionConfig): (type: object) => object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Added handlers
withMotion adds these handlers to the composed type:
motionVariantChange(entity, variant)- Sets
entity.motionVariant - Triggers variant animation on render cycle
- Sets
removeWithMotion(entity, payload, api)- Plays the configured exit variant
- Notifies
removeafter animation finishes
requestRemove(entity, payload, api)- Backward-compatible alias of
removeWithMotion
- Backward-compatible alias of
payload for remove handlers:
ts
type RemoveWithMotionPayload = string | { exitVariant?: string }
1
Entity fields used by runtime
entity.motionVariant(current/target variant)entity.motionLayoutIdby default for shared layout- configurable via
layoutIdKey
- configurable via
Runtime behavior
- Honors
prefers-reduced-motion: reduce - Uses WAAPI when available (
Element.animate) - Falls back to end-state commit when WAAPI is missing