Create Cool Magnetic Effect Easily with Motion.page/GSAP 🧲

[Music]

Hi guys, welcome back to the channel. My name is Luke and in today's tutorial, I'm going to be showing you how to create a magnetic effect using the mouse movement trigger. This has been another highly requested video tutorial, so I'm going to be showing you how we can implement this in Motion Page today.

Okay, so once again I'll be using Oxygen Builder today and all I've done so far is just set up this empty space here. This is just a div and I'm going to be using this to create our button in the middle for demonstration purposes. So what I'm going to do first is just center align everything, just make sure everything is in the center here. I'm going to add a new div, this is going to be our button element. Make sure everything's centered like that. Just going to add a class to this button and I'm going to add some text to this as well. Let's just say "hover over me" like this.

Now on my button, I'm just going to rename my layers over here as well, so I know what's going on. This is our button and this is going to be our text. So on the button itself, I want to add a class, so I'm going to add a class called "magnetic" like this. Then we can use this class in Motion Page and we can reuse it, so we can make it a global animation. So if you have a button on any page, many different pages, then this will always work. So we have "magnetic" on there.

Now to be honest, we can open this up in Motion Page and play around with some settings already. So I'm just going to go ahead and open up Motion Page. Alright, so I'm just going to go ahead and create a new timeline here and I'm just going to call this timeline "magnetic". Let's target the page that we created so we can actually see the animations taking place in the Builder here. So as you can see, we have our button.

Now for the trigger in this video, we're going to be using mouse movement. In this case, we want to make sure that the axis tab is selected. Here, as you can see, the selector, we can actually use a class in here, and we will be using a different class in here a little bit later, and I'll show you why. But for now, if I type in "magnetic", which is the class that we already applied to this, now if I just go ahead and show you a quick example animation. So in my animation selection here, for my actual animation node, I'll select the same class "magnetic", hit enter, and then you'll notice here that we have two axes that we can animate, which is pretty cool. So we can animate on the x-axis and then we can also animate on the y-axis as well.

Just very quickly, I want to show you, for example, on the x-axis, we'll do translate from Min -10 pixels to a positive 10 pixels. So you can see that's kind of working. But if I go ahead and add on the y-axis as well, so here we'll do minus 10 pixels, oh sorry, this is positive, so this is 2, 10 from minus 10 pixels. So you'll notice that sometimes it likes to glitch out, which is not desirable.

So when I was making this video before, I fixed this by adding a parent element with a different class just so that these are not conflicting with one another. So back in Oxygen, what I'm going to do is I'm just going to wrap this in a parent and I'm going to call this "magnetic trigger". This will just stop any conflicts between the selector and the animation. So I'm going to give this a class as well, and this class is going to be called "magnetic trigger" like so.

So I'm going to save this and then all I'm going to do in Motion Page, I'll just refresh this, and now we're going to use the selector as our parent. Alright, so that should still work. So now we want to tweak these settings a little bit so that we have something a little bit better. So what I'm going to do is I'm going to make sure that smooth enter transition is selected, so that just means when we enter the trigger, it doesn't really snap to the cursor, so that's what we want.

Now, custom progress start-at value, what this is going to do is it's going to set the timeline to 0.5. So this just means that the animation is going to start from the center. And then custom progress leave value, we also want this to be 0.5. So now you can see when I leave the animation, or sorry, when I leave the element there, the timeline is going to 0.5, which is what we want. So even when we go this way, it always snaps back to the middle and it's smooth as well. So that's basically what that's doing.

So if I go back to the animation on the x-axis, so we have a value here of -10 pixels to a positive 10. So let's just have a look on the front, see what this looks like. As you can see on the front, it's not really ideal because when we enter the element here, then it's kind of animating, so it's not very desirable as you can see.

So all I'm going to do in Oxygen, on the parent here, I'm just going to add some padding to this. So the padding also wants to be the same value as what you're using on the translate. So we want to use 10 pixels for the padding on here. So I'm just going to do 10 pixels, apply all. So you can see now what should happen on the front is when we enter this trigger, then the element inside should snap, so it should look much better already. So let's just check this on the front now.

So now I'm going to go slowly, we should be reaching the parent element, which is the selector, and that's giving a much more desirable effect as you can see. And now it's going to follow the mouse like a magnet. So basically, that's the magnetic effect. You could also play around with these values. So if you want to do 20 padding, for example, and then you could also change each value in here to 20. And we'll do on the y-axis as well, so 20 and 20, save.

So this should give us much more space as you can see, and it's translating even more. Make sure you save Oxygen as well because this is still set to 10 pixels, so just make sure to refresh. So now you can see the 20 pixels, but I personally prefer 10 pixels. I think that's better for my preference. So I'm going to change these back to 10, make sure to save Oxygen, and then also back in Motion Page, change these back to 10, and on the x-axis as well, save timeline.

Okay, yeah, so for me, that works a little bit better, a little bit more subtle, and just as I enter the parent trigger, it does snap to the cursor, which is pretty cool. And then obviously when I go here, as soon as the cursor, because we're using that padding, as soon as it leaves the element, it should snap back like that.

Alright, so one last thing I want to do just to make this a little bit more tidy, because obviously using two classes like this is not very desirable either. So what we can do is in Oxygen, what I'm going to do is I'm going to remove the magnetic class from here. So don't worry, I'll show you how to fix this in Motion Page as well. So just remove "magnetic", and I'm going to apply "magnetic" to here instead, "magnetic". This just makes more sense when you're building elements.

And now "magnetic trigger", what we want to do is just copy these values. So we're using 10 padding, I'm going to apply the 10 padding to the "magnetic" class instead. I'm going to delete the "magnetic trigger", we don't need this. And then also just make sure that you delete it from your selectors as well, so it doesn't exist anymore. So I'm going to completely delete this.

And now we're going to use only "magnetic" as the class. So now we have only one class that we're going to work with, which is much more efficient. I'll save this. Now in Motion Page, what I'm going to do, make sure you refresh the Builder just in case. Now the selector, the trigger, is going to be only "magnetic". And now what we can do is right-click here, edit, and what we're going to do is we're going to say we want to target everything that's within the "magnetic trigger" by doing this selector. Alright, so now save timeline.

And on the front, this should still work like that. Now the good thing about this method is we can add any element now. So I'll just show you an example here. I'm just going to add a text element, for example, put it inside my div here. I'm just going to change the layout of this. And let's see, so all I need to do now on text is wrap this in a div, and then this div, we just apply "magnetic" like so. So this automatically applies the padding that we have, 10 pixels.

Now we'll go to the front, now we may see something strange as you can see. And the simple fix for this, so if you're using multiple elements with the same class "magnetic", all you need to do is in Motion Page, just make sure that you check "trigger each iteration individually", and this will make them all independent of one another. Refresh this. So now you can see that they're all independent of each other.

So on the front, we'll refresh. So now you can see we have a magnetic text and a magnetic button just by wrapping them in a "magnetic" class for the parent. So this would also be "magnetic trigger". Okay, save this. And that's basically it. So here we're showing you a much more streamlined way of using Motion Page with the classes. So now we can add multiple elements, wrap it in a magnet, and then just apply my "magnetic" class to the element.

So there you have it, guys, another simple tutorial. This time we were using the mouse movement trigger, which is, I think we've used that for the first time in a tutorial, but it's a very powerful feature. It's a nice trigger, and as you can see, we can create some cool effects like a magnetic effect in this video.

I hope you liked the video. If you did, please give it a thumbs up and please do consider subscribing if you haven't already. And we'll be back once again next week with a new tutorial. Thank you very much.

[Music]