6 ideas for animating your app with Framer Motion

in this video I want to show you the key Concepts from six different demos built with frame or motion so you can get a taste of the apis and maybe get inspired to build some animations of your own now I've been using this library for about two years and it's some of the most fun I'm having coding these days but I know folks can feel intimidated by it which is why I just wrapped up a three hour course over at build UI called framer motion recipes where you'll learn how to build the demos we're about to see together with me from scratch so if you enjoy watching this video and you're ready to start coding some animations of your own be sure to check that out in the description but okay let's dive into the six demos and the key idea that makes each one of them work starting with this multi-step wizard so there's a lot of cool little pieces going on here but the one I want to call attention to is the actual Czech animation and if we come look for the path element that is responsible for this check this is just actually normal SVG path that's been kind of augmented with frame or motion and look at this this is all we have to do change this from 0 to 1 and look at all those check marks animate so I wouldn't have known how to animate svgs before using frame or motion but with frame or motion uh it's just dead simple using this path length prop so if you need to draw svgs just remember to look up that path length prop next up is this email inbox and the messages are all animated here both when we receive them and when we archive them but the thing that really makes this whole effect work is animating these messages out when we archive and the way that that is controlled is with this magical component animate presence which is what makes this prop right here work so if we were to comment out the exit animations we'd still have the mount but when we archive them check that out they just disappear and removing elements from the screen is really half of a user's experience with your app so if you animate only mounting but forget to animate the unmount uh it can really make your app feel kind of disorienting and broken so if you ever need to animate things on exit be sure to check out anime presence and the exit prop okay our third demo is this scrollable header right here and there's a lot you can do out of the box with these scroll Primitives that framer motion gives you but the cool thing about this one is how we kick off this animation as soon as the user changes scroll Direction regardless of where they are in the article and the key to making that happen is this code right here you see uh this scroll Y which comes from this Hook from framer motion is actually something called a motion value this is a primitive that framer motion gives us and it has a lot of cool methods like get previous that we can use to compare care the value across render frames and in this one we're using it to actually calculate the diff in pixel scrolled so that we can know whether the user has changed Direction regardless of how far they've scrolled so if you need to pull off something fancy it's good to get comfortable with these motion values you can basically do whatever you want with them they're a super powerful part of the library and that brings us to demo 4 which is this pretty sweet Carousel that we have here it's a full screen Carousel and it also comes complete with this nice kind of thumbnail bar that tracks the active photo now there's a lot of fun details we work on in this one but the key to really making it all work is this line right here it is surprisingly simple and it all has to do with this x prop that framer motion gives us and we can basically make this x prop take both a number like a pixel value so I can just kind of start changing this negative 100 negative 200 and you'll see we're just moving this by that many pixel but we can also pass in percentages like negative 100 negative 200 and you see right there it just shifts it over by the full width of the screen so that is the strategy we take in this and uh it's really the basis of this whole thing and uh framer motion also has a corresponding y prop you can use if you need to slide things up or down so uh that's all you need to remember if you ever are trying to do an animation where you're sliding things off screen either to the left or right or up and down just remember these X and Y props this brings us to demo five this resizable panel so I can go ahead and submit this form and we're going to see this panel dynamically resized to the contents and the surrounding content right here is going to go ahead and reflow in a document even though it's kind of outside of our panel that's a really cool feature of this and it's all thanks to how this works which is thanks to the hype prop now the height prop just like the X and Y props can actually be given a pixel value like 0 or 100 or 200 and it can also be given a value of Auto which is pretty nice if you ever need to do something like expand or collapse something you just toggle between zero and auto and you're good to go but in this case we actually need to resize according to the contents of the panel and for that we bring in this use measure hook so that we can measure the size before and after we submit that form and the key idea here is really just being aware that you can compose other hooks in the react ecosystem with framework motion because the library's boundaries are so good so this Hook is responsible for measuring this and re-rendering whenever the contents change and framework motion can go ahead and animate the height to whatever that height is and that these things work really well together it's kind of a mind-blowing when you start combining these things and and all of these libraries work together but if you do need to resize something like in a sidebar and you show more nav links you want to reach for a height and something like a used measure hook and that brings us to the final demo our Capstone project which is this infinite scrollable calendar and it's a monthly calendar here but we see a lot of cool details in particular when we have a new number of months we go from five to six we see the containing panel expands using our resizable panel we built in the previous one and it's also very similar to our image gallery except we have an infinite number of months so if you take a look at this we're actually going to see we have initial animate and exit we are animating things onto and off the screen instead of just sliding the gallery but we need to change the animation we use based on whether the user clicks next or previous and the secret to doing this is right here and these these are called Dynamic variants so we can see that we can express each transition for each stage of the animation as a function of the direction which is some custom data we can pass in so if you ever find that you need to change how your animation takes place as a result of some state or some props or some derived value you want to reach for these Dynamic variants in this case they're Direction aware and they are the perfect solution to pull off this infinite monthly calendar so there you have it those are six different ideas for animating your app and the key API from frame or motion that makes each one of them work if you do want to go deeper check out the description for more info about the course where you'll learn how to build these from scratch and more importantly you walk away with an understanding of the fundamentals of this Library so you can start to use it in your own work I hope you found that video insightful and if you have any questions for me please let me know foreign [Music]

Channel: Sam Selikoff

Views: 49,008

Keywords:

Id: He1_AH6kC8Y

Length: 7min 54sec (474 seconds)

Published: Tue Jan 17 2023