Falloff Accordion, animated React component
A row of photo strips where the one you point at opens and its neighbours give way on a smooth Gaussian falloff, so the whole row leans toward the pointer while a caption rises on the open strip.
- Pro
- Cards
- Hover
- Spring
Play with it
Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.
Move along the row.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| strips | FalloffStrip[] | DEFAULT_FALLOFF_STRIPS | Each strip has a unique title, a meta line and art (any CSS background, e.g. a gradient or url(...) center / cover). |
| autoplay | boolean | false | Opens every other strip in turn until someone points at the row. |