Войти
  • 32717Просмотров
  • 3 года назадОпубликованоSam Selikoff

Building a Resizable Panel with Framer Motion

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: 🚀 Demo: 🧑‍💻 Code: - 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