MotionPath and mousefollow

[LimitlessDigital]

Hi!

 

For a new project I'm wondering how to accomplish something. Would be nice if you guys can think with me.

I have a menu with a svg circle and on that circle there's a round shape. When you hover your mouse around the round shape on the circle follows the path of the circle.

 

So I can use MotionPath for that. But how can I make the round shape "listen" to the location of the mouse and follow the circle along with it?

 

See screenshot for clarification: https://ibb.co/bQMyskB

[mvaneijgen]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

The Motion Path Plugin moves a shape on a path where the beginning of the path is 0 and the end is 1, so you'll somehow have to convert the mouse location to a number between 0 and 1. I have no idea what would be the best way. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

I would suggest just getting something up and running and then start tweaking from there. Then when you've got something post back here and we'll be happy to take a look at any issue you have. 

 

Hoop dat het helpt en veel geluk met het project! 

 

[mvaneijgen]

Couldn't help my self 🤣

 

In theory you don't need the Motion path plugin, if you just want to rotate the element 360 degrees, but with it you can use any shape you'll like. My first attempt was really different, but then I'd asked ChatGPT "In Javascript how can I convert the mouse movement x and y to a rotation value between 0 to 360 degrees" and there is a Javascript function that calculates the angle from an origin point based on the x and y coordinates, who knew 🤷 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

 

Then it is just setting the correct start an end property and you're done! Nogmaals veel geluk en is dit iets voor op je eigen site!?

 

See the Pen QWoZNaR?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[LimitlessDigital]

Oh wow just saw your posts... This is EXACTLY what I needed. Thanks man!

[LimitlessDigital]

Hi @mvaneijgen I made my svg a exact circle, but now it bugs. Can you tell me why? I can't figure....

 

See the Pen JjzQXyp by ThijsLimitless (@ThijsLimitless) on CodePen

[mvaneijgen]

Hi Thijs! 

 

You have to know where the start point is of your path. It is a circle, but it still must be drawn from some point. If I remember correctly Illustrator sets it by default to the right, but the code use for the effect needs the start to be at the top of the circle, so you either have to rotate your shape in your vector program to have it start (and end) point at the top or set the start: and end: properties accordantly (see comments in JS). It seems for your circle that the start is at the bottom of the circle, so I've offset the start by 0.5 eg half the circle to put it back at the top. Also it seems the viewBox of the SVG is a a bit too small for the size of the dot, so you'll have to increase that in your vector program. 

 

Hoop het het help, ben benieuwd wat je aan het maken bent 🤣

 

See the Pen QWoXNVE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[LimitlessDigital]

Hi! @mvaneijgen ah that makes sense indeed! I'm very new to SVG and will dive deeper into the concepts of it in the near future after this deadline is finished haha!

 

How can we fix the "padding issues" on the edges? See screenshot.

 

The project I'm working on will be extremely nice! Will share it with you when it finishes!

 

 

[LimitlessDigital]

@mvaneijgen The nicest would be if the padding/offset would be relative so that we can resize the svg.

[mvaneijgen]

42 minutes ago, mvaneijgen said:

It seems for your circle that the start is at the bottom of the circle, so I've offset the start by 0.5 toeg half the circle to put it back at the top. Also it seems the viewBox of the SVG is a a bit too small for the size of the dot, so you'll have to increase that in your vector program. 

That is because of the viewBox of the SVG. The size of the circle is the same size as the viewBox, which leaves no padding for the dot. You have to increase that to allow space for the dot. The dot is around 30px, half of that needs to be included in the viewBox, to not exceed the viewBox (around all sides).

 

Here a demo where I've increased the viewBox with  100px (and also repositioned the circle, so that it is in the middle again, add 50px to the cy and cx)

 

See the Pen mdoZEwe?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

 

36 minutes ago, LimitlessDigital said:

The project I'm working on will be extremely nice! Will share it with you when it finishes!

Cool, please do! 

[LimitlessDigital]

Thanks @mvaneijgen is there a possibility to make this relative? So just scale it to the size of the parent and then with a small "padding" instead of just hard "400px"?

[mvaneijgen]

You can create the SVG dynamically if you want, but this is how SVG works. It is not really 400px it is 400 unit size and SVG can be what ever size you want 

[LimitlessDigital]

Hi @mvaneijgen. Can you help me? I'm finishing up my component. But I have one mistake I can't figure how to fix it.

 

https://stackblitz.com/edit/nuxt-starter-xamezl?file=components%2FMenuAdventure.vue -> Here you see when the console.log is 5 or 0 it bugs. I don't know how to solve can you help me?

 

Would be appreciated a LOT!

[mvaneijgen]

I've looked at it, but I also can't see anything obvious. You've add snapping the the mouse follow, so there is probably something that is bugging it, also if you just want it to snap to certain sections, you don't need the whole mouse follow (I think)

 

I would bring it back to a version that doesn't have the bug and then start introducing the code back until the bug is back again, then you know what the culprit is and you can ask a more specific question. Hope it helps and happy tweening! 

[LimitlessDigital]

Thanks @mvaneijgen how can I snap it without the mousefollow then? 

[mvaneijgen]

How, multiple ways, the best way I don't know.

 

You could just build an animation where the shape moves on the path at increments and place a label at each increment then check if the mouse has moved enough and then play your timeline from the current label to the label it should move to with  https://gsap.com/docs/v3/GSAP/Timeline/tweenFromTo()/

 

 

[LimitlessDigital]

On 3/14/2024 at 10:36 AM, mvaneijgen said:

How, multiple ways, the best way I don't know.

 

You could just build an animation where the shape moves on the path at increments and place a label at each increment then check if the mouse has moved enough and then play your timeline from the current label to the label it should move to with  https://gsap.com/docs/v3/GSAP/Timeline/tweenFromTo()/

 

 

Hi, is there any chance you can help me with this issue? https://stackblitz.com/edit/nuxt-starter-xamezl?file=components%2FMenuAdventure.vue can't get it working. Really stressing out, tried multiple things.

[GSAP Helper]

We'd love to help, but vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

[Rodrigo]

It seems to me that the problem is here:

const rotationAngle = 360 * (closestItemIndex / menuItemElements.length);

When you go from 300 to 360 it goes from 300 to 0, so the dot goes all the way to 0 degrees instead of going to 360. The problem here is the logic to keep the dot going in the same direction.

 

Right of the top of my head I can't think of something that solves this. Maybe wrap the degree values between large negative an positive values could be an option.

 

Sorry I can't be of more assistance.

Happy Tweening!