Module
Motion
Temporal visual changes including keyframes, springs, paths, shared elements and driven progress.
Raw schema: /schema/1.0/modules/motion.schema.json
value
type: number | string | boolean | vector2 | vector3 | color
No object properties on this definition.
easing
type: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | object | object | object | object | object
No object properties on this definition.
spring
type: object · required: mass, stiffness, damping
| Property | Type | Required | Constraints |
|---|---|---|---|
mass | number | yes | > 0 |
stiffness | number | yes | > 0 |
damping | number | yes | min 0 |
initialVelocity | number | no | — |
restSpeed | number | no | min 0 |
restDelta | number | no | min 0 |
keyframe
type: object · required: offset
step
type: object · required: type
| Property | Type | Required | Constraints |
|---|---|---|---|
type | "animation" | "sequence" | "parallel" | "stagger" | "wait" | yes | — |
motionRef | id | no | — |
each | duration | no | — |
from | "first" | "last" | "center" | no | — |
seed | integer | no | min 0 |
duration | duration | no | — |
targets | array<id> | no | — |
children | array<step> | no | — |
track
type: object · required: property
| Property | Type | Required | Constraints |
|---|---|---|---|
propertyAnimatable visual property path, for example appearance.opacity or transform.translate. | string | yes | minLength 1 |
from | value | no | — |
to | value | no | — |
keyframes | array<keyframe> | no | minItems 2 |
easing | easing | no | — |
composite | "replace" | "add" | "accumulate" | no | — |
driver
type: object · required: type
| Property | Type | Required | Constraints |
|---|---|---|---|
type | "event" | "state-transition" | "gesture" | "scroll" | "timeline" | "viewport" | "visibility" | "media-playback" | "external-progress" | yes | — |
sourceRef | id | no | — |
axis | "x" | "y" | "both" | no | — |
range | object | no | — |
clamp | boolean | no | — |
externalName | string | no | minLength 1 |
path
type: object
| Property | Type | Required | Constraints |
|---|---|---|---|
data | string | no | minLength 1 |
pathRef | id | no | — |
orientation | "auto" | "auto-reverse" | "fixed" | no | — |
start | number | no | min 0 · max 1 |
end | number | no | min 0 · max 1 |
coordinateSpace | coordinateSpace | no | — |
animation
type: object · required: id
| Property | Type | Required | Constraints |
|---|---|---|---|
id | id | yes | — |
name | string | no | minLength 1 |
kind | "property" | "spring" | "decay" | "path" | "morph" | "layout" | "shared-element" | "sequence" | "parallel" | "stagger" | "transition" | no | — |
targets | array<id> | no | — |
tracks | array<track> | no | minItems 1 |
duration | duration | no | — |
delay | delay | no | — |
easing | easing | no | — |
spring | spring | no | — |
decay | object | no | — |
timing | object | no | — |
iterations | number | const "infinite" | no | min 0 |
direction | "normal" | "reverse" | "alternate" | "alternate-reverse" | no | — |
autoreverse | boolean | no | — |
fill | "none" | "forwards" | "backwards" | "both" | no | — |
composition | "replace" | "add" | "accumulate" | no | — |
motionRefs | array<id> | no | — |
children | array<step> | no | — |
stagger | duration | no | — |
trigger | driver | no | — |
path | path | no | — |
morph | object | no | — |
sharedElement | sharedElement | no | — |
essential | boolean | no | — |
interrupt | "cancel" | "finish" | "reverse" | "retarget" | "blend" | "queue" | "ignore" | object | no | — |
cancel | "restore" | "freeze" | "finish" | no | — |
reducedMotion | object | no | — |
performance | object | no | — |
extensions | extensions | no | — |