MotionHeight

Height that follows its content: collapse, expand and content changes.

WebReact NativeContent and size

Try it

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useState } from 'react';
import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const questions = [
  {
    question: 'Do I need a provider?',
    answer: 'No. Every component works on its own. Import it, pass your data, and it animates.',
  },
  {
    question: 'What happens if I click twice quickly?',
    answer:
      'The height continues from what is on screen. A second click in the middle of a change turns it around ' +
      'smoothly instead of jumping to the start.',
  },
  {
    question: 'Does the content stay in the page?',
    answer:
      'Yes. Closed content stays mounted but hidden and inert, so its state is kept and it cannot take focus.',
  },
];

export default function App({ spring = 'default', single = true }) {
  const [open, setOpen] = useState([0]);

  const toggle = (index) => {
    if (open.includes(index)) setOpen(open.filter((item) => item !== index));
    else setOpen(single ? [index] : [...open, index]);
  };

  return (
    <div className="faq">
      {questions.map((item, index) => (
        <section key={item.question} className="entry">
          <button className="question" onClick={() => toggle(index)}>
            {item.question}
            <span className="sign">{open.includes(index) ? '−' : '+'}</span>
          </button>
          <MotionHeight open={open.includes(index)} transition={motionTokens.spring[spring]}>
            <p className="answer">{item.answer}</p>
          </MotionHeight>
        </section>
      ))}
    </div>
  );
}

styles.css

.faq {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.entry {
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #fff;
}

.question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 16px system-ui,
    sans-serif;
  color: #0e2e24;
  text-align: start;
  cursor: pointer;
}

.sign {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
}

.answer {
  margin: 0;
  padding: 0 18px 18px;
  color: #5b616b;
  line-height: 1.6;
}

Shortest usage

Details.jsx

<button onClick={() => setOpen(!open)}>Details</button>
<MotionHeight open={open}>
  <Answer />
</MotionHeight>

What it handles for you

Animates to the content's real height, measured for you.
Follows the content when it grows or shrinks while open.
Starts from the height on screen, even in the middle of a change.
Resizing the page snaps instead of lagging behind the new width.
Closed content stays mounted but hidden and inert, so its state is kept.

Use it for

Answers in a FAQ.
A group of settings that opens.
A list whose total height should animate (wrap MotionList).

Props

Prop	Type	Default	Description
`open`	`boolean`	`true`	`false` collapses to zero height; the content stays mounted but hidden and inert.
`children`	`ReactNode`		The content.
`as`	`element`	`'div'`	The element to render.
`transition`	`Transition`	`spring`	A timing curve `{ duration, easing }` or a spring `{ tempo: 'spring', spring }`. Springs keep their momentum when interrupted.
`onMotionComplete`	`(open) => void`		Runs with `open` once the height has settled.

Other props go to the rendered element, so className, style and event handlers work as usual.

Web and React Native

On the web the height plays on the Web Animations API and the content keeps its normal layout.

On React Native the view clips its content and animates height on the JS driver, because height is layout.

Used in these examples

Chat answerSuggestions that fold away, an answer that streams at a steady pace and a status line that swaps.MotionStreamMotionListMotionSwapMotionHeight