exitBeforeEnter does pretty much exactly what its name says. As you might guessed, by setting initial to false, we disabled icon's mount animation. All of it's child components must have unique key, so AnimatePresence is able to track their presence in the tree.Īnd, finally, let's talk about AnimatePresence props. key prop which we passed to icon is crucial for AnimatePresence. Component must be inside AnimatePresence to have exit prop and unmount animation. Basically, we use it to animate components when they are removed from the React tree. So, let's finally explain what's that AnimatePresence and why we need it. In transition we specify duration of the animation. Exit animations are possible because we wrapped our icon with AnimatePresence. It will also animate when component mounts, but as I mentioned, we disabled that in AnimatePresence.Įxit prop is responsible for. Whenever it changes, component will animate to new values. Pretty simple.Īnimate prop describes the actual animation. So, by setting y to -30 and opacity to 0 we say that we want our component to be shifted by 30px on Y axis and to be transparent at the beginning of the animation. If we set it to false, we can disable mount animation, which we actually did in AnimatePresence, but we will talk about it later. initial prop describes the initial state of animation. Our animation is defined by objects that we pass as initial, animate and exit props. Firstly, we had to convert i to a motion component, to make anything animate. For now, ignore AnimatePresence component. Īs you can see, a lot has changed so let me explain everything step by step. But there is still nothing animating on our handle. īy adding i tag with conditional classes we make icons change as we toggle the button. Now, there is only one thing left to implement - icons on the handle. Justification is dependent on the state, so it changes to the opposite aswell, now with nice, smooth animation. By clicking on the button we switch its state. If you are curious what exactly Framer Motion counts as layout change, see the docs - I put link on the bottom of the page. By setting layout to true on a motion component, we made it automatically animating any layout changes, such as flexbox justification. Of course, to make it working we had to make handle a motion component, instead of regular div. That's all! Handle's layout prop does all the magic for us. Let's start with necessary imports and simple functional component with some basic state logic, which we will use later to store button's state and change its style accordingly. Next steps will show you how to create such a button step by step. On the right side of the page you can see completed component's code, both js component and css stylesheet. I styled the component as a theme changing button, but of course you can easily change its purpuose by picking different gradients or icons. In this tutorial you will learn how to recreate this very basic switch button using framer motion's layout prop, fontawesome free icons and some simple css code.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |