html,
body {
width: 100%;
height: 100%;
}
.crossbars {
position: fixed;
top: 0;
left: 0;
pointer-events: 0;
background-color: #000;
z-index: 100; // increase if needs be
&__horizontal {
width: 100%;
height: 2px;
}
&__vertical {
width: 2px;
height: 100%;
}
}
View Compiled
const crossbar__horizontal = document.querySelector('.crossbars__horizontal');
const crossbar__vertical = document.querySelector('.crossbars__vertical');
const pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
const mouse = { x: pos.x, y: pos.y };
const speed = 0.8; // 0 to 1.
const ySet = gsap.quickSetter(crossbar__horizontal, 'y', 'px');
const xSet = gsap.quickSetter(crossbar__vertical, 'x', 'px');
window.addEventListener('mousemove', (e) => {
mouse.x = e.x;
mouse.y = e.y;
});
gsap.ticker.add(() => {
const dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio());
pos.x += (mouse.x - pos.x) * dt;
pos.y += (mouse.y - pos.y) * dt;
xSet(pos.x);
ySet(pos.y);
});