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 fireship.io/lessons/framer-motion-modal/

#react #animation #learntocode

Try it out react-framer-demo.netlify.app/

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

🔗 Resources

Framer Motion www.framer.com/motion/
Spring Animations blog.maximeheckel.com/posts/the-physics-behind-spr…
Advanced Framer Motion 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 twitter.com/fireship_dev
Engineer: Klutch twitter.com/KlutchDev