Learn how to use Framer Motion and react-use-measure to build an auto-resizing panel that animates its height whenever its children change.

🪄 Framer Motion course: https://samselikoff.com/framer-motion-course

🚀 Demo: https://bit.ly/3mDYioM

🧑‍💻 Code: https://bit.ly/3Hgrzzf

- 0:00 – Intro
- 1:00 – Animating height with useMeasure
- 3:44 – Extracting a component
- 4:47 –Using children as a key to animate the contents
- 11:33 – Adding exit animations
- 14:00 – Removing animation on initial render
- 17:25 – Building a fade-out-then-in animation
- 19:04 – Building a slide animation
- 20:18 – Outro

Sam Selikoff

The post discusses how to create a resizable panel in React using Framer Motion. The author provides a detailed explanation of the challenges faced when animating elements that affect document flow and presents a solution using React state, hooks, and Framer Motion's motion components. Key techniques include measuring element height, creating reusable components, handling animations for content changes, and using JSON.stringify for comparing React children. Examples and demos illustrate the implementation process.

Building a Resizable Panel with Framer Motion