Mouseover / mouseout with e.offset
Attached example is almost my goal, additionaly to it I want to run animation based on mouse position.
The part of code I have:
btn.addEventListener('mouseover', (e) => {
rect = btn.getBoundingClientRect();
offset = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
x = e.pageX - offset.left;
y = e.pageY - offset.top;
ripple2.style.cssText = `
top: ${y}px;
left: ${x}p
Oh ok! Gotcha.
Something like this?
See the Pen PooqwQy?editors=0011 by GreenSock (@GreenSock) on CodePen
