2 Ways to Make a Magnetic Effect using Framer Motion, GSAP and Nextjs

I'm getting a lot of questions about should I be using firm emotion or should I be using gsop for my animations and my answer is simple use the one you're best at but wait Ali this is not good engineering there has to be a clear winner between the both all right all right in terms of functionality I'd give it a draw they both can do the job and they both can do similar things now if you use react which is declarative in its nature then you'd want to use an animation Library which is also declarative and that's frame of motion but honestly I'm not a fan of theory so I'm just going to build the same famous magnetic effect I'll do it once using gsop and once using firmer motion and from there I'm sure you're gonna have a better understanding of the difference between the two so I have a basic component here for the magnetic effect made with g-sup and if I want to use this basically I'll go inside of the page.js and I'll import that component and then I'll be able to Simply wrap the SVG here inside of the component and if I save that I can see that my SVG here disappeared and to make it reappear I can go inside of the component here and extract the children from the props and then I can simply give the children here and the SVG is back and now the first thing I need to to create is a reference and that way I can grab the position and the size of the children so here I create a reference using the use ref hook and then what I could do is add the reference like this inside of a div Rubber and this could work but instead I can make it even cleaner by returning a react function called clone element and I'm just going to clone the children here and then I can add the ref that way and now I just use the use client directive here import the react library and that way we have our element that's returned the same way that it was before but now it has a reference on it and we can actually animate it so the first thing we need to do is create a mouse move event listener and we're going to attach that event to the reference and so we can start by creating a use effect put empty parameters and so it's going to get triggered once when the component mounts and then you can grab a reference and add an event listener and then I can create the mouse move function and the mouse sleeve function here and I'll grab the event as parameters and here I'll start with the must move event we can extract from it the client X and the client y from the event and then what I could do is a g sub 2 and then I'll grab the reference I'll animate the x value to the client X and I can do the same thing for the y-axis and now if I try this it's going very far and that's because the X and the Y here are creating a translation that's why it's flying super far and so we cannot directly use the client X and the client y here so what I need to do here is extract the width the height the left and the Top Value from the reference and I can do that by calling the get bounding client direct function and here I'll have a value X that can be equal to the client X and now we want to subtract the current position of the element so we can do decline x minus the left and we'll do the same thing on the y-axis client y minus the top and here I'll change the values and if I save that we can try this out and we'll have something like this which looks a bit weird our Mouse is not centered in the middle of the icon and that's because the left and the top position are positions of like the top left corner of the element it's not the center point so we can get the center point by additioning on the x-axis the width divided by 2 and on the y-axis we're going to add the height divided by 2 and here I need to change my parentheses that way and I can save this and try this out and now this is starting to make some sense and now it's kind of being sticky for a long time so it's time to work on the mouse sleeve now the mouse Leaf is very simple we're just going to take the G sub 2 here and we're gonna reset the X and the Y transforms to zero and now we have this nice magnetic effect and here I'm just going to wrap all of the other icons and we have something that looks like this pretty good but there's one way to make this more efficient and that's because right now when we're moving the mouse we are triggering a new json.2 function and that's not really efficient they actually have a function for this kind of case to make everything more performant and so what we'll do is use the quick to function from g-sub and so here I'll pre-define those animations and I'll have the next two that will be equal to gstop.quick2 and here I'll Target The Ref I'll Target the X transform I can have a duration of one second and I can hover certain ease and personally I found this easy to be fitting for this animation but you know you can play around and find the one that you like and then I'll just copy paste that and do the Y2 the Y transform and then here instead of using the G sub 2 I'm just going to delete that delete it on the mouse sleeve and I'll just do X2 to the X and then Y2 to the Y and then same thing for the mouse sleeve but I'm gonna do two zero 0 and already that's a bit more clean and if I save that we have this nice effect here now it's a bit different than before because we have a different easing but it's good because we have something that's cleaner code wise and more performant as well and with that we are done with the g-sup animation and we're going to do the same thing but with firmer motion so here I have the framing wrapper and I'm gonna do the same thing that I did before I'm going to import the framer here and then I'll just wrap an SVG and then I also use the use client here and now we lost the SVG so like before I'll take the children from the props and I'll return the children here and now we're back normal and here I need to create a ref as well because I need the top the left position and the width and the height of the children so I have the same thing as before a reference here and this time I'll give the reference to the div and why am I not using the react clone element it's because I want to have a div Robert that's going to have the motion tag which can then be animated and now for firmer motion I'll have a stick with the position of the mouse so I can initialize it at x0 and Y 0 and here I'm gonna add the event listeners directly inside of the GSX I have the same thing a mouse move and a mouse sleeve and here I'm taking the same logic as the g-sub component because I need the center point and so I'm just reusing the code and here instead of doing like a g sub 2 I'm simply going to set the state so I'm going to do set position the X and the Y and on my sleeve I'll also set the position but now to zero and then from the position State I can extract the X and the Y and I can animate the parent div here and I'll animate the X and the Y and we have something like this not too bad looks pretty good if we compare it with G sub it looks quite similar it moves a bit more and now if we want to tweak the animation we can simply add the transition and personally I like the spring type transition and I can Define here a stiffness and I can do like 150 and so the stiffness is how sudden the movements are so I'm going to do 150. basically the lower the number the stiffer is going to be and then I can have it damping and the damping is how Wiggly do you want the animation to be if you put it at zero it's just gonna wiggle infinitely which is not what we want here and then I can set a certain Mass the default is one so I'm going to do 0.1 for this specific animation but you know you can play around and choose what you prefer and I have something like this very similar to the GSAT approach and so I'll do the same thing here copy paste and add it to all of the other svgs and we have something like this we can see that it's almost the same now the g-stop has more of an elastic ending animation compared to the frame of motion but you could tweak that and have the same thing and yeah that's the difference firmer motion how much 36 lines of code g-sup 39 lines of code so very similar and here you can really see the difference between like an imperative approach and a declarative approach like in the GSAT here we're really telling react what to do precisely meanwhile in frame or motion we're more telling what should happen and so in firmer motion we are more like declaring what should happen and in gsop we are more imperatively telling do this and so yeah I hope you learned something from seeing the same animation made with two different libraries if you learned something like subscribe and I'll see you in the next one bye

Channel: Olivier Larose

Views: 13,915

Keywords:

Id: Sb00VR5N-fw

Length: 6min 54sec (414 seconds)

Published: Fri Aug 11 2023