Interaction & layout
Style transitions
Animate changes to the style prop with transition-* tokens, like CSS transitions.
A transition-* token makes a component animate whenever its style changes. You keep writing ordinary state-driven styles; STRX interpolates between the old and new values.
1<Strx.View2 animate="transition-colors duration-250 ease-out"3 style={{ backgroundColor: active ? "#16a34a" : "#dc2626" }}4/>Transition tokens
| 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. |
An animate value has one style transition. If you list several transition-* tokens, even in different comma groups, the last one wins; use transition-all to cover several kinds at once.
Pick the narrowest token that covers what changes. transition-all is convenient, but a narrower token keeps unrelated style changes instant: with transition-colors, a width change in the same update still snaps.
Interruptions
Transitions start from the values currently on screen. If the style changes again mid-transition, the new transition continues from where the old one was, with no jump. Try clicking the toggles above twice quickly.
Transitions and entrances
A component can have both an entrance and a transition. The entrance plays once on mount; later style changes run the transition and never replay the entrance:
1<Strx.View2 animate="fade-in from:translate-y-8 transition-colors duration-200"3 style={{ backgroundColor: selected ? "#eef1ff" : "#ffffff" }}4/>The group's timing tokens apply to both. To time them separately, use two groups: "fade-in duration-400, transition-colors duration-150".
Pressed states
Strx.Pressable accepts function styles. With a transition-* token, the change between the pressed and released style animates:
1<Strx.Pressable2 animate="transition-transform duration-150"3 onPress={onSubmit}4 style={({ pressed }) => ({5 transform: [{ scale: pressed ? 0.96 : 1 }],6 })}7>8 <Strx.Text>Submit</Strx.Text>9</Strx.Pressable>Your own onPressIn / onPressOut handlers still run.
Focus and validation
Strx.TextInput works the same way. Track focus in state and let transition-colors animate the border:
1function Field() {2 const [focused, setFocused] = useState(false);34 return (5 <Strx.TextInput6 animate="transition-colors duration-200"7 onFocus={() => setFocused(true)}8 onBlur={() => setFocused(false)}9 style={{ borderWidth: 2, borderColor: focused ? "#3552f0" : "#d3d8e2" }}10 />11 );12}Size transitions
transition-layout animates width, height, min/max sizes and top / right / bottom / left when you change them in style:
1<Strx.View2 animate="transition-layout duration-300"3 style={{ width: expanded ? 280 : 120, height: 48 }}4/>This animates the style values you set. When a size change comes from content (a child appears, text wraps), use a layout transition instead: it measures the native layout and animates to it.
Reduce Motion
Under Reduce Motion, style changes apply immediately. See Accessibility.