Reference
Token reference
Every animate token, generated from the token data the parser uses.
This page is generated from tokens.json, the same data the parser, the editor extension and the previews on this site use, so it always matches the published version.
Grammar
animate = group ("," group)*
group = token (" " token)*
token = preset | keyframe | exit | timing | spring | transition | layout
keyframe = ("from:" | "to:") utility
exit = "exit:" utility
utility = ["-"] name "-" number e.g. opacity-50, -translate-y-20
number = digits ["." digits] unsigned decimal- Spaces separate tokens in a group; order doesn't matter.
- Commas separate groups; groups play in parallel with their own timing.
- At most one preset per group.
- One
transition-*peranimatevalue; the last one wins. - If several groups have
layout-*tokens, the strongest wins (spring over linear).
Presets
| Token | Starts from | Animates to | Default motion |
|---|---|---|---|
fade-in | opacity: 0 | opacity: 1 | timing, 300ms |
fade-out | opacity: 1 | opacity: 0 | timing, 250ms |
slide-up | translateY: 24 | translateY: 0 | timing, 320ms |
slide-down | translateY: -24 | translateY: 0 | timing, 320ms |
slide-left | translateX: 24 | translateX: 0 | timing, 320ms |
slide-right | translateX: -24 | translateX: 0 | timing, 320ms |
scale-up | scale: 0.92 | scale: 1 | timing, 260ms |
scale-in | scale: 0.92 | scale: 1 | timing, 260ms |
scale-down | scale: 1.08 | scale: 1 | timing, 260ms |
scale-out | scale: 1 | scale: 0.92 | timing, 220ms |
bounce | translateY: -16, scale: 0.96 | translateY: 0, scale: 1 | spring, damping 8, stiffness 180, mass 0.9 |
Custom presets: definePreset.
Keyframe prefixes
| Prefix | Meaning |
|---|---|
from:* | Style before the animation starts. |
to:* | Target style of the animation. |
exit:* | Style animated to when the component unmounts. |
Utilities
| Utility | Result | Negative form | Notes |
|---|---|---|---|
opacity-50 | opacity: 0.5 | — | Percent, clamped to 0–100 |
translate-x-20 | translateX: 20 | -translate-x-20 | Points |
translate-y-20 | translateY: 20 | -translate-y-20 | Points |
scale-x-95 | scaleX: 0.95 | — | Percent (100 = 1) |
scale-y-105 | scaleY: 1.05 | — | Percent (100 = 1) |
scale-90 | scale: 0.9 | — | Percent (100 = 1) |
rotate-45 | rotate: '45deg' | -rotate-45 | Degrees |
w-120 | width: 120 | — | Points |
h-80 | height: 80 | — | Points |
Exit animations use opacity, translateX, translateY and scale. See Exit animations.
Timing
| Token | Meaning |
|---|---|
duration-300 | Duration in milliseconds. Precedence: token or object → preset default → Strx.Provider duration → 300ms. |
delay-100 | Delay in milliseconds before the animation starts. |
damping-12 | Spring damping. Default 10. |
stiffness-180 | Spring stiffness. Default 100. |
mass-1 | Spring mass. Default 1. |
play-3 play-infinite | Total number of plays, or play-infinite. |
repeat-3 repeat-infinite | Same as play-*; kept for compatibility. (legacy) |
Easing and spring
| Token | Curve |
|---|---|
linear | Linear easing. |
ease | Smoothstep easing. |
ease-in | Cubic ease-in. |
ease-out | Cubic ease-out. Default when no easing is set. |
ease-in-out | Cubic ease-in-out. |
spring | Uses the spring driver for numeric channels. |
Style transitions
| Token | Animated style subset |
|---|---|
transition | All supported numeric, color, and transform channels. |
transition-all | All supported numeric, color, and transform channels. |
transition-colors | Color keys such as backgroundColor and borderColor. |
transition-opacity | opacity only. |
transition-transform | Transform channels such as translateX, scale, and rotate. |
transition-spacing | margin* and padding* keys. |
transition-layout | width, height, min/max sizes, and top/right/bottom/left. |
Layout transitions
| Token | Behavior | Motion |
|---|---|---|
layout-linear | Timing transition. | 300ms, or duration-* / provider duration |
layout-spring | Spring transition. | damping 15, stiffness 120, mass 1 |
layout-fade | Timing transition that also fades the view in. | 300ms, or duration-* / provider duration |
layout-spring-stiff | Stiffer spring transition. | damping 20, stiffness 180, mass 0.9 |
layout-spring-bouncy | Bouncier spring transition. | damping 10, stiffness 105, mass 1 |