Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Harnon

Follow cursor along a path using MotionPathPlugin

Recommended Posts

Hey guys! I'm a experienced developer but a newbie to animations. I've been trying Greensock and so far I think is great. I was presented with¬† challenge today, I need a small circle to follow the mouse along a path I defined. I don't even have a Codepen because I don't even know where to start ūü§£

 

I need the green circle ("#movingcircle") to follow the mouse when it enters the brown area ("#mousearea") and move the green circle along a path (I've used MotionPathPlugin to follow the path, super easy!). If you can give me a high level approach on how should I do this or point me to the right place in the Docs would be a big win for me. 

 

My first attempt looks like this, as you can see I commented the start and end props which seems the right places where to input the mouse coordinates. Ignore the console.log below, I was just playing around with it. Am I using pause() and resume() the right way? The code:

 

document.querySelector('#mousearea').addEventListener('mouseover', (event) => {
            tl.resume()
            tl.to('#movingcircle', {
                duration: 5,
                motionPath: {
                    path: '#followpath',
                    align: '#followpath',
                    alignOrigin: [ 0.5, 0.5 ],
                    x: event.pageX
                    // start: tl.progress(),
                    // end: event.clientX * 100 / event.target.getAttribute('width') / 100
                }
            })
            console.log(
                'mouse',
                event.clientX * 100 / event.target.getAttribute('width') / 100,
                'progress',
                tl.progress()
            )
        })
        document.querySelector('#mousearea').addEventListener('mouseout', () => {
            tl.pause()
            console.log('leave')
        })

path.jpg

See the Pen qBbGJmd by sebosp (@sebosp) on CodePen

Share this post


Link to post
Share on other sites

Hey Harnon and welcome to the GreenSock forums!

 

I talked about how to drag along a path here:

 

What you're wanting is similar, but based on only the mouse position with reference to the viewport in the x direction. I went ahead and modified the demo from that thread to do what you're wanting to do (and included some comments to better explain what's going on):

See the Pen gOPJKam?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You should be able to switch out the timeline for your own (and optionally restrict the mousemove listener to your section) and get it working :) 

 

Let us know if you have any more questions.

  • Like 3

Share this post


Link to post
Share on other sites

Congrats on having the best support I've ever had! I really appreciated you took your time for doing this demo to me, it seems very logical and clear. Question, as you can see in the gif below, the circle is not exactly following the mouse because once you do a mouseover the red area, the circle origin point is off with the cursor like for some 100px. Do you know the cause of this error? For me it seems like an error with the wrong input in the normalize function which is not mapping correctly the mouse with the red area. I've seen you added the innerWidth. Is this window.innerWidth?

 

GIF here: https://ibb.co/Lv6GrdL

Share this post


Link to post
Share on other sites

It's hard to say exactly since you didn't provide the code. My guess is that you didn't center the element. I highly recommend making a minimal demo if you'd like our help debugging :) 

 

3 minutes ago, Harnon said:

I've seen you added the innerWidth. Is this window.innerWidth?

Yep! It's a fun fact that you don't need the window part if your JS is running directly in the context of a browser.

  • Like 1

Share this post


Link to post
Share on other sites

Added my CodePen above. Thanks for letting me know.

Share this post


Link to post
Share on other sites
4 hours ago, Harnon said:

Hey guys! I'm a experienced developer but a newbie to animations. I've been trying Greensock and so far I think is great. I was presented with¬† challenge today, I need a small circle to follow the mouse along a path I defined. I don't even have a Codepen because I don't even know where to start ūü§£

 

I need the green circle ("#movingcircle") to follow the mouse when it enters the brown area ("#mousearea") and move the green circle along a path (I've used MotionPathPlugin to follow the path, super easy!). If you can give me a high level approach on how should I do this or point me to the right place in the Docs would be a big win for me. 

 

My first attempt looks like this, as you can see I commented the start and end props which seems the right places where to input the mouse coordinates. Ignore the console.log below, I was just playing around with it. Am I using pause() and resume() the right way? The code:

 

document.querySelector('#mousearea').addEventListener('mouseover', (event) => {
            tl.resume()
            tl.to('#movingcircle', {
                duration: 5,
                motionPath: {
                    path: '#followpath',
                    align: '#followpath',
                    alignOrigin: [ 0.5, 0.5 ],
                    x: event.pageX
                    // start: tl.progress(),
                    // end: event.clientX * 100 / event.target.getAttribute('width') / 100
                }
            })
            console.log(
                'mouse',
                event.clientX * 100 / event.target.getAttribute('width') / 100,
                'progress',
                tl.progress()
            )
        })
        document.querySelector('#mousearea').addEventListener('mouseout', () => {
            tl.pause()
            console.log('leave')
        })

path.jpg

CodePen here.

Share this post


Link to post
Share on other sites

Coordinates are scaled inside your svg. Here's a way to do it with vanilla js. There's a way to do that way with MotionPathPlugin, but I forgot how. cc @GreenSock 

 

See the Pen 3e6057d297caff7067faea27ab4acfcf by osublake (@osublake) on CodePen

 

 

And notice the mousearea-2 element I added to the end of the svg. Using the red rectangle for mouse events is problematic because it's behind other elements, which will block mouse events.

  • Like 4

Share this post


Link to post
Share on other sites
3 hours ago, OSUblake said:

There's a way to do that way with MotionPathPlugin, but I forgot how. cc @GreenSock 

Are you talking about this? https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()

 

Or maybe https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for all your answers. It was very educational. Your code kind of make sense to me so I'll have to dig up and study a bit ūüĎć

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

√ó