The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 2

CSS Grid FR Accordion

Animate accordion panels smoothly to any content height using CSS Grid's `fr` unit. This technique avoids fixed `max-height` values or JavaScript height measurements, providing a fluid and adaptable expansion.

animationcssgriduiaccordioninteraction

2 / 2

Animate height: auto with interpolate-size

Smoothly animate elements between height: 0 and height: auto (or other intrinsic size keywords) using the new CSS `interpolate-size` property, eliminating the need for JavaScript or `max-height` hacks.

animationcssaccordiontransitionkeywords