Accordion animations feel weird for a reason.

Most implementations do this:

- measure with "scrollHeight"

- animate from "0 → scrollHeight"

Problem:

"scrollHeight" is only known after render.

So the animation:

- starts late

- jumps on first frame

- easing feels off (because it's animating a guessed value)

And the worst hack:

"max-height: 9999px"

Now your easing curve runs across 9999px instead of real content height 🤦

I got tired of this and tried a different approach:

→ predict text height before render

→ animate to the exact value

No measurement. No jump.

Feels… correct.