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
2024-02-04T13:58:10.206Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
022c6953-bffc-4cd3-b97b-ac8cc622109b
db35e4a2894c0547be39deac441953dd161cad98a973de8f2de332e25414a31b
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Animation is one of the most satisfying things for a developer because it can turn a boring cookie cutter feature into something really special.
In today's video, we'll build a modal window and react from scratch.
But on top of that, we'll also bring in a library called Framer Motion to implement a bunch of crazy animations for the modal.
In this beginner friendly tutorial, You'll learn how to style a modal with CSS, then how to manage its open and close state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion and and React, and I'll even show you how to drag and move a modal around the screen and explain the physics behind motion like this, and we'll look at a bunch of other cool tricks and best practices along the way.
If you're new here, like and subscribe.
And if you like this tutorial, upgrade to a pro membership on Fireship IO to get access to the SQL where we build a notification system on a framer.
Before we jump into the code, let's take a closer look at what we're building today.
And by the way, there's also a live demo where you can play around with this project before you build We have a button that when clicked, will add a backdrop to the entire screen and then animate a window on top of it.
Then to close it, we can either click the close button or click outside of it on the backdrop, which will automatically trigger the outro animation.
Modals are a very useful UI feature when you need to focus the user's attention and or you don't want to navigate them to an entirely different route.
You can also do complex things inside of them.
For example, the entire login feature for FireShip IO is handled inside on modal.
What you don't wanna do is pop one of these things up after a few seconds asking someone to subscribe to your newsletter, or even worse, asking them to except cookies.
Let's go ahead and jump into the code.
To get started, we'll first need to generate a React project, and for that, I'm using create act app.
Once created, I'll go ahead and open it up in Versus Code and install our only dependency, which is framer motion.
Framer, by the way, is maintained by the team behind framer design tool and is a very well maintained and polished library for implementing animations.
It's not the only way to animate in React, but in my opinion, it's the most intuitive approach for a feature like this.
Now to run the app, run npm start from the command line, and that should bring up the default React app on localhost 3000.
Next, we'll go into the app dotjs file and delete all of the boilerplate code.
From there, I'll go into the index dot CSS file and delete that code as well and import normalize CSS.
This is a cool little trick with create react app that will just give us a blank slate to work with when it comes to CSS.
Then from there, I'm going to paste in all the CSS for this project, which you can get on GitHub, by the way.
We'll come back here to explain the important styles as we move along.
At this point, you should see an empty black background, and now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and get smaller when we press it.
1st, we can import the motion component from Framer Motion, then in the JSX, add a regular button that has a class name of save button, and and currently, when clicked, doesn't do anything.
Now, to animate it, we can simply swap out the regular button for a Motion button.
Motion actually wraps all of the HTML elements for you and provides additional props to configure an animation.
Like, while hover will make the button bigger when you hover over it, and then while tap will make it smaller to give it the impression of being pushed in.
And and just like that, we've already created our first animation.
But you might be wondering, why would I wanna use framer motion over just regular CSS animations?
Well, for 1, it's just easier and results in more simplified code.
But on top of that, framework can do a lot of things that CSS can't, like listen to different browser events and integrate with the actual state of your React application.
It's just more developer friendly to work with, and that'll become apparent as we build out our next feature, the modal.
To build it, we have 2 moving parts here, which we will organize in the components directory.
First, we have the backdrop, which is just an overlay that sits across the entire screen and makes everything else look dark.
Then the modal window sits on top of it and that's where the user's attention will be focused.
When working on a larger React project, it's generally a good practice to write one component per file.
In this demo, I have a directory for each main component with an index dot JSX file inside of it.
A little trick in Versus Code is to hit the button for a new file and then write out the entire file path with a slash and it will automatically create the directory for you.
Let's start by building the backdrop.
We'll first import the Motion component, then define our own custom component called backdrop, and export it as the default from this file.
The component itself will take 2 props.
The first one is children, which allows us to embed additional components in between the tags for the backdrop, and the second one is on click, which allows us to pass a custom event handler into the component to update the global state when the backdrop is clicked.
That allows us to think of this as a dumb component that doesn't have its own internal state to manage.
In the JSX, we set up a motion div and define the on click handler as the function that gets passed in as a prop, and then the children will go in between the motion div tags.
It has a class name of backdrop, and let's go ahead and take a look at the CSS before we start animating.
Remember, it's an overlay, so we give it a position of absolute and set it in the top left corner with a height and width of 100%.
Then we'll give it a black background, but we still want to see the elements that are underneath it.
And an easy way to do that is to simply use a hex color, but then add an additional 2 characters for the opacity.
And finally, we want to center the children both horizontally and vertically, which we can do with display flex.
Now with our style set, We can go back to our component and define the various animation states to make the backdrop fade in and fade out.
The initial state should be invisible, which we can set with an opacity of 0.
Then, when it's active, we want to animate it to an opacity of 1.
And then, when the animation is finished, we want to go back to an opacity of 0, which we can set with the exit property.
And that's all there is to it, but it's not very useful without some content inside of it.
Let's now go ahead and implement the modal component.
At the top, we'll import motion again, as well as the backdrop component that we just built.
Then we'll define and export a component called modal that has 2 props.
1 is a function to close the modal and the other is the text that we want to display inside of the window.
In the JSX, we declare the backdrop component because that will always sit behind the window itself.
And when the backdrop is clicked, it will automatically close the window.
Now because we're using the children prop in the backdrop, we can add elements inside of it, like the motion div here, which will represent the window.
Now the first thing I wanna do here is set up the click handler and call event stop propagation.
Normally, when you click on something, it bubbles up the DOM to find the first event handler to take care of it.
That default browser behavior would cause the modal to automatically close anytime the content inside of it was clicked, which is not something we would want in this case.
The next thing we'll do is add a modal class to it, and let's quickly take a look at the CSS.
To make the width and height responsive, I'm using the clamp and min functions from CSS.
Clamp, in this case, will attempt to set the width to 700 pixels, but if the screen is too small, then it will go up to 90% if needed, or if the screen is too big, it will go to a maximum of 50% of the screen width.
This is a really cool trick to know in CSS because otherwise, to make the modal responsive, we'd have to set up media queries and things like that, which would take a lot more code.
Okay.
Now back to our component, we have a property called variance that references an object called drop in.
This object allows you to define multiple custom animation states.
That's really cool because you can use it to create a complex sequence of animations based on different ways the user might interact with your app.
In this animation, we have 3 states, hidden, visible, and exit.
When the window is hidden, we'll translate it along the y axis by negative 100% of the view height.
When it exits, it will drop beneath the view port to positive 100 of the view height.
When it is visible though, we'll put it on its natural position of 0 on the y axis.
The end result is an animation that drops in from the top and lands in the middle, then when it leaves, it drops even further to the bottom.
Now, one additional cool thing we can do here is tweak the transition settings.
When it becomes visible, I'm going to set the duration to point one second and give it a spring type animation to make it look kind of bouncy, and that provides a very easy way to make your animations look special.
I I don't wanna get into the physics of it, but damping is a decrease in the amplitude of an oscillation as a result of energy being drained from the system to overcome frictional or other resistive forces.
If you turn it down really low, the spring will never stop bouncing.
But if you turn it up too high, then the spring won't have much of a bounce at all.
With stiffness, if you turn it down really low, then it'll make the spring react very slowly and vice versa if you turn it up very high.
If you wanna dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a frame or motion component.
The final thing we'll want to do in this component is go back down to the motion div and add props for the different states like initial, animate, and exit.
And now the final question becomes, how do we actually trigger this animation in the React app?
For that, we'll head back into our root app component, and inside of it, import the use state hook from React as well as the modal we just built.
In order to open and close it, we need some state on this component that will tell us whether or not it's currently opened or closed, and we can easily set that up with the use state hook.
It'll have a default value of false.
And then just to make our code a little more readable here, I'm going to set up functions for close and open that will toggle the value between true and false.
Now with our state setup, we can go down to the launch modal button that we created at the beginning and define its on click event handler to run the close function if the modal is open, otherwise, run the open function.
That allows us to toggle the state from the button, but we also need to toggle the state from the modal itself, like when the user clicks on backdrop or from the close button within the window itself.
So if modal open is true, then we'll render the modal component and it will take the props of modal open as while as handle close to make it aware of the data or state in the parent app component.
If we check it out in the browser, we should now have a working modal window, but there's one problem here.
Notice how that it animates in perfectly, but when we click the close button it just disappears instead of animating out.
The reason this happens is because the modal is completely removed from the DOM when the state changes.
Luckily though, framer motion has a mechanism to rescue us from this predicament.
We can import the animate presence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM.
There are 2 important props here.
First one is initial, which will be set to false to disable any initial animations, and the second one is exit before enter.
Setting it to true will ensure that all nodes have finished animating before they're actually removed.
And we can also do more advanced things here, like listen to life cycle events.
If we go ahead and try it again, we now get the full sequence of animations from enter to exit.
Congratulations.
You just built an animated modal window with React and Framer Motion.
Oh, and I almost forgot.
I told you I would make the modal window draggable.
To accomplish that, all we have to do is add the drag prop to the motion div.
And now, you're free to drag it around the screen.
I'm gonna go ahead and wrap things up there.
But if you wanna learn some more advanced concepts, like how to build a notification feed and work with drag and drop gestures in Framer, Consider upgrading to FireShip Pro to get access to the sequel.
Thanks for watching, and I will see you in the next one.

Speaker 0: Animation is one of the most satisfying things for a developer because it can turn a boring cookie cutter feature into something really special. In today's video, we'll build a modal window and react from scratch. But on top of that, we'll also bring in a library called Framer Motion to implement a bunch of crazy animations for the modal. In this beginner friendly tutorial, You'll learn how to style a modal with CSS, then how to manage its open and close state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion and and React, and I'll even show you how to drag and move a modal around the screen and explain the physics behind motion like this, and we'll look at a bunch of other cool tricks and best practices along the way. If you're new here, like and subscribe.

And if you like this tutorial, upgrade to a pro membership on Fireship IO to get access to the SQL where we build a notification system on a framer. Before we jump into the code, let's take a closer look at what we're building today. And by the way, there's also a live demo where you can play around with this project before you build We have a button that when clicked, will add a backdrop to the entire screen and then animate a window on top of it. Then to close it, we can either click the close button or click outside of it on the backdrop, which will automatically trigger the outro animation. Modals are a very useful UI feature when you need to focus the user's attention and or you don't want to navigate them to an entirely different route.

