Multistep wizard

Learn the basics of state-based animation with Framer Motion.

Email client

Add animation to unmounting elements using the versatile AnimatePresence component.

Fixed header: Part 1

Use scroll-based animation to smoothly grow and shrink a fixed header.

Fixed header: Part 2

Add a fading nav and a blurred background effect by extracting a reusable Hook.

Resizable panel

Use measured height to resize a panel with dynamic content.