fadeIn
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
slideUp
slideDown
slideLeft
slideRight
scaleIn
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 dataThere are no records to display | |
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.