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-mo...

#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/t...
Advanced Framer Motion https://fireship.io/framer-motion-adv...

📚 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   / fireship_dev  
Engineer: Klutch   / klutchdev