React Animations just got better

had to do by gorgeous friends on the internet today we're going to talk about Freiburg because they did something crazy they release something special that Tech is evolving like crazy we have chat GPT reptilian overlords and auto GPT 98 that people don't even know what it is at the two percent are very vague about it but they're saying it's mind-blowing and they're really excited so that's all about us if you're happy that's all it matters I'm not blaming you and we have neck JS breaking my app every day thank you for yourself I really appreciate it Theo's edging somewhere with functions I should say at freiber motion release the new hook our favorite animation Library so well done for the efforts let's have a look at it so let me show you what I have because I have a Wii app here running right now so let me just run npm run Dev for you uh to show you what I got so but the thing I like about Motion devs in general is it follows a very declarative style programming right where you just say motion div and you can see kind of what it does already when you have a look at it so we see that this post here we're importing the index as well so we're running a transition over it with a delay and we have an initial and an animate and an exit so if we have a look at it come on man give me my development server click cool here it is okay check this out so did you see that cool so this is all running uh server side as well and I'm doing some optimistic updates here client size and as you can see if I push this in and it fails it'll just go back and revert which is quite cool but again I'm just running this Wii effect here right of the post showing up so it's cool right it works it's nice um the thing is when you want to do complex animations it gets a bit funny because you have to do stuff with variant and it just doesn't look as nice so this use anime that they introduced I closed up the docs shame on me that's how much I cared dogs fraber version let's have a look at it because initially when you look at it you're like what uh what the hell what are we doing are we going back to like uh g-sep type thing of imperative uh programming here so if we scroll down here we get to see this new hook called use animate so if you have a look at it initially you're gonna be like oh that kind of kind of looks like gsap doesn't it remember working with GSAT like half a decade ago and this is exactly the uh how the code looked like right uh but the advantage of doing stuff like this it would be that you could easily make very complex animations uh and let's see what else oh here we go so they have like a use animate versus motion Dev uh kind of like what what what would you use it for pretty much yeah like complex animation sequencing oh you could also do motion values directly animate them and also black box components black box components uh it's nice where you don't have direct access to the rendered components via Dom selector so that's pretty cool but what I'm excited about most is just the ability to quickly you know drop the scope on a diff for example and then you can just animate all the like allies and that so here as you can see he drops it on the UL and then just animate all the Allies because you can select basically everything that's a child of that scoped component so let's have a look how would we refactor this in a way um so let me just get rid of this like that hit save and we won't use motion anymore we'd import these two new ones use animate it's called and use presence I believe cool all right so let me pull up the docs again so we can just get this up and running quickly oops Okay cool so we got that now the next step would be to import as to let's go just go down here and say const is present and safe to remove and we'll also import scope and animate from use animate like that cool so you take the scope and pretty much just put it on any and the element that you want so in this case this one let's do ref equals to the scope right cool and let's hit save awesome now the thing though we need to do this also import use effect so we can safely animate this without causing any funny side effects so let's just import that from react like that so what we can do is just pass the ref down here like that and then we can do a use effect like that and again here we'll just pass in uh is if is present then we can run a weight animates like that and again here we can do any selector we want so if I want to get this div right here I can just do a scope.currence like that if I want to animate the H1s down here buff easy peasy I can just do a H1 like that so that works as well because it's going to select whatever child is of this ref scope down here Okay cool so that's one but we'll just do scope.current right now so I'll do scope now current cool comma and here we run our animation so I can do something like uh opacity for example we'll do zero to one so you can just make an array like that and you can also add a duration here it's like 0.5 and I can also do a delay so I can just do 0.2 and I'll time step by the index as well like that cool so that's it I ruined something here but it's okay this is not gonna work anyway because I'm doing a weight animate here and this is not running in an async function so I'm going to just say const enter animation is going to be equal to an async function and I can pass that in there like that I should have probably done um if if it's present out here like that let's do that okay cool awaits scope.current so that's our selector I guess just like gsap oh and here we need to close that up like that and then we can pass in the duration like that cool so after this we'll just run the enter animation here like that now if you want to do any exit animations you can just do say else here and do again yeah just like that like an exit animation and then finally uh you can do this save to remove here at the end like that all right now let's hit save and see if that works and look at that works the same way now again I'm not sure how much I love this compared to you know just having this nice and concise down here and it's easy for me to tell rather than having this huge huge use effect here but again the cool thing is it's super easy to orchestrate complex animations like for example here I don't even need the index necessarily here I could just do a like a H1 like that all right so we'll just selects all the H ones here and I could do a delay of stagger so I can import that from uh frame or motion I can just pass that down here and say 0.2 like that okay so so anyway that's gonna be it for me let me know what you think if you found that you messed around with me with it more let me know what you think of it I've only played around with it for like an hour or so so I'm really curious to see where this is gonna go also check out my next GS course if you're interested in learning more about yeah fun stuff and web development for pulling out an awesome Ecommerce website so that's going to be down in the link in the description and also follow me on Discord and then Twitter and all that jazz so thank you so much for watching and I'll see you in the next one bye-bye

Channel: developedbyed

Views: 50,457

Keywords: react, framer motion, react animation, web development, javascript, web dev, developedbyed, next js, react query, animations, gsap

Id: 0MOF_QPcgxs

Length: 8min 4sec (484 seconds)

Published: Mon Apr 24 2023