Core concepts
Keyframes
Write start and end values directly with from: and to: utilities, or with style objects.
When no preset fits, describe the animation with from: and to: tokens. Each prefixes a utility such as opacity-0 or translate-y-20.
<Strx.View animate="from:opacity-0 from:-translate-y-20 to:opacity-100 to:translate-y-0 duration-300" />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 |
Use a leading dash for negative values on signed utilities: from:-translate-x-24, from:-rotate-90.
Missing start or end values
You only need one side. A channel with only a from: value animates to its neutral value; a channel with only a to: value starts from neutral:
| Channel | Neutral value |
|---|---|
opacity, scale, scaleX, scaleY | 1 |
translateX, translateY | 0 |
rotate | 0deg |
So these two lines are the same:
<Strx.View animate="from:opacity-0 from:scale-90" />
<Strx.View animate="from:opacity-0 to:opacity-100 from:scale-90 to:scale-100" />With a preset
A group may combine a preset with keyframes. The keyframes override the preset per channel and the rest of the preset stays:
1// fade-in's opacity, plus a slide from 8pt below2<Strx.View animate="fade-in from:translate-y-8" />34// slide-up, but from further away5<Strx.View animate="slide-up from:translate-y-80" />Looping keyframes
Add play-* to repeat. Each play starts again from the from frame:
// a pulsing badge
<Strx.View animate="from:scale-90 to:scale-110 duration-600 ease-in-out play-infinite" />Objects: any animatable style
Tokens cover the most common channels. For anything else, including colors, border radius and spacing, pass an object:
1<Strx.View2 animate={{3 from: { opacity: 0, backgroundColor: "#eef1ff", borderRadius: 4, transform: [{ rotate: "-8deg" }] },4 to: { opacity: 1, backgroundColor: "#3552f0", borderRadius: 18, transform: [{ rotate: "0deg" }] },5 duration: 500,6 easing: "ease-out",7 }}8/>Supported keys for from / to objects:
| Group | Keys |
|---|---|
Opacity | opacity |
Transform | translateX, translateY, scale, scaleX, scaleY, rotate, rotateX, rotateY, rotateZ, skewX, skewY, perspective (as keys or inside transform) |
Size | width, height, minWidth, minHeight, maxWidth, maxHeight |
Position | top, right, bottom, left |
Spacing | margin*, padding* (all sides, horizontal, vertical) |
Border | borderRadius and per-corner radii, borderWidth and per-side widths |
Color | backgroundColor, borderColor and per-side border colors |
Size, position and spacing accept numbers or percentage strings such as "50%". Angles are strings such as "45deg".
w-* / h-* and object width / height animate the view's own size, which re-lays out its children every frame. To animate a size change caused by content, prefer a layout transition.
Keyframes and timelines
Keyframes also define what Strx.useTimeline plays: play() goes from the from frame to the to frame, reverse() goes back, and reset() jumps to from. exit: values are never part of a timeline's to frame.