Transitions & Animation

Animate style changes with transition on the base style. The component does not rerun for each frame.

#Hover transitions

<Button style={{
  bg: "#2563eb",
  transition: { property: "bg", duration: 160 },
  hover: { bg: "#1d4ed8" },
}}>Hover</Button>

#State-driven animation

Change a style from state and keep the node mounted. Do not rebuild the component on each frame.

<View style={{
  bg: selected() ? "#2563eb" : "#334155",
  opacity: selected() ? 1 : 0.6,
  transition: { property: ["bg", "opacity"], duration: 180 },
}} />

#Timing and frame rate

Durations accept milliseconds or strings such as "180ms". Set easing and maxFps when you want a cap. Omit maxFps to follow the display.

#Supported properties

Color, border, radius, opacity, shadow, and transform interpolate. Width, height, and padding do not.

#Mounting and reduced motion

Keep an overlay mounted during its exit transition when the component supports that. Show removes children immediately. Transitions follow the system Reduce Motion setting. Set reduceMotion on the window to override it.

#Animated images

Image plays GIF and WebP files from the path you pass. You do not need a timer.

<Image value={path} style={{ width: 96, height: 96, objectFit: "contain" }} />