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

#react #animation #learntocode

🔥 Get More Content - Upgrade to PRO

Use code lORhwXd2 for 25% off your first payment.

🔗 Resources

📚 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

[captainlennyjapan]

I’m so happy whenever Fireship posts a new video.

[lThePotatoCrew]

Once I learned framer motion a year ago, I never went back to another reaction library. It's very intuitive to use !

[CorporalSaturn]

Jeff, this video could not have come at a better time for me; I'm rebuilding my site and of the things I'm focusing on is better quality animations, I WAS going to spend all night fixing my react-spring components, but you made framer seem approachable and I gave it a shot. The framer implementation makes way more sense, there are less re-renders in the animated components I built, it is fantastic, thank you so much 💖

[RohitPrakash]

Framer motion is such a blessing. Great video Jeff and Klutch ❤️

[talhaibnemahmud]

The long awaited React Animation at last 🥰
Thanks a lot ❤️

[PowderedToastMaaaan]

How have I not heard of framer motion? This tut was amazing. Thank you Fireship!

[jcv_]

These 3 years of programming I have never seen a Youtube channel that provides pro tips. You are the first one, thanks so much

[chetanjain]

That is so weird. I was looking for Framer tutorial for my current project and the next thing Fireship uploads one.
Thanks man
#fireshipprovides

[alegherix]

Always coming in clutch with the videos, gonna try this on my modal in my project! :)

[tirmes]

I made yesterday and I barely have to wait a day until your tutorial!!! Thanks

[sweet_potato]

Thank you for these fun and engaging videos, technically they look great too.

[gjb]

excellent as always 🔥

thanks for another great tutorial!

[ShafterPlay]

Another very cool React library to do what Svelte does natively 😌🧡

[jhannes]

Thank you. This gave me the push to express.js my gratefulness with a Pro membership.

[abhinav.sharma]

You know what I want. Fireship 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[wisdomcube]

I love this channel, really help me a lot

[ninjaasmoke]

Omg I'm obsessed with framer motion.

[oshanshrestha]

Just what I was in need for my project.

[cristobalfigueroa]

Amazing content bro, thanks for all your work

[VBDesignsable]

For those who wanna test this lib, with little animations, you can also pass the initial and animate state directly in the animate property with an array:
animate={{ property: [initialValue, animateToValue] }} =>
for example
<motion.p
animate={{ opacity: [0, 1], y: [30, 0] }}
exit={{opacity: [1, 0]}}
transition={{ duration: .4 }}
> text </motion.p>