So, I need to make a div that follows the cursor along the path. It should also be happening only when cursor is hovering parent.DIV -- moving DIV should stop on it's spot. The problem is that I cannot stop the DIV from following cursor on .mouseout. I put here a snippet of my code. I guess, I should somehow tell the moving div to stop, but I do not understand how :(
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>You can store your mouse move handler function in a variable (followMouseHandler in the below snippet) and then use removeEventListener to remove it when the mouse leaves the div. You can see this working in the below snippet:
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>