Introduction to Animated Modals
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 in 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 closed state with JavaScript, and most importantly, how to implement declarative animations with Framer Motion 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 sequel where we build a notification system with 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 it. 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 of a modal. What you don't want to 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 accept cookies.
Project Setup
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-react-app. Once created, I'll go ahead and open it up in VS Code and install our only dependency, which is Framer Motion. Framer, by the way, is maintained by the team behind the 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.js file and delete all the boilerplate code. From there, I'll go into the index.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.
Your First Framer Motion Animation
And now we're ready to implement our first animation, which is a button that gets bigger when we hover over it and gets smaller when we press it.
First, 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 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 whileHover will make the button bigger when you hover over it, and then whileTap will make it smaller to give it the impression of being pushed in. And just like that, we've already created our first animation.
But you might be wondering, why would I want to use Framer Motion over just regular CSS animations? Well, for one, it's just easier and results in more simplified code. But on top of that, Framer 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.
Building the Backdrop Component
To build it, we have two 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.jsx file inside of it. A little trick in VS 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 two 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 onClick, 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 onClick 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 two 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 zero. Then when it's active, we want to animate it to an opacity of one. And then when the animation is finished, we want to go back to an opacity of zero, 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.
Building the Modal Window Component
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 two props: one 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 want to do here is set up the click handler and call event.stopPropagation(). 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 any time 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 variants that references an object called dropIn. 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 three 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 viewport to positive 100 of the view height. When it is visible, though, we'll put it on its natural position of zero 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 0.1 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 don't want to 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 want to dive deeper into spring animations, I'll link to a brilliant blog post that actually visualizes the relationship between damping and stiffness in a Framer 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.
Managing State & Triggering the Modal
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 useState 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 useState 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 onClick 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 the backdrop or from the close button within the window itself. So if modalOpen is true, then we'll render the modal component, and it will take the props of modalOpen as well as handleClose 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.
Animating Component Exit with AnimatePresence
We can import the AnimatePresence component and put our modal inside of it to keep it visible temporarily even after it's been removed from the DOM. There are two important props here. First one is initial which will be set to false to disable any initial animations. And the second one is exitBeforeEnter. 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.
Bonus: Draggable Modals & Outro
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 going to go ahead and wrap things up there, but if you want to 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.
