Accordion (Presence)
Code
| 1 | // The open panel mounts/unmounts as isOpen flips. Pass height: 'auto' — |
| 2 | // AnimePresenceChild measures the real content height internally and animates |
| 3 | // to it, then releases to 'auto' on completion. No manual measurement needed. |
| 4 | const AccordionItem = ({ title, body, isOpen, onToggle }) => ( |
| 5 | <div className="overflow-hidden rounded-lg border"> |
| 6 | <button onClick={onToggle} aria-expanded={isOpen}>{title} ▼</button> |
| 7 | <AnimePresence mode="sync" initial={false}> |
| 8 | {isOpen && ( |
| 9 | <AnimePresenceChild |
| 10 | key="panel" |
| 11 | enter={{ height: [0, 'auto'], opacity: [0, 1] }} |
| 12 | exit={{ height: ['auto', 0], opacity: [1, 0] }} |
| 13 | duration={320} |
| 14 | ease="outExpo" |
| 15 | > |
| 16 | <div className="overflow-hidden">{body}</div> |
| 17 | </AnimePresenceChild> |
| 18 | )} |
| 19 | </AnimePresence> |
| 20 | </div> |
| 21 | ) |
Mount/unmount accordion panels with smooth height + opacity animation via AnimePresence.
Live preview
Accordion (Presence)Click a header to toggle
A React wrapper around anime.js v4 — hooks-first, with declarative components where they help.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | 'sync'|'wait'|'popLayout' | 'sync' | sync = parallel enter/exit when switching items |
| enter | UseAnimeOptions | - | Enter keyframes — height:'auto' is measured internally |
| exit | UseAnimeOptions | - | Exit keyframes — mirror of enter |
| duration | number | 320 | Enter/exit ms |
| ease | string | 'outExpo' | Decelerating curve |