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.