You can also do complex things inside of them. For example, the entire login feature for FireShip IO is handled inside on modal. What you don't wanna do is pop one of these things up after a few seconds asking someone to subscribe to your newsletter, or even worse, asking them to except cookies. Let's go ahead and jump into the code. To get started, we'll first need to generate a React project, and for that, I'm using create act app.

Once created, I'll go ahead and open it up in Versus Code and install our only dependency, which is framer motion. Framer, by the way, is maintained by the team behind framer design tool and is a very well maintained and polished library for implementing animations. It's not the only way to animate in React, but in my opinion, it's the most intuitive approach for a feature like this. Now to run the app, run npm start from the command line, and that should bring up the default React app on localhost 3000. Next, we'll go into the app dotjs file and delete all of the boilerplate code.

From there, I'll go into the index dot CSS file and delete that code as well and import normalize CSS. This is a cool little trick with create react app that will just give us a blank slate to work with when it comes to CSS. Then from there, I'm going to paste in all the CSS for this project, which you can get on GitHub, by the way. We'll come back here to explain the important styles as we move along. At this point, you should see an empty black background, and now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and get smaller when we press it.

1st, we can import the motion component from Framer Motion, then in the JSX, add a regular button that has a class name of save button, and and currently, when clicked, doesn't do anything. Now, to animate it, we can simply swap out the regular button for a Motion button. Motion actually wraps all of the HTML elements for you and provides additional props to configure an animation. Like, while hover will make the button bigger when you hover over it, and then while tap will make it smaller to give it the impression of being pushed in. And and just like that, we've already created our first animation.

But you might be wondering, why would I wanna use framer motion over just regular CSS animations? Well, for 1, it's just easier and results in more simplified code. But on top of that, framework can do a lot of things that CSS can't, like listen to different browser events and integrate with the actual state of your React application. It's just more developer friendly to work with, and that'll become apparent as we build out our next feature, the modal. To build it, we have 2 moving parts here, which we will organize in the components directory.

First, we have the backdrop, which is just an overlay that sits across the entire screen and makes everything else look dark. Then the modal window sits on top of it and that's where the user's attention will be focused. When working on a larger React project, it's generally a good practice to write one component per file. In this demo, I have a directory for each main component with an index dot JSX file inside of it. A little trick in Versus Code is to hit the button for a new file and then write out the entire file path with a slash and it will automatically create the directory for you.

Let's start by building the backdrop. We'll first import the Motion component, then define our own custom component called backdrop, and export it as the default from this file. The component itself will take 2 props. The first one is children, which allows us to embed additional components in between the tags for the backdrop, and the second one is on click, which allows us to pass a custom event handler into the component to update the global state when the backdrop is clicked. That allows us to think of this as a dumb component that doesn't have its own internal state to manage.

In the JSX, we set up a motion div and define the on click handler as the function that gets passed in as a prop, and then the children will go in between the motion div tags. It has a class name of backdrop, and let's go ahead and take a look at the CSS before we start animating. Remember, it's an overlay, so we give it a position of absolute and set it in the top left corner with a height and width of 100%. Then we'll give it a black background, but we still want to see the elements that are underneath it. And an easy way to do that is to simply use a hex color, but then add an additional 2 characters for the opacity.

And finally, we want to center the children both horizontally and vertically, which we can do with display flex. Now with our style set, We can go back to our component and define the various animation states to make the backdrop fade in and fade out. The initial state should be invisible, which we can set with an opacity of 0. Then, when it's active, we want to animate it to an opacity of 1. And then, when the animation is finished, we want to go back to an opacity of 0, which we can set with the exit property.

And that's all there is to it, but it's not very useful without some content inside of it. Let's now go ahead and implement the modal component. At the top, we'll import motion again, as well as the backdrop component that we just built. Then we'll define and export a component called modal that has 2 props. 1 is a function to close the modal and the other is the text that we want to display inside of the window.

In the JSX, we declare the backdrop component because that will always sit behind the window itself. And when the backdrop is clicked, it will automatically close the window. Now because we're using the children prop in the backdrop, we can add elements inside of it, like the motion div here, which will represent the window. Now the first thing I wanna do here is set up the click handler and call event stop propagation. Normally, when you click on something, it bubbles up the DOM to find the first event handler to take care of it.

That default browser behavior would cause the modal to automatically close anytime the content inside of it was clicked, which is not something we would want in this case. The next thing we'll do is add a modal class to it, and let's quickly take a look at the CSS. To make the width and height responsive, I'm using the clamp and min functions from CSS. Clamp, in this case, will attempt to set the width to 700 pixels, but if the screen is too small, then it will go up to 90% if needed, or if the screen is too big, it will go to a maximum of 50% of the screen width. This is a really cool trick to know in CSS because otherwise, to make the modal responsive, we'd have to set up media queries and things like that, which would take a lot more code.

Okay. Now back to our component, we have a property called variance that references an object called drop in. This object allows you to define multiple custom animation states. That's really cool because you can use it to create a complex sequence of animations based on different ways the user might interact with your app. In this animation, we have 3 states, hidden, visible, and exit.

When the window is hidden, we'll translate it along the y axis by negative 100% of the view height. When it exits, it will drop beneath the view port to positive 100 of the view height. When it is visible though, we'll put it on its natural position of 0 on the y axis. The end result is an animation that drops in from the top and lands in the middle, then when it leaves, it drops even further to the bottom. Now, one additional cool thing we can do here is tweak the transition settings.

When it becomes visible, I'm going to set the duration to point one second and give it a spring type animation to make it look kind of bouncy, and that provides a very easy way to make your animations look special. I I don't wanna get into the physics of it, but damping is a decrease in the amplitude of an oscillation as a result of energy being drained from the system to overcome frictional or other resistive forces. If you turn it down really low, the spring will never stop bouncing. But if you turn it up too high, then the spring won't have much of a bounce at all. With stiffness, if you turn it down really low, then it'll make the spring react very slowly and vice versa if you turn it up very high.

If you wanna dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a frame or motion component. The final thing we'll want to do in this component is go back down to the motion div and add props for the different states like initial, animate, and exit. And now the final question becomes, how do we actually trigger this animation in the React app? For that, we'll head back into our root app component, and inside of it, import the use state hook from React as well as the modal we just built. In order to open and close it, we need some state on this component that will tell us whether or not it's currently opened or closed, and we can easily set that up with the use state hook.

It'll have a default value of false. And then just to make our code a little more readable here, I'm going to set up functions for close and open that will toggle the value between true and false. Now with our state setup, we can go down to the launch modal button that we created at the beginning and define its on click event handler to run the close function if the modal is open, otherwise, run the open function. That allows us to toggle the state from the button, but we also need to toggle the state from the modal itself, like when the user clicks on backdrop or from the close button within the window itself. So if modal open is true, then we'll render the modal component and it will take the props of modal open as while as handle close to make it aware of the data or state in the parent app component.

If we check it out in the browser, we should now have a working modal window, but there's one problem here. Notice how that it animates in perfectly, but when we click the close button it just disappears instead of animating out. The reason this happens is because the modal is completely removed from the DOM when the state changes. Luckily though, framer motion has a mechanism to rescue us from this predicament. We can import the animate presence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM.

There are 2 important props here. First one is initial, which will be set to false to disable any initial animations, and the second one is exit before enter. Setting it to true will ensure that all nodes have finished animating before they're actually removed. And we can also do more advanced things here, like listen to life cycle events. If we go ahead and try it again, we now get the full sequence of animations from enter to exit.

Congratulations. You just built an animated modal window with React and Framer Motion. Oh, and I almost forgot. I told you I would make the modal window draggable. To accomplish that, all we have to do is add the drag prop to the motion div.

