Animated Components

Examples of smooth dimension animations using React and Motion

<AnimatedWidthContainer/>

Smooth width transitions when button content changes using custom useMeasure hook

<AnimatedHeightContainer/>

Smooth height animations for expandable content using AnimatePresence and ResizeObserver

Containers on the web snap to their new size instantly when content changes. By measuring the bounds of a container and animating to those values, we can make these transitions feel smooth and intentional.