Follow cursor along a path using MotionPathPlugin

[Harnon]

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')

        })

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

[ZachSaucier]

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.

[Harnon]

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

[ZachSaucier]

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.

[Harnon]

Added my CodePen above. Thanks for letting me know.

[Harnon]

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')

        })

CodePen here.

[OSUblake]

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.

[GreenSock]

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()

[OSUblake]

5 hours ago, GreenSock said:

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

 

Think so. 

 

See the Pen 4f25577f52ec84936d6724e07375b50d by osublake (@osublake) on CodePen

 

 

[Harnon]

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 ?