[Mouse cursor follow animation]

import React from "react";
import "./FollowImage.css"
import gsap from "gsap";
import Image from "react-bootstrap/esm/Image";

function FollowImage (){
let FollowBox = "#Wrap .FollowBox";
gsap.set(FollowBox, {
  xPercent: 1,
  yPercent: 1,
  scale: 0
});

const MyDiv = document.getElementById('Wrap')

function clamp(num, min, max) {
  return num <= min 
    ? min 
    : num >= max 
      ? max 
      : num
} 



window.addEventListener("mousemove", (e) => {
  gsap.to(FollowBox, {
    duration: 0.5,
    overwrite: "auto",
    x: clamp(-100+e.clientX - e.target.offsetLeft,-50,150),
    y: clamp(-100+e.clientY- e.target.offsetTop,0,150),
    stagger: 0.15,
    ease: "none"
  });
});

  return (
    
<div id="Wrap">
  <Image id="FollowBox"
    className="FollowBox"
    src="1000x600(mykhaylo).png"
    alt=""
  />
  <Image
    className="FollowBox"
    src="1000x600(music).png"
    alt=""
  />
</div>
  )
}




export default FollowImage;

This is my current code, so far I failed to translate it for codepen. 

 

On 9/26/2022 at 5:17 PM, Cassie said:

Heya! Adding the event listener on a div instead of the window should get you some way towards that. If you need more help pop together a codepen demo with what you've tried.
 

myDiv.addEventListener("mousemove", (e) => {})

 

[Mouse cursor follow animation]

How to make it that this Image interaction only stays within one <div></div> and as soon as the mouse cursor leaves that div, the images go back to their original centered position? 

[Cool follow mouse move effect]

Hi guys! How could you reset this interaction to the default position after the "mousemove" left the interactive <div><div/> section?