STYLES

Animations

Apply entrance motion to any styled component while preserving its authored transforms.

Seven entrance presets

Entrance motion runs once when the page appears. Use Replay animations to remount this example and compare every preset.

Replay animations

fadeIn

slideUp

slideDown

slideLeft

slideRight

scaleIn

dowe
Button href:"/docs/views/style/animations" navigate:"replace"
  "Replay animations"
Flex direction:"column" gap:3 animation:"fadeIn"
  Chip animation:"slideRight" rotate:-5
    "Mobile Apps"

ACCESSIBILITY

Reduced motion is automatic

Generated web, desktop, Android, and iOS views suppress non-essential entrance movement when the operating system requests reduced motion.

API

Preset values

animation is a static quoted preset. Its default is none; it does not accept responsive objects or Signal paths.

Value
Entrance behavior

No data

There are no records to display

Runs once per appearance. Entrance presets preserve rotate, scale, translateX, and translateY. They are not looping animations and do not accept custom keyframes or durations.
On web, Dowe holds the initial animation frame until hydration is ready, then starts the entrance without flashing the completed state.

COMPATIBILITY

Available on styled components

Layout and shell roots, navigation roots, content, charts, controls, forms, and overlays accept animation. Examples include Box, Section, Flex, Grid, Card, Chip, Text, Title, Image, Button, Input, Tabs, Stepper, and Modal.

Not available on context entries: Option, fabAction, comboOption, csvColumn, dragGroup, dragItem, tab, step, region entries, Svg, and Path do not accept animation.