Search the Community
Showing results for tags 'mousex'.
Found 2 results
-
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') })
-
greetings animation engineers, In the attached pen you will see the morph from the map into the logo, you will notice that the map is composed of three parts, which you had advised me to consolidate into one path in order to do the morph into the logo which is also a single path.. But now I would like to do the following: The map should pulse RGB at a heart rate based on distance of the mouse, and then it will morph into the logo according to its current behavior. So for example if we compare the map animation to a heartbeat, should the animation increase its rate linearly based on distance or at an accelerated rate (exponentially) how would you create such an animation? I have succeeded in animating tilts on x and y axis based on mouse positon as can be seen in many playing card demos on codepen, where you add shine and tilt to the element as controlled by mouseX and mouseY, so how would one go about it in this case? where you would be changing pulse rate based on distance.
