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