Dropdown Menu
Code
| 1 | // The whole menu mounts/unmounts on open; AnimePresenceChild animates the |
| 2 | // container (scale + fade). Each item <Anime> cascades via delay = index * 40. |
| 3 | <AnimePresence mode="sync"> |
| 4 | {open && ( |
| 5 | <AnimePresenceChild |
| 6 | key="dropdown" |
| 7 | enter={{ opacity: [0, 1], scale: [0.95, 1] }} |
| 8 | exit={{ opacity: [1, 0], scale: [1, 0.95] }} |
| 9 | duration={200} |
| 10 | ease="outExpo" |
| 11 | > |
| 12 | <div className="menu"> |
| 13 | {items.map((item, index) => ( |
| 14 | <Anime |
| 15 | key={item} |
| 16 | opacity={[0, 1]} |
| 17 | translateY={[-6, 0]} |
| 18 | delay={index * 40} // per-item cascade (not stagger) |
| 19 | duration={200} |
| 20 | ease="outQuad" |
| 21 | autoplay |
| 22 | > |
| 23 | <button className="menu-item">{item}</button> |
| 24 | </Anime> |
| 25 | ))} |
| 26 | </div> |
| 27 | </AnimePresenceChild> |
| 28 | )} |
| 29 | </AnimePresence> |
Button-triggered menu — the container scales/fades in, items cascade via per-item delay.
Live preview
Dropdown MenuClick the trigger
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | 'sync'|'wait'|'popLayout' | 'sync' | Container enter/exit sequencing |
| enter | UseAnimeOptions | - | Container scale + fade in |
| delay | number | 0 | Per-item delay (index * N) for the cascade |
| translateY | number[] | [-6, 0] | Item slide-in |
| opacity | number[] | [0, 1] | Item fade |
| duration | number | 200 | Per-item ms |