5 Advanced Framer Motion Techniques I Shouldn't Have Skipped

I've built hundreds of components with frame or motion at this point the documentation is fantastic but when building animations it's kind of hard to know what you actually need until you need it let's see some of the tips that I wish I hadn't skipped over before putting hundreds of hours into this framework I'll be assuming that you know at least the basics of frame motion if not I have an hourlong crash course on my channel that should get you up to speed Link in the description for that let's get started so this first tip still trips me up all the time if I'm being honest hopefully this helps me remember this a little bit better but all that I have here is this little box that rotates 90° as it goes through the viewport I just have a ref that I'm passing to my used scroll hook and then I'm taking the scroll y progress and passing that to the used transform hook and actually mapping those values to a rotation value between 0 and 90° so this is pretty normal stuff if you've ever used the U scroll hook before the problem here is maybe I don't actually want the animation to start once the element is fully within the viewport and stop whenever it's all the way up at the top or I'm saying viewport it could also just be whatever the container element is that you pass to use scroll maybe I wanted to actually start the animation as it's entering the bottom and continue until it's all the way exited out of the top or any other variation of that now the way that we can do that is using this offset value I have a couple of examples here and this is going to take a list of strings each of these strings will have two values the first value in either of these strings represents the position of the target element in this case like our little blue box and the second element in the string represents the position of the container element and where those meet so in this case I'm saying I want to start my scroll y progress whenever the start of the target element or the top of the target element meets with the end of the container element in this case the bottom of the viewport so if I'm all the way down here at the bottom it's saying that the top of my container or my target element meets with the bottom of the container element or the viewport and I want to run that until the end of my target element meets with the start of the container element or it goes all the way up to the very top end of the target element meets with the start of the container element another example of this would be something like this so what I'm saying now is I want this only to run whenever the start of the target element meets with the start of the container element or the very top and I want that to run until the end or the bottom of my target element in this case meets with the start of the container element in short all that I'm saying is I only want this to rotate once it gets to the top and continue rotating as it kind of rotates itself off the screen now you actually don't have to just pass these Start Center end values you can also pass in things like percentages or pixel values so what I'm saying here is that I want to start this animation whenever the top of my target element gets to the middle of the screen and I want it to rotate until 100 pixels above my target element gets to the top of the screen so like that this is a pretty tricky one for me for whatever reason honestly anytime I do scroll animations I still need to mess around with this to get the actual values that I'm looking for but anyways let's move on to the next one so here's another one that honestly took me a little longer than it probably should have to fully get through my head and that is that motion values like using the use motion value hook like this really aren't to be treated exactly the same way as like a used State hook would even though you can and sometimes I will say something like x. set directly and then change this value to something where it's really useful is just for tracking the state of a motion element and then changing something else based on that so by example all that I'm doing here is I have this value for x setting that equal to motion value which is setting to zero immediately and then passing that into my style tag right here I'm then logging it out using this Ed motion value event hook and I've added some drag constraints here so I can drag this element and we'll see that as I drag it it's actually setting that state for me I'm not having to call like a set State call or something it's just tracking it and updating it in real time now because of this I can derive other values based on this value so there's a couple of examples I'll just kind of drop these in here maybe I want to also change the scale in the background based on this x transform so I'll say like as I drag it left maybe I'll make it bigger and as I drag it right I'll make it bigger or maybe I'll change the background color based on where I'm dragging it we can drop these values in so we can see what I mean now as I move this to the left it turns red as I move it to the right it turns green so I have a slight bug with my code here let's take a look at why this example is very similar to the last one I just have this motion value for my X transform on this draggable div and then I have two different color stops that take in X and then animate between a couple of different different colors I'm trying to pass this into this motion div as a linear gradient so I'm passing in both of my color stops in essence giving me an animated linear gradient but we're seeing that there's not actually anything showing up here and that's because a normal template literal like this doesn't actually know how to handle a motion value CU a motion value is not just a normal value and this isn't reactive state so what we can actually use instead is the use motion template hook like this essentially this works exactly the same way as a normal template literal you just prend it with this used motion template hook and this will give you back a value that you can pass in as a motion value and now we actually have our animated linear gradient as we drag our box for this next example I just have this spinning box and all that I want to be able to do is pause the animation whenever I move my mouse over it and then play it again whenever I moves my mouse off of it obviously there could be other things that trigger this play and pause like clicking on a button or whatever it may be but we're just going to use that for this example in order to do this we're going to actually have to take a little bit of a different route from our normal kind of declarative animations like this so I'm going to go ahead and remove all of those I'll come up to the top and create a motion value for rotate and then pass that into my style prop and then what we're going to do is just directly animate this rotate value so open up a use effect empty dependency array is fine and then we'll just directly call using the animate function which also is an import that you can get from frame or motion we'll call that function and pass it in our motion value so rotate which starts at zero and we're saying that we want to animate that from 0 to 360 degrees and then we'll just pass in our normal transition values so the duration is 5 Seconds the ease is linear and the repeat is Infinity now this will return a value for essentially your animation controls so if we look at controls dot you can see all the different methods that are on this like play and pause which is what we're looking for to be able to actually store this somewhere I'm going to come up to the top and I'm going to create a ref which I'm just going to call controls ref and then I'll just say controls ref. current and set that equal to these returned controls and then down on my div I can just use those controls whenever I want so I'll just say whenever my mouse enters this div we want to pause the animation and whenever it leaves we want to play the animation so we have our spinning div I Mouse over it it pauses I move my mouse off and it plays again I found this to be super super useful for things like animating testimonial carousels and stuff like that so by default you can add the drag prop to any motion element and that will make it draggable this has a little bit of a problem though because it has no constraints and I can just throw the card way out in the middle of nowhere and there's really no way to get it back in order to fix this I can define specific constraints using the drag constraints prop what I'm saying here is I only want to be able to drag this 200 pixels up 200 pixels down 100 pixels left and 100 pixels to the right so now even if if I try and kind of throw this it's going to hit a brick wall we will still see though that we have kind of this elasticity whenever we try and drag it outside of that box so it kind of lets me like drag it further than the bounds but then it'll squish it back in we can Define exactly how elastic that effect is using the drag elastic prop and if we set it to zero it's just going to essentially act as a brick wall so now if I get up to any of the edges it's just going to stop it's not going to have any kind of overd drag effect now maybe this isn't exactly what we want maybe what we really want is just to remove that ability to throw the cards off the screen so what we could do if that's the effect that we wanted is just to remove those and add a drag momentum equal to false now I can take my box and I can drag it wherever I want but it's not actually going to be throwable so if I drag it way up here I can still go back and get it all of these props together make for a pretty flexible drag experience that should match just about any needs that you may have if you're interested in more frame or motion stuff that is a big part of what I talk about on this channel I even built a component Library called hover dodev specifically for animated UI components if you're looking to up your frame or motion game even further I think you're going to get a a lot of use out of that a like and a subscribe would also mean a lot if you guys found this to be useful we'll see you guys next time peace

Channel: Tom Is Loading

Views: 8,235

Keywords: programming, web developer, coding, framer motion, tailwind css

Id: prLNLxEXmbs

Length: 7min 34sec (454 seconds)

Published: Mon Mar 11 2024