<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/DrawSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/EaselPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Flip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/GSDevTools.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/InertiaPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/MotionPathHelper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/MotionPathPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/MorphSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Observer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Physics2DPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/PhysicsPropsPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/PixiPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrambleTextPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollTrigger.min.js"></script>
<!-- ScrollSmoother requires ScrollTrigger -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollSmoother.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollToPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/TextPlugin.min.js"></script>
<!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/EasePack.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>
<!-- CustomBounce requires CustomEase -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomBounce.min.js"></script>
<!-- CustomWiggle requires CustomEase -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomWiggle.min.js"></script>
<script>
// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(Draggable,DrawSVGPlugin,EaselPlugin,Flip,GSDevTools,InertiaPlugin,MotionPathHelper,MotionPathPlugin,MorphSVGPlugin,Observer,Physics2DPlugin,PhysicsPropsPlugin,PixiPlugin,ScrambleTextPlugin,ScrollTrigger,ScrollSmoother,ScrollToPlugin,SplitText,TextPlugin,RoughEase,ExpoScaleEase,SlowMo,CustomEase,CustomBounce,CustomWiggle)
// gsap code here!
});
</script>
</head>
<body>
<div class="main">
<div class="tile ball"></div>
<div class="tile cat"></div>
</div>
<script>
let cat = document.getElementsByClassName("cat")[0];
let ball = document.getElementsByClassName("ball")[0];
let catTween = null
let ballTween = null
function rectsCollide(el1, el2) {
const r1 = el1.getBoundingClientRect();
const r2 = el2.getBoundingClientRect();
const colide = !(r1.right <= r2.left || r1.left >= r2.right|| r1.bottom<= r2.top || r1.top >= r2.bottom);
return colide;
}
document.addEventListener("mousemove", e => {
catTween = gsap.to(".cat", {
left: `${e.clientX - 100}px`,
top: `${e.clientY - 100}px`,
duration: 5,
onUpdate: () => {
if (rectsCollide(ball, cat)) {
gsap.to("body", { backgroundColor: "#FFA500", duration: 0.2});
} else {
gsap.to("body", { backgroundColor: "white"});
}
}
});
})
document.addEventListener("mousemove", e => {
ballTween = gsap.to(".ball", { left: `${e.clientX - 25}px`, top: `${e.clientY - 25}px`, duration: 0.2 });
})
</script>
<style>
body {
margin: 0;
padding: 0;
}
.ball {
pointer-event: none;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: #FFA500;
top: calc(100vh - 50px);
left: calc(100vw - 50px);
}
.cat {
top: 0;
left: 0;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: #FFA500;
pointer-event: none;
}
.main {
width: 100vw;
height: 80vh;
}
</style>
</body>
</html>