Springy Animated Modals // Framer Motion & React Tutorial for Beginners

Create amazing animations in React with Framer Motion. In this tutorial, we build an interactive modal window from scratch and customize its spring animations. Full tutorial https://fireship.io/lessons/framer-motion-modal/ #react #animation #learntocode Try it out https://react-framer-demo.netlify.app/ 🔥 Get More Content - Upgrade to PRO Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment. 🔗 Resources Framer Motion https://www.framer.com/motion/ Spring Animations https://blog.maximeheckel.com/posts/the-physics-behind-spring-animations/ Advanced Framer Motion https://fireship.io/framer-motion-advanced-notifications/ 📚 Chapters 00:00 Intro 00:45 Modal Demo 01:29 Setup Framer 02:26 Animated Button 03:06 CSS vs Framer Motion 03:28 Backdrop 05:37 Modal 07:05 Animation Settings 07:58 Spring Damping and Stiffness 08:41 Trigger It 09:41 Animate Presence 10:36 Drag It 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font 🔖 Topics Covered - Framer Tutorial - How to build Animated Modals in React - Spring Animation Physics - CSS Modal Styling - Animated Buttons in React - JavaScript Animation Techniques 🎬 Credits Producer: Jeff Delaney https://twitter.com/fireship_dev Engineer: Klutch https://twitter.com/KlutchDev