Entonces, necesito hacer un div que siga el cursor a lo largo del camino. También debería estar sucediendo solo cuando el cursor está sobre el padre. DIV: el DIV en movimiento debe detenerse en su lugar. El problema es que no puedo evitar que DIV siga el cursor en .mouseout. Pongo aquí un fragmento de mi código. Supongo que de alguna manera debería decirle al div en movimiento que se detenga, pero no entiendo cómo :(
gsap.registerPlugin(MotionPathPlugin); const target = document.querySelector("#rect"); const path = document.querySelector("#path"); var element = document.getElementById('area'); let normalize; function resize() { normalize = gsap.utils.normalize(0, innerWidth) } window.addEventListener("resize", resize); resize(); const tl = gsap.timeline({paused: true}) .to(target, {motionPath: { path: path, align: path, autoRotate: true, alignOrigin: [0.5, 0.5] }, immediateRender: true, ease: "none"}); document.getElementById("area").onmouseover = function(){ window.addEventListener("mousemove", e => tl.progress(normalize((e.pageX) * 3))); }; document.getElementById("area").onmouseout = function(){ tl.paused; }; #area { background-color: red; width: 40vw; } <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Try</title> </head> <body> <!-- partial:index.partial.html --> <div id="area"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 300"> <!-- <path id="path" fill="none" stroke="black" stroke-width="4" d="M100.8 149.2s74.8-114.7 185.3-85.4 56.5 157.9 165.2 200.9c132.5 52.4 247.8-144 247.8-144"/> --> <path id="path" x="130.5" y="73.5" d="M1 219.877C275 255.376 28 -35.6237 457 4.87657V280.376" stroke="black" fill="transparent"/> <rect id="rect" width="50" height="50" fill="#88ce03"> </svg> </div> <!-- partial --> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js'></script><script src="./script.js"></script> <!-- <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script><script src="./script.js"></script> --> </body> </html>Puede almacenar la función del controlador de movimiento del mouse en una variable ( followMouseHandler en el fragmento a continuación) y luego usar removeEventListener para eliminarla cuando el mouse abandona el div. Puedes ver esto funcionando en el siguiente fragmento:
gsap.registerPlugin(MotionPathPlugin); const target = document.querySelector("#rect"); const path = document.querySelector("#path"); var element = document.getElementById('area'); let normalize; function resize() { normalize = gsap.utils.normalize(0, innerWidth) } window.addEventListener("resize", resize); resize(); const tl = gsap.timeline({paused: true}) .to(target, {motionPath: { path: path, align: path, autoRotate: true, alignOrigin: [0.5, 0.5] }, immediateRender: true, ease: "none"}); const followMouseHandler = e => tl.progress(normalize((e.pageX) * 3)); document.getElementById("area").onmouseover = function(){ window.addEventListener("mousemove", followMouseHandler); }; document.getElementById("area").onmouseout = function(){ tl.paused; window.removeEventListener("mousemove", followMouseHandler); }; #area { background-color: red; width: 40vw; } <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Try</title> </head> <body> <!-- partial:index.partial.html --> <div id="area"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 300"> <!-- <path id="path" fill="none" stroke="black" stroke-width="4" d="M100.8 149.2s74.8-114.7 185.3-85.4 56.5 157.9 165.2 200.9c132.5 52.4 247.8-144 247.8-144"/> --> <path id="path" x="130.5" y="73.5" d="M1 219.877C275 255.376 28 -35.6237 457 4.87657V280.376" stroke="black" fill="transparent"/> <rect id="rect" width="50" height="50" fill="#88ce03"> </svg> </div> <!-- partial --> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js'></script><script src="./script.js"></script> <!-- <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script><script src="./script.js"></script> --> </body> </html>