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 ?

CodePen here.

Added my CodePen above. Thanks for letting me know.

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

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