Tree Node Expand
A folder's chevron turns as its children unfold with a small stagger.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Tree Node Expand
*
* A folder tree that unfolds. The chevron turns to say which way the
* folder is facing, the space for the children opens, and the childrenAbout this pattern
File explorers, nested folders and any hierarchy that opens in place. Three things happen in sequence and each is deliberately small: the chevron turns to say the folder is now facing the other way, the space for the children opens as a short eased height change because the motion genuinely is a size change, and the children arrive a beat apart so depth is read rather than counted. The cascade comes from parent-to-child variants instead of hand-written delays, which is why it keeps working however deep the tree goes — and why closing runs bottom-up, so a folder appears to fold back into its own row.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Code review
Folders turn their chevron and reveal nested contents in place.
Related patterns
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.
- Pagination Page TurnThe current rows leave in the direction you asked for and the next set arrives from the opposite side.
- Breadcrumb Trail AppendGoing one level deeper slides a new crumb in from the right while the trail behind it recedes.