Fireship

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