And now, you're free to drag it around the screen. I'm gonna go ahead and wrap things up there. But if you wanna learn some more advanced concepts, like how to build a notification feed and work with drag and drop gestures in Framer, Consider upgrading to FireShip Pro to get access to the sequel. Thanks for watching, and I will see you in the next one.
Animation is one of the most satisfying things for a developer because it can turn a boring cookie cutter feature into something really special. In today's video, we'll build a modal window and react from scratch. But on top of that, we'll also bring in a library called Framer Motion to implement a bunch of crazy animations for the modal. In this beginner friendly tutorial, You'll learn how to style a modal with CSS, then how to manage its open and close state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion and and React, and I'll even show you how to drag and move a modal around the screen and explain the physics behind motion like this, and we'll look at a bunch of other cool tricks and best practices along the way. If you're new here, like and subscribe. And if you like this tutorial, upgrade to a pro membership on Fireship IO to get access to the SQL where we build a notification system on a framer. Before we jump into the code, let's take a closer look at what we're building today. And by the way, there's also a live demo where you can play around with this project before you build We have a button that when clicked, will add a backdrop to the entire screen and then animate a window on top of it. Then to close it, we can either click the close button or click outside of it on the backdrop, which will automatically trigger the outro animation. Modals are a very useful UI feature when you need to focus the user's attention and or you don't want to navigate them to an entirely different route.
animation
data management
programming
graphic design
databases
robotics
toys
visualization
modeling
You can also do complex things inside of them. For example, the entire login feature for FireShip IO is handled inside on modal. What you don't wanna do is pop one of these things up after a few seconds asking someone to subscribe to your newsletter, or even worse, asking them to except cookies.
Let's go ahead and jump into the code. To get started, we'll first need to generate a React project, and for that, I'm using create act app. Once created, I'll go ahead and open it up in Versus Code and install our only dependency, which is framer motion. Framer, by the way, is maintained by the team behind framer design tool and is a very well maintained and polished library for implementing animations. It's not the only way to animate in React, but in my opinion, it's the most intuitive approach for a feature like this. Now to run the app, run npm start from the command line, and that should bring up the default React app on localhost 3000. Next, we'll go into the app dotjs file and delete all of the boilerplate code.
animation
graphic design
From there, I'll go into the index dot CSS file and delete that code as well and import normalize CSS.
This is a cool little trick with create react app that will just give us a blank slate to work with when it comes to CSS. Then from there, I'm going to paste in all the CSS for this project, which you can get on GitHub, by the way. We'll come back here to explain the important styles as we move along. At this point, you should see an empty black background, and now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and get smaller when we press it. 1st, we can import the motion component from Framer Motion, then in the JSX, add a regular button that has a class name of save button, and and currently, when clicked, doesn't do anything. Now, to animate it, we can simply swap out the regular button for a Motion button. Motion actually wraps all of the HTML elements for you and provides additional props to configure an animation. Like, while hover will make the button bigger when you hover over it, and then while tap will make it smaller to give it the impression of being pushed in. And and just like that, we've already created our first animation. But you might be wondering, why would I wanna use framer motion over just regular CSS animations? Well, for 1, it's just easier and results in more simplified code. But on top of that, framework can do a lot of things that CSS can't, like listen to different browser events and integrate with the actual state of your React application.
animation
graphic design
It's just more developer friendly to work with, and that'll become apparent as we build out our next feature, the modal. To build it, we have 2 moving parts here, which we will organize in the components directory. First, we have the backdrop, which is just an overlay that sits across the entire screen and makes everything else look dark. Then the modal window sits on top of it and that's where the user's attention will be focused. When working on a larger React project, it's generally a good practice to write one component per file. In this demo, I have a directory for each main component with an index dot JSX file inside of it. A little trick in Versus Code is to hit the button for a new file and then write out the entire file path with a slash and it will automatically create the directory for you.
multimedia
architecture
visualization
animation
programming
software development
graphic design
Let's start by building the backdrop. We'll first import the Motion component, then define our own custom component called backdrop, and export it as the default from this file. The component itself will take 2 props. The first one is children, which allows us to embed additional components in between the tags for the backdrop, and the second one is on click, which allows us to pass a custom event handler into the component to update the global state when the backdrop is clicked. That allows us to think of this as a dumb component that doesn't have its own internal state to manage. In the JSX, we set up a motion div and define the on click handler as the function that gets passed in as a prop, and then the children will go in between the motion div tags. It has a class name of backdrop, and let's go ahead and take a look at the CSS before we start animating. Remember, it's an overlay, so we give it a position of absolute and set it in the top left corner with a height and width of 100%. Then we'll give it a black background, but we still want to see the elements that are underneath it.
graphic design
animation
visualization
geometry
And an easy way to do that is to simply use a hex color, but then add an additional 2 characters for the opacity.
And finally, we want to center the children both horizontally and vertically, which we can do with display flex. Now with our style set, We can go back to our component and define the various animation states to make the backdrop fade in and fade out. The initial state should be invisible, which we can set with an opacity of 0. Then, when it's active, we want to animate it to an opacity of 1. And then, when the animation is finished, we want to go back to an opacity of 0, which we can set with the exit property. And that's all there is to it, but it's not very useful without some content inside of it. Let's now go ahead and implement the modal component.
animation
geometry
At the top, we'll import motion again, as well as the backdrop component that we just built. Then we'll define and export a component called modal that has 2 props. 1 is a function to close the modal and the other is the text that we want to display inside of the window. In the JSX, we declare the backdrop component because that will always sit behind the window itself.
And when the backdrop is clicked, it will automatically close the window. Now because we're using the children prop in the backdrop, we can add elements inside of it, like the motion div here, which will represent the window. Now the first thing I wanna do here is set up the click handler and call event stop propagation.
animation
Normally, when you click on something, it bubbles up the DOM to find the first event handler to take care of it. That default browser behavior would cause the modal to automatically close anytime the content inside of it was clicked, which is not something we would want in this case. The next thing we'll do is add a modal class to it, and let's quickly take a look at the CSS. To make the width and height responsive, I'm using the clamp and min functions from CSS. Clamp, in this case, will attempt to set the width to 700 pixels, but if the screen is too small, then it will go up to 90% if needed, or if the screen is too big, it will go to a maximum of 50% of the screen width. This is a really cool trick to know in CSS because otherwise, to make the modal responsive, we'd have to set up media queries and things like that, which would take a lot more code.
Okay. Now back to our component, we have a property called variance that references an object called drop in. This object allows you to define multiple custom animation states. That's really cool because you can use it to create a complex sequence of animations based on different ways the user might interact with your app. In this animation, we have 3 states, hidden, visible, and exit. When the window is hidden, we'll translate it along the y axis by negative 100% of the view height. When it exits, it will drop beneath the view port to positive 100 of the view height. When it is visible though, we'll put it on its natural position of 0 on the y axis.
animation
visualization
graphic design
geometry
The end result is an animation that drops in from the top and lands in the middle, then when it leaves, it drops even further to the bottom. Now, one additional cool thing we can do here is tweak the transition settings. When it becomes visible, I'm going to set the duration to point one second and give it a spring type animation to make it look kind of bouncy, and that provides a very easy way to make your animations look special. I I don't wanna get into the physics of it, but damping is a decrease in the amplitude of an oscillation as a result of energy being drained from the system to overcome frictional or other resistive forces. If you turn it down really low, the spring will never stop bouncing. But if you turn it up too high, then the spring won't have much of a bounce at all. With stiffness, if you turn it down really low, then it'll make the spring react very slowly and vice versa if you turn it up very high. If you wanna dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a frame or motion component. The final thing we'll want to do in this component is go back down to the motion div and add props for the different states like initial, animate, and exit. And now the final question becomes, how do we actually trigger this animation in the React app? For that, we'll head back into our root app component, and inside of it, import the use state hook from React as well as the modal we just built. In order to open and close it, we need some state on this component that will tell us whether or not it's currently opened or closed, and we can easily set that up with the use state hook.
spring
animation
physics
It'll have a default value of false. And then just to make our code a little more readable here, I'm going to set up functions for close and open that will toggle the value between true and false. Now with our state setup, we can go down to the launch modal button that we created at the beginning and define its on click event handler to run the close function if the modal is open, otherwise, run the open function. That allows us to toggle the state from the button, but we also need to toggle the state from the modal itself, like when the user clicks on backdrop or from the close button within the window itself. So if modal open is true, then we'll render the modal component and it will take the props of modal open as while as handle close to make it aware of the data or state in the parent app component.
If we check it out in the browser, we should now have a working modal window, but there's one problem here. Notice how that it animates in perfectly, but when we click the close button it just disappears instead of animating out. The reason this happens is because the modal is completely removed from the DOM when the state changes. Luckily though, framer motion has a mechanism to rescue us from this predicament. We can import the animate presence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM. There are 2 important props here. First one is initial, which will be set to false to disable any initial animations, and the second one is exit before enter. Setting it to true will ensure that all nodes have finished animating before they're actually removed. And we can also do more advanced things here, like listen to life cycle events. If we go ahead and try it again, we now get the full sequence of animations from enter to exit. Congratulations. You just built an animated modal window with React and Framer Motion. Oh, and I almost forgot. I told you I would make the modal window draggable. To accomplish that, all we have to do is add the drag prop to the motion div. And now, you're free to drag it around the screen. I'm gonna go ahead and wrap things up there. But if you wanna learn some more advanced concepts, like how to build a notification feed and work with drag and drop gestures in Framer, Consider upgrading to FireShip Pro to get access to the sequel.
animation
Thanks for watching, and I will see you in the next one.
Animation is one of the most satisfying things for a developer because it can turn a boring cookie cutter feature into something really special. In today's video, we'll build a modal window and react from scratch. But on top of that, we'll also bring in a library called Framer Motion to implement a bunch of crazy animations for the modal. In this beginner friendly tutorial, You'll learn how to style a modal with CSS, then how to manage its open and close state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion and and React, and I'll even show you how to drag and move a modal around the screen and explain the physics behind motion like this, and we'll look at a bunch of other cool tricks and best practices along the way. If you're new here, like and subscribe. And if you like this tutorial, upgrade to a pro membership on Fireship IO to get access to the SQL where we build a notification system on a framer. Before we jump into the code, let's take a closer look at what we're building today. And by the way, there's also a live demo where you can play around with this project before you build We have a button that when clicked, will add a backdrop to the entire screen and then animate a window on top of it. Then to close it, we can either click the close button or click outside of it on the backdrop, which will automatically trigger the outro animation. Modals are a very useful UI feature when you need to focus the user's attention and or you don't want to navigate them to an entirely different route. You can also do complex things inside of them. For example, the entire login feature for FireShip IO is handled inside on modal. What you don't wanna do is pop one of these things up after a few seconds asking someone to subscribe to your newsletter, or even worse, asking them to except cookies. Let's go ahead and jump into the code. To get started, we'll first need to generate a React project, and for that, I'm using create act app. Once created, I'll go ahead and open it up in Versus Code and install our only dependency, which is framer motion. Framer, by the way, is maintained by the team behind framer design tool and is a very well maintained and polished library for implementing animations. It's not the only way to animate in React, but in my opinion, it's the most intuitive approach for a feature like this. Now to run the app, run npm start from the command line, and that should bring up the default React app on localhost 3000. Next, we'll go into the app dotjs file and delete all of the boilerplate code. From there, I'll go into the index dot CSS file and delete that code as well and import normalize CSS. This is a cool little trick with create react app that will just give us a blank slate to work with when it comes to CSS. Then from there, I'm going to paste in all the CSS for this project, which you can get on GitHub, by the way. We'll come back here to explain the important styles as we move along. At this point, you should see an empty black background, and now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and get smaller when we press it. 1st, we can import the motion component from Framer Motion, then in the JSX, add a regular button that has a class name of save button, and and currently, when clicked, doesn't do anything. Now, to animate it, we can simply swap out the regular button for a Motion button. Motion actually wraps all of the HTML elements for you and provides additional props to configure an animation. Like, while hover will make the button bigger when you hover over it, and then while tap will make it smaller to give it the impression of being pushed in. And and just like that, we've already created our first animation. But you might be wondering, why would I wanna use framer motion over just regular CSS animations? Well, for 1, it's just easier and results in more simplified code. But on top of that, framework can do a lot of things that CSS can't, like listen to different browser events and integrate with the actual state of your React application. It's just more developer friendly to work with, and that'll become apparent as we build out our next feature, the modal. To build it, we have 2 moving parts here, which we will organize in the components directory. First, we have the backdrop, which is just an overlay that sits across the entire screen and makes everything else look dark. Then the modal window sits on top of it and that's where the user's attention will be focused. When working on a larger React project, it's generally a good practice to write one component per file. In this demo, I have a directory for each main component with an index dot JSX file inside of it. A little trick in Versus Code is to hit the button for a new file and then write out the entire file path with a slash and it will automatically create the directory for you. Let's start by building the backdrop. We'll first import the Motion component, then define our own custom component called backdrop, and export it as the default from this file. The component itself will take 2 props. The first one is children, which allows us to embed additional components in between the tags for the backdrop, and the second one is on click, which allows us to pass a custom event handler into the component to update the global state when the backdrop is clicked. That allows us to think of this as a dumb component that doesn't have its own internal state to manage. In the JSX, we set up a motion div and define the on click handler as the function that gets passed in as a prop, and then the children will go in between the motion div tags. It has a class name of backdrop, and let's go ahead and take a look at the CSS before we start animating. Remember, it's an overlay, so we give it a position of absolute and set it in the top left corner with a height and width of 100%. Then we'll give it a black background, but we still want to see the elements that are underneath it. And an easy way to do that is to simply use a hex color, but then add an additional 2 characters for the opacity. And finally, we want to center the children both horizontally and vertically, which we can do with display flex. Now with our style set, We can go back to our component and define the various animation states to make the backdrop fade in and fade out. The initial state should be invisible, which we can set with an opacity of 0. Then, when it's active, we want to animate it to an opacity of 1. And then, when the animation is finished, we want to go back to an opacity of 0, which we can set with the exit property. And that's all there is to it, but it's not very useful without some content inside of it. Let's now go ahead and implement the modal component. At the top, we'll import motion again, as well as the backdrop component that we just built. Then we'll define and export a component called modal that has 2 props. 1 is a function to close the modal and the other is the text that we want to display inside of the window. In the JSX, we declare the backdrop component because that will always sit behind the window itself. And when the backdrop is clicked, it will automatically close the window. Now because we're using the children prop in the backdrop, we can add elements inside of it, like the motion div here, which will represent the window. Now the first thing I wanna do here is set up the click handler and call event stop propagation. Normally, when you click on something, it bubbles up the DOM to find the first event handler to take care of it. That default browser behavior would cause the modal to automatically close anytime the content inside of it was clicked, which is not something we would want in this case. The next thing we'll do is add a modal class to it, and let's quickly take a look at the CSS. To make the width and height responsive, I'm using the clamp and min functions from CSS. Clamp, in this case, will attempt to set the width to 700 pixels, but if the screen is too small, then it will go up to 90% if needed, or if the screen is too big, it will go to a maximum of 50% of the screen width. This is a really cool trick to know in CSS because otherwise, to make the modal responsive, we'd have to set up media queries and things like that, which would take a lot more code. Okay. Now back to our component, we have a property called variance that references an object called drop in. This object allows you to define multiple custom animation states. That's really cool because you can use it to create a complex sequence of animations based on different ways the user might interact with your app. In this animation, we have 3 states, hidden, visible, and exit. When the window is hidden, we'll translate it along the y axis by negative 100% of the view height. When it exits, it will drop beneath the view port to positive 100 of the view height. When it is visible though, we'll put it on its natural position of 0 on the y axis. The end result is an animation that drops in from the top and lands in the middle, then when it leaves, it drops even further to the bottom. Now, one additional cool thing we can do here is tweak the transition settings. When it becomes visible, I'm going to set the duration to point one second and give it a spring type animation to make it look kind of bouncy, and that provides a very easy way to make your animations look special. I I don't wanna get into the physics of it, but damping is a decrease in the amplitude of an oscillation as a result of energy being drained from the system to overcome frictional or other resistive forces. If you turn it down really low, the spring will never stop bouncing. But if you turn it up too high, then the spring won't have much of a bounce at all. With stiffness, if you turn it down really low, then it'll make the spring react very slowly and vice versa if you turn it up very high. If you wanna dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a frame or motion component. The final thing we'll want to do in this component is go back down to the motion div and add props for the different states like initial, animate, and exit. And now the final question becomes, how do we actually trigger this animation in the React app? For that, we'll head back into our root app component, and inside of it, import the use state hook from React as well as the modal we just built. In order to open and close it, we need some state on this component that will tell us whether or not it's currently opened or closed, and we can easily set that up with the use state hook. It'll have a default value of false. And then just to make our code a little more readable here, I'm going to set up functions for close and open that will toggle the value between true and false. Now with our state setup, we can go down to the launch modal button that we created at the beginning and define its on click event handler to run the close function if the modal is open, otherwise, run the open function. That allows us to toggle the state from the button, but we also need to toggle the state from the modal itself, like when the user clicks on backdrop or from the close button within the window itself. So if modal open is true, then we'll render the modal component and it will take the props of modal open as while as handle close to make it aware of the data or state in the parent app component. If we check it out in the browser, we should now have a working modal window, but there's one problem here. Notice how that it animates in perfectly, but when we click the close button it just disappears instead of animating out. The reason this happens is because the modal is completely removed from the DOM when the state changes. Luckily though, framer motion has a mechanism to rescue us from this predicament. We can import the animate presence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM. There are 2 important props here. First one is initial, which will be set to false to disable any initial animations, and the second one is exit before enter. Setting it to true will ensure that all nodes have finished animating before they're actually removed. And we can also do more advanced things here, like listen to life cycle events. If we go ahead and try it again, we now get the full sequence of animations from enter to exit. Congratulations. You just built an animated modal window with React and Framer Motion. Oh, and I almost forgot. I told you I would make the modal window draggable. To accomplish that, all we have to do is add the drag prop to the motion div. And now, you're free to drag it around the screen. I'm gonna go ahead and wrap things up there. But if you wanna learn some more advanced concepts, like how to build a notification feed and work with drag and drop gestures in Framer, Consider upgrading to FireShip Pro to get access to the sequel. Thanks for watching, and I will see you in the next one.
Animation
animation
is
is
one
one
of
of
the
the
most
most
satisfying
satisfying
things
things
for
for
a
a
developer
developer
because
because
it
it
can
can
turn
turn
a
a
boring
boring
cookie
cookie
cutter
cutter
feature
feature
into
into
something
something
really
really
special.
special
In
in
today's
today's
video,
video
we'll
we'll
build
build
a
a
modal
modal
window
window
and
and
react
react
from
from
scratch.
scratch
But
but
on
on
top
top
of
of
that,
that
we'll
we'll
also
also
bring
bring
in
in
a
a
library
library
called
called
Framer
framer
Motion
motion
to
to
implement
implement
a
a
bunch
bunch
of
of
crazy
crazy
animations
animations
for
for
the
the
modal.
modal
In
in
this
this
beginner
beginner
friendly
friendly
tutorial,
tutorial
You'll
you'll
learn
learn
how
how
to
to
style
style
a
a
modal
modal
with
with
CSS,
css
then
then
how
how
to
to
manage
manage
its
its
open
open
and
and
close
close
state
state
with
with
JavaScript,
javascript
and
and
most
most
importantly,
importantly
how
how
to
to
implement
implement
declarative
declarative
animations
animations
with
with
Framer
framer
Motion
motion
and
and
and
and
React,
react
and
and
I'll
i'll
even
even
show
show
you
you
how
how
to
to
drag
drag
and
and
move
move
a
a
modal
modal
around
around
the
the
screen
screen
and
and
explain
explain
the
the
physics
physics
behind
behind
motion
motion
like
like
this,
this
and
and
we'll
we'll
look
look
at
at
a
a
bunch
bunch
of
of
other
other
cool
cool
tricks
tricks
and
and
best
best
practices
practices
along
along
the
the
way.
way
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
like
like
this
this
tutorial,
tutorial
upgrade
upgrade
to
to
a
a
pro
pro
membership
membership
on
on
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
the
the
SQL
sql
where
where
we
we
build
build
a
a
notification
notification
system
system
on
on
a
a
framer.
framer
Before
before
we
we
jump
jump
into
into
the
the
code,
code
let's
let's
take
take
a
a
closer
closer
look
look
at
at
what
what
we're
we're
building
building
today.
today
And
and
by
by
the
the
way,
way
there's
there's
also
also
a
a
live
live
demo
demo
where
where
you
you
can
can
play
play
around
around
with
with
this
this
project
project
before
before
you
you
build
build
We
we
have
have
a
a
button
button
that
that
when
when
clicked,
clicked
will
will
add
add
a
a
backdrop
backdrop
to
to
the
the
entire
entire
screen
screen
and
and
then
then
animate
animate
a
a
window
window
on
on
top
top
of
of
it.
it
Then
then
to
to
close
close
it,
it
we
we
can
can
either
either
click
click
the
the
close
close
button
button
or
or
click
click
outside
outside
of
of
it
it
on
on
the
the
backdrop,
backdrop
which
which
will
will
automatically
automatically
trigger
trigger
the
the
outro
outro
animation.
animation
Modals
modals
are
are
a
a
very
very
useful
useful
UI
ui
feature
feature
when
when
you
you
need
need
to
to
focus
focus
the
the
user's
user's
attention
attention
and
and
or
or
you
you
don't
don't
want
want
to
to
navigate
navigate
them
them
to
to
an
an
entirely
entirely
different
different
route.
route
You
you
can
can
also
also
do
do
complex
complex
things
things
inside
inside
of
of
them.
them
For
for
example,
example
the
the
entire
entire
login
login
feature
feature
for
for
FireShip
fireship
IO
io
is
is
handled
handled
inside
inside
on
on
modal.
modal
What
what
you
you
don't
don't
wanna
wanna
do
do
is
is
pop
pop
one
one
of
of
these
these
things
things
up
up
after
after
a
a
few
few
seconds
seconds
asking
asking
someone
someone
to
to
subscribe
subscribe
to
to
your
your
newsletter,
newsletter
or
or
even
even
worse,
worse
asking
asking
them
them
to
to
except
except
cookies.
cookies
Let's
let's
go
go
ahead
ahead
and
and
jump
jump
into
into
the
the
code.
code
To
to
get
get
started,
started
we'll
we'll
first
first
need
need
to
to
generate
generate
a
a
React
react
project,
project
and
and
for
for
that,
that
I'm
i'm
using
using
create
create
act
act
app.
app
Once
once
created,
created
I'll
i'll
go
go
ahead
ahead
and
and
open
open
it
it
up
up
in
in
Versus
versus
Code
code
and
and
install
install
our
our
only
only
dependency,
dependency
which
which
is
is
framer
framer
motion.
motion
Framer,
framer
by
by
the
the
way,
way
is
is
maintained
maintained
by
by
the
the
team
team
behind
behind
framer
framer
design
design
tool
tool
and
and
is
is
a
a
very
very
well
well
maintained
maintained
and
and
polished
polished
library
library
for
for
implementing
implementing
animations.
animations
It's
it's
not
not
the
the
only
only
way
way
to
to
animate
animate
in
in
React,
react
but
but
in
in
my
my
opinion,
opinion
it's
it's
the
the
most
most
intuitive
intuitive
approach
approach
for
for
a
a
feature
feature
like
like
this.
this
Now
now
to
to
run
run
the
the
app,
app
run
run
npm
npm
start
start
from
from
the
the
command
command
line,
line
and
and
that
that
should
should
bring
bring
up
up
the
the
default
default
React
react
app
app
on
on
localhost
localhost
3000.
3000
Next,
next
we'll
we'll
go
go
into
into
the
the
app
app
dotjs
dotjs
file
file
and
and
delete
delete
all
all
of
of
the
the
boilerplate
boilerplate
code.
code
From
from
there,
there
I'll
i'll
go
go
into
into
the
the
index
index
dot
dot
CSS
css
file
file
and
and
delete
delete
that
that
code
code
as
as
well
well
and
and
import
import
normalize
normalize
CSS.
css
This
this
is
is
a
a
cool
cool
little
little
trick
trick
with
with
create
create
react
react
app
app
that
that
will
will
just
just
give
give
us
us
a
a
blank
blank
slate
slate
to
to
work
work
with
with
when
when
it
it
comes
comes
to
to
CSS.
css
Then
then
from
from
there,
there
I'm
i'm
going
going
to
to
paste
paste
in
in
all
all
the
the
CSS
css
for
for
this
this
project,
project
which
which
you
you
can
can
get
get
on
on
GitHub,
github
by
by
the
the
way.
way
We'll
we'll
come
come
back
back
here
here
to
to
explain
explain
the
the
important
important
styles
styles
as
as
we
we
move
move
along.
along
At
at
this
this
point,
point
you
you
should
should
see
see
an
an
empty
empty
black
black
background,
background
and
and
now
now
we're
we're
ready
ready
to
to
implement
implement
our
our
first
first
animation,
animation
which
which
is
is
a
a
button
button
that
that
gets
gets
bigger
bigger
when
when
we
we
hover
hover
over
over
it
it
and
and
get
get
smaller
smaller
when
when
we
we
press
press
it.
it
1st,
1st
we
we
can
can
import
import
the
the
motion
motion
component
component
from
from
Framer
framer
Motion,
motion
then
then
in
in
the
the
JSX,
jsx
add
add
a
a
regular
regular
button
button
that
that
has
has
a
a
class
class
name
name
of
of
save
save
button,
button
and
and
and
and
currently,
currently
when
when
clicked,
clicked
doesn't
doesn't
do
do
anything.
anything
Now,
now
to
to
animate
animate
it,
it
we
we
can
can
simply
simply
swap
swap
out
out
the
the
regular
regular
button
button
for
for
a
a
Motion
motion
button.
button
Motion
motion
actually
actually
wraps
wraps
all
all
of
of
the
the
HTML
html
elements
elements
for
for
you
you
and
and
provides
provides
additional
additional
props
props
to
to
configure
configure
an
an
animation.
animation
Like,
like
while
while
hover
hover
will
will
make
make
the
the
button
button
bigger
bigger
when
when
you
you
hover
hover
over
over
it,
it
and
and
then
then
while
while
tap
tap
will
will
make
make
it
it
smaller
smaller
to
to
give
give
it
it
the
the
impression
impression
of
of
being
being
pushed
pushed
in.
in
And
and
and
and
just
just
like
like
that,
that
we've
we've
already
already
created
created
our
our
first
first
animation.
animation
But
but
you
you
might
might
be
be
wondering,
wondering
why
why
would
would
I
i
wanna
wanna
use
use
framer
framer
motion
motion
over
over
just
just
regular
regular
CSS
css
animations?
animations
Well,
well
for
for
1,
1
it's
it's
just
just
easier
easier
and
and
results
results
in
in
more
more
simplified
simplified
code.
code
But
but
on
on
top
top
of
of
that,
that
framework
framework
can
can
do
do
a
a
lot
lot
of
of
things
things
that
that
CSS
css
can't,
can't
like
like
listen
listen
to
to
different
different
browser
browser
events
events
and
and
integrate
integrate
with
with
the
the
actual
actual
state
state
of
of
your
your
React
react
application.
application
It's
it's
just
just
more
more
developer
developer
friendly
friendly
to
to
work
work
with,
with
and
and
that'll
that'll
become
become
apparent
apparent
as
as
we
we
build
build
out
out
our
our
next
next
feature,
feature
the
the
modal.
modal
To
to
build
build
it,
it
we
we
have
have
2
2
moving
moving
parts
parts
here,
here
which
which
we
we
will
will
organize
organize
in
in
the
the
components
components
directory.
directory
First,
first
we
we
have
have
the
the
backdrop,
backdrop
which
which
is
is
just
just
an
an
overlay
overlay
that
that
sits
sits
across
across
the
the
entire
entire
screen
screen
and
and
makes
makes
everything
everything
else
else
look
look
dark.
dark
Then
then
the
the
modal
modal
window
window
sits
sits
on
on
top
top
of
of
it
it
and
and
that's
that's
where
where
the
the
user's
user's
attention
attention
will
will
be
be
focused.
focused
When
when
working
working
on
on
a
a
larger
larger
React
react
project,
project
it's
it's
generally
generally
a
a
good
good
practice
practice
to
to
write
write
one
one
component
component
per
per
file.
file
In
in
this
this
demo,
demo
I
i
have
have
a
a
directory
directory
for
for
each
each
main
main
component
component
with
with
an
an
index
index
dot
dot
JSX
jsx
file
file
inside
inside
of
of
it.
it
A
a
little
little
trick
trick
in
in
Versus
versus
Code
code
is
is
to
to
hit
hit
the
the
button
button
for
for
a
a
new
new
file
file
and
and
then
then
write
write
out
out
the
the
entire
entire
file
file
path
path
with
with
a
a
slash
slash
and
and
it
it
will
will
automatically
automatically
create
create
the
the
directory
directory
for
for
you.
you
Let's
let's
start
start
by
by
building
building
the
the
backdrop.
backdrop
We'll
we'll
first
first
import
import
the
the
Motion
motion
component,
component
then
then
define
define
our
our
own
own
custom
custom
component
component
called
called
backdrop,
backdrop
and
and
export
export
it
it
as
as
the
the
default
default
from
from
this
this
file.
file
The
the
component
component
itself
itself
will
will
take
take
2
2
props.
props
The
the
first
first
one
one
is
is
children,
children
which
which
allows
allows
us
us
to
to
embed
embed
additional
additional
components
components
in
in
between
between
the
the
tags
tags
for
for
the
the
backdrop,
backdrop
and
and
the
the
second
second
one
one
is
is
on
on
click,
click
which
which
allows
allows
us
us
to
to
pass
pass
a
a
custom
custom
event
event
handler
handler
into
into
the
the
component
component
to
to
update
update
the
the
global
global
state
state
when
when
the
the
backdrop
backdrop
is
is
clicked.
clicked
That
that
allows
allows
us
us
to
to
think
think
of
of
this
this
as
as
a
a
dumb
dumb
component
component
that
that
doesn't
doesn't
have
have
its
its
own
own
internal
internal
state
state
to
to
manage.
manage
In
in
the
the
JSX,
jsx
we
we
set
set
up
up
a
a
motion
motion
div
div
and
and
define
define
the
the
on
on
click
click
handler
handler
as
as
the
the
function
function
that
that
gets
gets
passed
passed
in
in
as
as
a
a
prop,
prop
and
and
then
then
the
the
children
children
will
will
go
go
in
in
between
between
the
the
motion
motion
div
div
tags.
tags
It
it
has
has
a
a
class
class
name
name
of
of
backdrop,
backdrop
and
and
let's
let's
go
go
ahead
ahead
and
and
take
take
a
a
look
look
at
at
the
the
CSS
css
before
before
we
we
start
start
animating.
animating
Remember,
remember
it's
it's
an
an
overlay,
overlay
so
so
we
we
give
give
it
it
a
a
position
position
of
of
absolute
absolute
and
and
set
set
it
it
in
in
the
the
top
top
left
left
corner
corner
with
with
a
a
height
height
and
and
width
width
of
of
100%.
100%
Then
then
we'll
we'll
give
give
it
it
a
a
black
black
background,
background
but
but
we
we
still
still
want
want
to
to
see
see
the
the
elements
elements
that
that
are
are
underneath
underneath
it.
it
And
and
an
an
easy
easy
way
way
to
to
do
do
that
that
is
is
to
to
simply
simply
use
use
a
a
hex
hex
color,
color
but
but
then
then
add
add
an
an
additional
additional
2
2
characters
characters
for
for
the
the
opacity.
opacity
And
and
finally,
finally
we
we
want
want
to
to
center
center
the
the
children
children
both
both
horizontally
horizontally
and
and
vertically,
vertically
which
which
we
we
can
can
do
do
with
with
display
display
flex.
flex
Now
now
with
with
our
our
style
style
set,
set
We
we
can
can
go
go
back
back
to
to
our
our
component
component
and
and
define
define
the
the
various
various
animation
animation
states
states
to
to
make
make
the
the
backdrop
backdrop
fade
fade
in
in
and
and
fade
fade
out.
out
The
the
initial
initial
state
state
should
should
be
be
invisible,
invisible
which
which
we
we
can
can
set
set
with
with
an
an
opacity
opacity
of
of
0.
0
Then,
then
when
when
it's
it's
active,
active
we
we
want
want
to
to
animate
animate
it
it
to
to
an
an
opacity
opacity
of
of
1.
1
And
and
then,
then
when
when
the
the
animation
animation
is
is
finished,
finished
we
we
want
want
to
to
go
go
back
back
to
to
an
an
opacity
opacity
of
of
0,
0
which
which
we
we
can
can
set
set
with
with
the
the
exit
exit
property.
property
And
and
that's
that's
all
all
there
there
is
is
to
to
it,
it
but
but
it's
it's
not
not
very
very
useful
useful
without
without
some
some
content
content
inside
inside
of
of
it.
it
Let's
let's
now
now
go
go
ahead
ahead
and
and
implement
implement
the
the
modal
modal
component.
component
At
at
the
the
top,
top
we'll
we'll
import
import
motion
motion
again,
again
as
as
well
well
as
as
the
the
backdrop
backdrop
component
component
that
that
we
we
just
just
built.
built
Then
then
we'll
we'll
define
define
and
and
export
export
a
a
component
component
called
called
modal
modal
that
that
has
has
2
2
props.
props
1
1
is
is
a
a
function
function
to
to
close
close
the
the
modal
modal
and
and
the
the
other
other
is
is
the
the
text
text
that
that
we
we
want
want
to
to
display
display
inside
inside
of
of
the
the
window.
window
In
in
the
the
JSX,
jsx
we
we
declare
declare
the
the
backdrop
backdrop
component
component
because
because
that
that
will
will
always
always
sit
sit
behind
behind
the
the
window
window
itself.
itself
And
and
when
when
the
the
backdrop
backdrop
is
is
clicked,
clicked
it
it
will
will
automatically
automatically
close
close
the
the
window.
window
Now
now
because
because
we're
we're
using
using
the
the
children
children
prop
prop
in
in
the
the
backdrop,
backdrop
we
we
can
can
add
add
elements
elements
inside
inside
of
of
it,
it
like
like
the
the
motion
motion
div
div
here,
here
which
which
will
will
represent
represent
the
the
window.
window
Now
now
the
the
first
first
thing
thing
I
i
wanna
wanna
do
do
here
here
is
is
set
set
up
up
the
the
click
click
handler
handler
and
and
call
call
event
event
stop
stop
propagation.
propagation
Normally,
normally
when
when
you
you
click
click
on
on
something,
something
it
it
bubbles
bubbles
up
up
the
the
DOM
dom
to
to
find
find
the
the
first
first
event
event
handler
handler
to
to
take
take
care
care
of
of
it.
it
That
that
default
default
browser
browser
behavior
behavior
would
would
cause
cause
the
the
modal
modal
to
to
automatically
automatically
close
close
anytime
anytime
the
the
content
content
inside
inside
of
of
it
it
was
was
clicked,
clicked
which
which
is
is
not
not
something
something
we
we
would
would
want
want
in
in
this
this
case.
case
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
add
add
a
a
modal
modal
class
class
to
to
it,
it
and
and
let's
let's
quickly
quickly
take
take
a
a
look
look
at
at
the
the
CSS.
css
To
to
make
make
the
the
width
width
and
and
height
height
responsive,
responsive
I'm
i'm
using
using
the
the
clamp
clamp
and
and
min
min
functions
functions
from
from
CSS.
css
Clamp,
clamp
in
in
this
this
case,
case
will
will
attempt
attempt
to
to
set
set
the
the
width
width
to
to
700
700
pixels,
pixels
but
but
if
if
the
the
screen
screen
is
is
too
too
small,
small
then
then
it
it
will
will
go
go
up
up
to
to
90%
90%
if
if
needed,
needed
or
or
if
if
the
the
screen
screen
is
is
too
too
big,
big
it
it
will
will
go
go
to
to
a
a
maximum
maximum
of
of
50%
50%
of
of
the
the
screen
screen
width.
width
This
this
is
is
a
a
really
really
cool
cool
trick
trick
to
to
know
know
in
in
CSS
css
because
because
otherwise,
otherwise
to
to
make
make
the
the
modal
modal
responsive,
responsive
we'd
we'd
have
have
to
to
set
set
up
up
media
media
queries
queries
and
and
things
things
like
like
that,
that
which
which
would
would
take
take
a
a
lot
lot
more
more
code.
code
Okay.
okay
Now
now
back
back
to
to
our
our
component,
component
we
we
have
have
a
a
property
property
called
called
variance
variance
that
that
references
references
an
an
object
object
called
called
drop
drop
in.
in
This
this
object
object
allows
allows
you
you
to
to
define
define
multiple
multiple
custom
custom
animation
animation
states.
states
That's
that's
really
really
cool
cool
because
because
you
you
can
can
use
use
it
it
to
to
create
create
a
a
complex
complex
sequence
sequence
of
of
animations
animations
based
based
on
on
different
different
ways
ways
the
the
user
user
might
might
interact
interact
with
with
your
your
app.
app
In
in
this
this
animation,
animation
we
we
have
have
3
3
states,
states
hidden,
hidden
visible,
visible
and
and
exit.
exit
When
when
the
the
window
window
is
is
hidden,
hidden
we'll
we'll
translate
translate
it
it
along
along
the
the
y
y
axis
axis
by
by
negative
negative
100%
100%
of
of
the
the
view
view
height.
height
When
when
it
it
exits,
exits
it
it
will
will
drop
drop
beneath
beneath
the
the
view
view
port
port
to
to
positive
positive
100
100
of
of
the
the
view
view
height.
height
When
when
it
it
is
is
visible
visible
though,
though
we'll
we'll
put
put
it
it
on
on
its
its
natural
natural
position
position
of
of
0
0
on
on
the
the
y
y
axis.
axis
The
the
end
end
result
result
is
is
an
an
animation
animation
that
that
drops
drops
in
in
from
from
the
the
top
top
and
and
lands
lands
in
in
the
the
middle,
middle
then
then
when
when
it
it
leaves,
leaves
it
it
drops
drops
even
even
further
further
to
to
the
the
bottom.
bottom
Now,
now
one
one
additional
additional
cool
cool
thing
thing
we
we
can
can
do
do
here
here
is
is
tweak
tweak
the
the
transition
transition
settings.
settings
When
when
it
it
becomes
becomes
visible,
visible
I'm
i'm
going
going
to
to
set
set
the
the
duration
duration
to
to
point
point
one
one
second
second
and
and
give
give
it
it
a
a
spring
spring
type
type
animation
animation
to
to
make
make
it
it
look
look
kind
kind
of
of
bouncy,
bouncy
and
and
that
that
provides
provides
a
a
very
very
easy
easy
way
way
to
to
make
make
your
your
animations
animations
look
look
special.
special
I
i
I
i
don't
don't
wanna
wanna
get
get
into
into
the
the
physics
physics
of
of
it,
it
but
but
damping
damping
is
is
a
a
decrease
decrease
in
in
the
the
amplitude
amplitude
of
of
an
an
oscillation
oscillation
as
as
a
a
result
result
of
of
energy
energy
being
being
drained
drained
from
from
the
the
system
system
to
to
overcome
overcome
frictional
frictional
or
or
other
other
resistive
resistive
forces.
forces
If
if
you
you
turn
turn
it
it
down
down
really
really
low,
low
the
the
spring
spring
will
will
never
never
stop
stop
bouncing.
bouncing
But
but
if
if
you
you
turn
turn
it
it
up
up
too
too
high,
high
then
then
the
the
spring
spring
won't
won't
have
have
much
much
of
of
a
a
bounce
bounce
at
at
all.
all
With
with
stiffness,
stiffness
if
if
you
you
turn
turn
it
it
down
down
really
really
low,
low
then
then
it'll
it'll
make
make
the
the
spring
spring
react
react
very
very
slowly
slowly
and
and
vice
vice
versa
versa
if
if
you
you
turn
turn
it
it
up
up
very
very
high.
high
If
if
you
you
wanna
wanna
dive
dive
deeper
deeper
into
into
spring
spring
animations,
animations
I'll
i'll
link
link
to
to
a
a
brilliant
brilliant
blog
blog
post
post
that
that
actually
actually
visualizes
visualizes
the
the
relationship
relationship
between
between
damping
damping
and
and
stiffness
stiffness
in
in
a
a
frame
frame
or
or
motion
motion
component.
component
The
the
final
final
thing
thing
we'll
we'll
want
want
to
to
do
do
in
in
this
this
component
component
is
is
go
go
back
back
down
down
to
to
the
the
motion
motion
div
div
and
and
add
add
props
props
for
for
the
the
different
different
states
states
like
like
initial,
initial
animate,
animate
and
and
exit.
exit
And
and
now
now
the
the
final
final
question
question
becomes,
becomes
how
how
do
do
we
we
actually
actually
trigger
trigger
this
this
animation
animation
in
in
the
the
React
react
app?
app
For
for
that,
that
we'll
we'll
head
head
back
back
into
into
our
our
root
root
app
app
component,
component
and
and
inside
inside
of
of
it,
it
import
import
the
the
use
use
state
state
hook
hook
from
from
React
react
as
as
well
well
as
as
the
the
modal
modal
we
we
just
just
built.
built
In
in
order
order
to
to
open
open
and
and
close
close
it,
it
we
we
need
need
some
some
state
state
on
on
this
this
component
component
that
that
will
will
tell
tell
us
us
whether
whether
or
or
not
not
it's
it's
currently
currently
opened
opened
or
or
closed,
closed
and
and
we
we
can
can
easily
easily
set
set
that
that
up
up
with
with
the
the
use
use
state
state
hook.
hook
It'll
it'll
have
have
a
a
default
default
value
value
of
of
false.
false
And
and
then
then
just
just
to
to
make
make
our
our
code
code
a
a
little
little
more
more
readable
readable
here,
here
I'm
i'm
going
going
to
to
set
set
up
up
functions
functions
for
for
close
close
and
and
open
open
that
that
will
will
toggle
toggle
the
the
value
value
between
between
true
true
and
and
false.
false
Now
now
with
with
our
our
state
state
setup,
setup
we
we
can
can
go
go
down
down
to
to
the
the
launch
launch
modal
modal
button
button
that
that
we
we
created
created
at
at
the
the
beginning
beginning
and
and
define
define
its
its
on
on
click
click
event
event
handler
handler
to
to
run
run
the
the
close
close
function
function
if
if
the
the
modal
modal
is
is
open,
open
otherwise,
otherwise
run
run
the
the
open
open
function.
function
That
that
allows
allows
us
us
to
to
toggle
toggle
the
the
state
state
from
from
the
the
button,
button
but
but
we
we
also
also
need
need
to
to
toggle
toggle
the
the
state
state
from
from
the
the
modal
modal
itself,
itself
like
like
when
when
the
the
user
user
clicks
clicks
on
on
backdrop
backdrop
or
or
from
from
the
the
close
close
button
button
within
within
the
the
window
window
itself.
itself
So
so
if
if
modal
modal
open
open
is
is
true,
true
then
then
we'll
we'll
render
render
the
the
modal
modal
component
component
and
and
it
it
will
will
take
take
the
the
props
props
of
of
modal
modal
open
open
as
as
while
while
as
as
handle
handle
close
close
to
to
make
make
it
it
aware
aware
of
of
the
the
data
data
or
or
state
state
in
in
the
the
parent
parent
app
app
component.
component
If
if
we
we
check
check
it
it
out
out
in
in
the
the
browser,
browser
we
we
should
should
now
now
have
have
a
a
working
working
modal
modal
window,
window
but
but
there's
there's
one
one
problem
problem
here.
here
Notice
notice
how
how
that
that
it
it
animates
animates
in
in
perfectly,
perfectly
but
but
when
when
we
we
click
click
the
the
close
close
button
button
it
it
just
just
disappears
disappears
instead
instead
of
of
animating
animating
out.
out
The
the
reason
reason
this
this
happens
happens
is
is
because
because
the
the
modal
modal
is
is
completely
completely
removed
removed
from
from
the
the
DOM
dom
when
when
the
the
state
state
changes.
changes
Luckily
luckily
though,
though
framer
framer
motion
motion
has
has
a
a
mechanism
mechanism
to
to
rescue
rescue
us
us
from
from
this
this
predicament.
predicament
We
we
can
can
import
import
the
the
animate
animate
presence
presence
component
component
and
and
put
put
our
our
modal
modal
inside
inside
of
of
it
it
to
to
keep
keep
it
it
visible
visible
temporarily
temporarily
even
even
after
after
it's
it's
been
been
removed
removed
from
from
the
the
DOM.
dom
There
there
are
are
2
2
important
important
props
props
here.
here
First
first
one
one
is
is
initial,
initial
which
which
will
will
be
be
set
set
to
to
false
false
to
to
disable
disable
any
any
initial
initial
animations,
animations
and
and
the
the
second
second
one
one
is
is
exit
exit
before
before
enter.
enter
Setting
setting
it
it
to
to
true
true
will
will
ensure
ensure
that
that
all
all
nodes
nodes
have
have
finished
finished
animating
animating
before
before
they're
they're
actually
actually
removed.
removed
And
and
we
we
can
can
also
also
do
do
more
more
advanced
advanced
things
things
here,
here
like
like
listen
listen
to
to
life
life
cycle
cycle
events.
events
If
if
we
we
go
go
ahead
ahead
and
and
try
try
it
it
again,
again
we
we
now
now
get
get
the
the
full
full
sequence
sequence
of
of
animations
animations
from
from
enter
enter
to
to
exit.
exit
Congratulations.
congratulations
You
you
just
just
built
built
an
an
animated
animated
modal
modal
window
window
with
with
React
react
and
and
Framer
framer
Motion.
motion
Oh,
oh
and
and
I
i
almost
almost
forgot.
forgot
I
i
told
told
you
you
I
i
would
would
make
make
the
the
modal
modal
window
window
draggable.
draggable
To
to
accomplish
accomplish
that,
that
all
all
we
we
have
have
to
to
do
do
is
is
add
add
the
the
drag
drag
prop
prop
to
to
the
the
motion
motion
div.
div
And
and
now,
now
you're
you're
free
free
to
to
drag
drag
it
it
around
around
the
the
screen.
screen
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
But
but
if
if
you
you
wanna
wanna
learn
learn
some
some
more
more
advanced
advanced
concepts,
concepts
like
like
how
how
to
to
build
build
a
a
notification
notification
feed
feed
and
and
work
work
with
with
drag
drag
and
and
drop
drop
gestures
gestures
in
in
Framer,
framer
Consider
consider
upgrading
upgrading
to
to
FireShip
fireship
Pro
pro
to
to
get
get
access
access
to
to
the
the
sequel.
sequel
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to style a modal with CSS, manage its open and close state, implement declarative animations with Framer Motion and React, and drag and move a modal around the screen. They also show a tutorial on creating a React project using the creation of an app and explain the importance of using the front and backdrop elements for the styles. The speaker then discusses how to use the code in React to create a modal, including using frame rate, manual translation, and the use state hook, and provides tips on how to use the code and upgrade to Firehair Pro for more advanced settings.
Springy Animated Modals // Framer Motion & React Tutorial for Beginners
Animation is one of the most satisfying things for a developer because it can turn a boring cookie cutter feature into something really special. In today's video, we'll build a modal window and react from scratch. But on top of that, we'll also bring in a library called Framer Motion to implement a bunch of crazy animations for the modal. In this beginner friendly tutorial, You'll learn how to style a modal with CSS, then how to manage its open and close state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion and and React, and I'll even show you how to drag and move a modal around the screen and explain the physics behind motion like this, and we'll look at a bunch of other cool tricks and best practices along the way. If you're new here, like and subscribe. And if you like this tutorial, upgrade to a pro membership on Fireship IO to get access to the SQL where we build a notification system on a framer. Before we jump into the code, let's take a closer look at what we're building today. And by the way, there's also a live demo where you can play around with this project before you build We have a button that when clicked, will add a backdrop to the entire screen and then animate a window on top of it. Then to close it, we can either click the close button or click outside of it on the backdrop, which will automatically trigger the outro animation. Modals are a very useful UI feature when you need to focus the user's attention and or you don't want to navigate them to an entirely different route. You can also do complex things inside of them. For example, the entire login feature for FireShip IO is handled inside on modal. What you don't wanna do is pop one of these things up after a few seconds asking someone to subscribe to your newsletter, or even worse, asking them to except cookies. Let's go ahead and jump into the code. To get started, we'll first need to generate a React project, and for that, I'm using create act app. Once created, I'll go ahead and open it up in Versus Code and install our only dependency, which is framer motion. Framer, by the way, is maintained by the team behind framer design tool and is a very well maintained and polished library for implementing animations. It's not the only way to animate in React, but in my opinion, it's the most intuitive approach for a feature like this. Now to run the app, run npm start from the command line, and that should bring up the default React app on localhost 3000. Next, we'll go into the app dotjs file and delete all of the boilerplate code. From there, I'll go into the index dot CSS file and delete that code as well and import normalize CSS. This is a cool little trick with create react app that will just give us a blank slate to work with when it comes to CSS. Then from there, I'm going to paste in all the CSS for this project, which you can get on GitHub, by the way. We'll come back here to explain the important styles as we move along. At this point, you should see an empty black background, and now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and get smaller when we press it. 1st, we can import the motion component from Framer Motion, then in the JSX, add a regular button that has a class name of save button, and and currently, when clicked, doesn't do anything. Now, to animate it, we can simply swap out the regular button for a Motion button. Motion actually wraps all of the HTML elements for you and provides additional props to configure an animation. Like, while hover will make the button bigger when you hover over it, and then while tap will make it smaller to give it the impression of being pushed in. And and just like that, we've already created our first animation. But you might be wondering, why would I wanna use framer motion over just regular CSS animations? Well, for 1, it's just easier and results in more simplified code. But on top of that, framework can do a lot of things that CSS can't, like listen to different browser events and integrate with the actual state of your React application. It's just more developer friendly to work with, and that'll become apparent as we build out our next feature, the modal. To build it, we have 2 moving parts here, which we will organize in the components directory. First, we have the backdrop, which is just an overlay that sits across the entire screen and makes everything else look dark. Then the modal window sits on top of it and that's where the user's attention will be focused. When working on a larger React project, it's generally a good practice to write one component per file. In this demo, I have a directory for each main component with an index dot JSX file inside of it. A little trick in Versus Code is to hit the button for a new file and then write out the entire file path with a slash and it will automatically create the directory for you. Let's start by building the backdrop. We'll first import the Motion component, then define our own custom component called backdrop, and export it as the default from this file. The component itself will take 2 props. The first one is children, which allows us to embed additional components in between the tags for the backdrop, and the second one is on click, which allows us to pass a custom event handler into the component to update the global state when the backdrop is clicked. That allows us to think of this as a dumb component that doesn't have its own internal state to manage. In the JSX, we set up a motion div and define the on click handler as the function that gets passed in as a prop, and then the children will go in between the motion div tags. It has a class name of backdrop, and let's go ahead and take a look at the CSS before we start animating. Remember, it's an overlay, so we give it a position of absolute and set it in the top left corner with a height and width of 100%. Then we'll give it a black background, but we still want to see the elements that are underneath it. And an easy way to do that is to simply use a hex color, but then add an additional 2 characters for the opacity. And finally, we want to center the children both horizontally and vertically, which we can do with display flex. Now with our style set, We can go back to our component and define the various animation states to make the backdrop fade in and fade out. The initial state should be invisible, which we can set with an opacity of 0. Then, when it's active, we want to animate it to an opacity of 1. And then, when the animation is finished, we want to go back to an opacity of 0, which we can set with the exit property. And that's all there is to it, but it's not very useful without some content inside of it. Let's now go ahead and implement the modal component. At the top, we'll import motion again, as well as the backdrop component that we just built. Then we'll define and export a component called modal that has 2 props. 1 is a function to close the modal and the other is the text that we want to display inside of the window. In the JSX, we declare the backdrop component because that will always sit behind the window itself. And when the backdrop is clicked, it will automatically close the window. Now because we're using the children prop in the backdrop, we can add elements inside of it, like the motion div here, which will represent the window. Now the first thing I wanna do here is set up the click handler and call event stop propagation. Normally, when you click on something, it bubbles up the DOM to find the first event handler to take care of it. That default browser behavior would cause the modal to automatically close anytime the content inside of it was clicked, which is not something we would want in this case. The next thing we'll do is add a modal class to it, and let's quickly take a look at the CSS. To make the width and height responsive, I'm using the clamp and min functions from CSS. Clamp, in this case, will attempt to set the width to 700 pixels, but if the screen is too small, then it will go up to 90% if needed, or if the screen is too big, it will go to a maximum of 50% of the screen width. This is a really cool trick to know in CSS because otherwise, to make the modal responsive, we'd have to set up media queries and things like that, which would take a lot more code. Okay. Now back to our component, we have a property called variance that references an object called drop in. This object allows you to define multiple custom animation states. That's really cool because you can use it to create a complex sequence of animations based on different ways the user might interact with your app. In this animation, we have 3 states, hidden, visible, and exit. When the window is hidden, we'll translate it along the y axis by negative 100% of the view height. When it exits, it will drop beneath the view port to positive 100 of the view height. When it is visible though, we'll put it on its natural position of 0 on the y axis. The end result is an animation that drops in from the top and lands in the middle, then when it leaves, it drops even further to the bottom. Now, one additional cool thing we can do here is tweak the transition settings. When it becomes visible, I'm going to set the duration to point one second and give it a spring type animation to make it look kind of bouncy, and that provides a very easy way to make your animations look special. I I don't wanna get into the physics of it, but damping is a decrease in the amplitude of an oscillation as a result of energy being drained from the system to overcome frictional or other resistive forces. If you turn it down really low, the spring will never stop bouncing. But if you turn it up too high, then the spring won't have much of a bounce at all. With stiffness, if you turn it down really low, then it'll make the spring react very slowly and vice versa if you turn it up very high. If you wanna dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a frame or motion component. The final thing we'll want to do in this component is go back down to the motion div and add props for the different states like initial, animate, and exit. And now the final question becomes, how do we actually trigger this animation in the React app? For that, we'll head back into our root app component, and inside of it, import the use state hook from React as well as the modal we just built. In order to open and close it, we need some state on this component that will tell us whether or not it's currently opened or closed, and we can easily set that up with the use state hook. It'll have a default value of false. And then just to make our code a little more readable here, I'm going to set up functions for close and open that will toggle the value between true and false. Now with our state setup, we can go down to the launch modal button that we created at the beginning and define its on click event handler to run the close function if the modal is open, otherwise, run the open function. That allows us to toggle the state from the button, but we also need to toggle the state from the modal itself, like when the user clicks on backdrop or from the close button within the window itself. So if modal open is true, then we'll render the modal component and it will take the props of modal open as while as handle close to make it aware of the data or state in the parent app component. If we check it out in the browser, we should now have a working modal window, but there's one problem here. Notice how that it animates in perfectly, but when we click the close button it just disappears instead of animating out. The reason this happens is because the modal is completely removed from the DOM when the state changes. Luckily though, framer motion has a mechanism to rescue us from this predicament. We can import the animate presence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM. There are 2 important props here. First one is initial, which will be set to false to disable any initial animations, and the second one is exit before enter. Setting it to true will ensure that all nodes have finished animating before they're actually removed. And we can also do more advanced things here, like listen to life cycle events. If we go ahead and try it again, we now get the full sequence of animations from enter to exit. Congratulations. You just built an animated modal window with React and Framer Motion. Oh, and I almost forgot. I told you I would make the modal window draggable. To accomplish that, all we have to do is add the drag prop to the motion div. And now, you're free to drag it around the screen. I'm gonna go ahead and wrap things up there. But if you wanna learn some more advanced concepts, like how to build a notification feed and work with drag and drop gestures in Framer, Consider upgrading to FireShip Pro to get access to the sequel. Thanks for watching, and I will see you in the next one.
The speaker explains how to style a modal with CSS, manage its open and close state, implement declarative animations with Framer Motion and React, and drag and move a modal around the screen. They also show a tutorial on creating a React project using the creation of an app and explain the importance of using the front and backdrop elements for the styles. The speaker then discusses how to use the code in React to create a modal, including using frame rate, manual translation, and the use state hook, and provides tips on how to use the code and upgrade to Firehair Pro for more advanced settings.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Springy Animated Modals // Framer Motion & React Tutorial for Beginners 
        and a small summary : The speaker explains how to style a modal with CSS, manage its open and close state, implement declarative animations with Framer Motion and React, and drag and move a modal around the screen. They also show a tutorial on creating a React project using the creation of an app and explain the importance of using the front and backdrop elements for the styles. The speaker then discusses how to use the code in React to create a modal, including using frame rate, manual translation, and the use state hook, and provides tips on how to use the code and upgrade to Firehair Pro for more advanced settings.
        [/INST]
        
        Generate the video : Animation is one of the most satisfying things for a developer because it can turn a boring cookie cutter feature into something really special. In today's video, we'll build a modal window and react from scratch. But on top of that, we'll also bring in a library called Framer Motion to implement a bunch of crazy animations for the modal. In this beginner friendly tutorial, You'll learn how to style a modal with CSS, then how to manage its open and close state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion and and React, and I'll even show you how to drag and move a modal around the screen and explain the physics behind motion like this, and we'll look at a bunch of other cool tricks and best practices along the way. If you're new here, like and subscribe. And if you like this tutorial, upgrade to a pro membership on Fireship IO to get access to the SQL where we build a notification system on a framer. Before we jump into the code, let's take a closer look at what we're building today. And by the way, there's also a live demo where you can play around with this project before you build We have a button that when clicked, will add a backdrop to the entire screen and then animate a window on top of it. Then to close it, we can either click the close button or click outside of it on the backdrop, which will automatically trigger the outro animation. Modals are a very useful UI feature when you need to focus the user's attention and or you don't want to navigate them to an entirely different route. You can also do complex things inside of them. For example, the entire login feature for FireShip IO is handled inside on modal. What you don't wanna do is pop one of these things up after a few seconds asking someone to subscribe to your newsletter, or even worse, asking them to except cookies. Let's go ahead and jump into the code. To get started, we'll first need to generate a React project, and for that, I'm using create act app. Once created, I'll go ahead and open it up in Versus Code and install our only dependency, which is framer motion. Framer, by the way, is maintained by the team behind framer design tool and is a very well maintained and polished library for implementing animations. It's not the only way to animate in React, but in my opinion, it's the most intuitive approach for a feature like this. Now to run the app, run npm start from the command line, and that should bring up the default React app on localhost 3000. Next, we'll go into the app dotjs file and delete all of the boilerplate code. From there, I'll go into the index dot CSS file and delete that code as well and import normalize CSS. This is a cool little trick with create react app that will just give us a blank slate to work with when it comes to CSS. Then from there, I'm going to paste in all the CSS for this project, which you can get on GitHub, by the way. We'll come back here to explain the important styles as we move along. At this point, you should see an empty black background, and now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and get smaller when we press it. 1st, we can import the motion component from Framer Motion, then in the JSX, add a regular button that has a class name of save button, and and currently, when clicked, doesn't do anything. Now, to animate it, we can simply swap out the regular button for a Motion button. Motion actually wraps all of the HTML elements for you and provides additional props to configure an animation. Like, while hover will make the button bigger when you hover over it, and then while tap will make it smaller to give it the impression of being pushed in. And and just like that, we've already created our first animation. But you might be wondering, why would I wanna use framer motion over just regular CSS animations? Well, for 1, it's just easier and results in more simplified code. But on top of that, framework can do a lot of things that CSS can't, like listen to different browser events and integrate with the actual state of your React application. It's just more developer friendly to work with, and that'll become apparent as we build out our next feature, the modal. To build it, we have 2 moving parts here, which we will organize in the components directory. First, we have the backdrop, which is just an overlay that sits across the entire screen and makes everything else look dark. Then the modal window sits on top of it and that's where the user's attention will be focused. When working on a larger React project, it's generally a good practice to write one component per file. In this demo, I have a directory for each main component with an index dot JSX file inside of it. A little trick in Versus Code is to hit the button for a new file and then write out the entire file path with a slash and it will automatically create the directory for you. Let's start by building the backdrop. We'll first import the Motion component, then define our own custom component called backdrop, and export it as the default from this file. The component itself will take 2 props. The first one is children, which allows us to embed additional components in between the tags for the backdrop, and the second one is on click, which allows us to pass a custom event handler into the component to update the global state when the backdrop is clicked. That allows us to think of this as a dumb component that doesn't have its own internal state to manage. In the JSX, we set up a motion div and define the on click handler as the function that gets passed in as a prop, and then the children will go in between the motion div tags. It has a class name of backdrop, and let's go ahead and take a look at the CSS before we start animating. Remember, it's an overlay, so we give it a position of absolute and set it in the top left corner with a height and width of 100%. Then we'll give it a black background, but we still want to see the elements that are underneath it. And an easy way to do that is to simply use a hex color, but then add an additional 2 characters for the opacity. And finally, we want to center the children both horizontally and vertically, which we can do with display flex. Now with our style set, We can go back to our component and define the various animation states to make the backdrop fade in and fade out. The initial state should be invisible, which we can set with an opacity of 0. Then, when it's active, we want to animate it to an opacity of 1. And then, when the animation is finished, we want to go back to an opacity of 0, which we can set with the exit property. And that's all there is to it, but it's not very useful without some content inside of it. Let's now go ahead and implement the modal component. At the top, we'll import motion again, as well as the backdrop component that we just built. Then we'll define and export a component called modal that has 2 props. 1 is a function to close the modal and the other is the text that we want to display inside of the window. In the JSX, we declare the backdrop component because that will always sit behind the window itself. And when the backdrop is clicked, it will automatically close the window. Now because we're using the children prop in the backdrop, we can add elements inside of it, like the motion div here, which will represent the window. Now the first thing I wanna do here is set up the click handler and call event stop propagation. Normally, when you click on something, it bubbles up the DOM to find the first event handler to take care of it. That default browser behavior would cause the modal to automatically close anytime the content inside of it was clicked, which is not something we would want in this case. The next thing we'll do is add a modal class to it, and let's quickly take a look at the CSS. To make the width and height responsive, I'm using the clamp and min functions from CSS. Clamp, in this case, will attempt to set the width to 700 pixels, but if the screen is too small, then it will go up to 90% if needed, or if the screen is too big, it will go to a maximum of 50% of the screen width. This is a really cool trick to know in CSS because otherwise, to make the modal responsive, we'd have to set up media queries and things like that, which would take a lot more code. Okay. Now back to our component, we have a property called variance that references an object called drop in. This object allows you to define multiple custom animation states. That's really cool because you can use it to create a complex sequence of animations based on different ways the user might interact with your app. In this animation, we have 3 states, hidden, visible, and exit. When the window is hidden, we'll translate it along the y axis by negative 100% of the view height. When it exits, it will drop beneath the view port to positive 100 of the view height. When it is visible though, we'll put it on its natural position of 0 on the y axis. The end result is an animation that drops in from the top and lands in the middle, then when it leaves, it drops even further to the bottom. Now, one additional cool thing we can do here is tweak the transition settings. When it becomes visible, I'm going to set the duration to point one second and give it a spring type animation to make it look kind of bouncy, and that provides a very easy way to make your animations look special. I I don't wanna get into the physics of it, but damping is a decrease in the amplitude of an oscillation as a result of energy being drained from the system to overcome frictional or other resistive forces. If you turn it down really low, the spring will never stop bouncing. But if you turn it up too high, then the spring won't have much of a bounce at all. With stiffness, if you turn it down really low, then it'll make the spring react very slowly and vice versa if you turn it up very high. If you wanna dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a frame or motion component. The final thing we'll want to do in this component is go back down to the motion div and add props for the different states like initial, animate, and exit. And now the final question becomes, how do we actually trigger this animation in the React app? For that, we'll head back into our root app component, and inside of it, import the use state hook from React as well as the modal we just built. In order to open and close it, we need some state on this component that will tell us whether or not it's currently opened or closed, and we can easily set that up with the use state hook. It'll have a default value of false. And then just to make our code a little more readable here, I'm going to set up functions for close and open that will toggle the value between true and false. Now with our state setup, we can go down to the launch modal button that we created at the beginning and define its on click event handler to run the close function if the modal is open, otherwise, run the open function. That allows us to toggle the state from the button, but we also need to toggle the state from the modal itself, like when the user clicks on backdrop or from the close button within the window itself. So if modal open is true, then we'll render the modal component and it will take the props of modal open as while as handle close to make it aware of the data or state in the parent app component. If we check it out in the browser, we should now have a working modal window, but there's one problem here. Notice how that it animates in perfectly, but when we click the close button it just disappears instead of animating out. The reason this happens is because the modal is completely removed from the DOM when the state changes. Luckily though, framer motion has a mechanism to rescue us from this predicament. We can import the animate presence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM. There are 2 important props here. First one is initial, which will be set to false to disable any initial animations, and the second one is exit before enter. Setting it to true will ensure that all nodes have finished animating before they're actually removed. And we can also do more advanced things here, like listen to life cycle events. If we go ahead and try it again, we now get the full sequence of animations from enter to exit. Congratulations. You just built an animated modal window with React and Framer Motion. Oh, and I almost forgot. I told you I would make the modal window draggable. To accomplish that, all we have to do is add the drag prop to the motion div. And now, you're free to drag it around the screen. I'm gonna go ahead and wrap things up there. But if you wanna learn some more advanced concepts, like how to build a notification feed and work with drag and drop gestures in Framer, Consider upgrading to FireShip Pro to get access to the sequel. Thanks for watching, and I will see you in the next one.
        