63 Hierarchical Entrance. 63 of 95.
63/MOTION/63 of 95
Hierarchical Entrance
Animate the hierarchy, not just the layer.
The problem
Sliding one container in moves every child as a single slab — the UI arrives, but nothing reads as sequenced or intentional.
The solution
Each card enters on its own delay, then its text fades in with a second stagger.
Experiment
Play with the values
1120ms
64ms
220ms
190ms
148px
How it works
- Cards start offscreen and faded, and their text starts hidden separately.
- Each card's translation and opacity is staggered so the group arrives as a sequence.
- Text stays invisible a beat longer than the card itself.
- A second stagger fades the text in after its card has landed.
- The hierarchy reads as intentional: structure first, then the words.
Seen in
Dashboard widgets
Cards cascade in, then titles and metrics settle a moment later.
Onboarding steps
Each step card arrives before its copy, guiding the eye down the list.
Search results
Result rows enter first; snippets fade so scanning stays calm.
Settings panels
Sections slide in by group, then labels appear without fighting the layout motion.