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