Element: #362 Height spring (motion/transitions)
What it shows: An FAQ accordion whose panels open and close with a spring on their height, overshooting slightly before they settle.
When to use: Disclosure panels, FAQs and expandable table rows where a CSS ease feels stiff and the content height is not known in advance.
Spec:
- `MotionStage` with `label="Height spring: accordion panels open and close with a spring"` and `loop={2200}`
- One `new Spring(0, { stiffness: 0.18, damping: 0.72 })` per panel drives the height in px; its target is the measured `scrollHeight` when open and `0` when closed
- A `ResizeObserver` keeps the target correct when the text wraps differently
- The clipped box reads `block-size: var(--h)` and a closed panel is `inert`
- The chevron rotates with `transition: transform 240ms cubic-bezier(0.2, 0, 0, 1)`
- Under reduced motion the spring is set with `{ instant: true }`
Motion:
- block-size of the panel: stiffness: 0.18 damping: 0.72 spring { stiffness: 0.18, damping: 0.72 }
- transform: rotate of the chevron: 240ms cubic-bezier(0.2, 0, 0, 1)
Names: Height spring | Spring accordion | Auto height animation | Mola de altura | Animación de altura con resorte
Tags: motion, accordion, spring, height, disclosure
Needs: @codeatlasdev/ui@4.6.0
Components: MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/transitions#height-spring
{#snippet children(m)}
{ stage = m; }}>
{#each faqs as f (f.id)}
{@const isOpen = opened === f.id}