A settings panel that swaps between sub-views while its height animates to fit.
The challenge with nested views isn't the content swap, it's the height animation. When you go from a 3-row menu to a 2-row confirmation, the container needs to smoothly shrink. useMeasure tracks the content height, and AnimatePresence mode="popLayout" handles the crossfade.
Two views rendered conditionally based on state. No animation, just a hard swap between the main menu and a confirmation sub-view.
Loading...
Add AnimatePresence mode="popLayout" with scale, opacity, and blur transitions. initial={false} prevents the initial mount animation. The mode="popLayout" ensures the exiting element is removed from layout flow so the entering element can take its place immediately.
Loading...
useMeasure returns the current content height. motion.div animates to match using a spring with dynamic duration. Small height changes animate faster (0.15s), large changes animate slower (0.35s). This prevents the "rubber band" feeling where small content swaps animate too slowly.
Loading...
A back button appears in sub-views. The navigation stack supports multiple sub-views (archive, delete) that all return to the default view.
Loading...
Tune the animation.
Loading...