GSAP tweens examples -
<!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>
<title>GSAP tweens examples - </title>
</head>
<body>
<div class="main">
<img src="https://www.dziedziczak-artur.com/microblog/2026-01-11-25/images/index.jpeg" />
<div class="invert"></div>
<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;
}
var invertElement = {a:0};//start the invert at 0 pixels
var catElement = {a:2};//start the invert at 0 pixels
var isApplied = false;
var addFog = false;
var followTween = null
var fogTween = null
document.addEventListener("mousemove", e => {
if (!addFog) {
if (rectsCollide(ball, cat)) {
isApplied = true;
} else {
isApplied = false;
}
followTween = gsap.to(".cat", { overwrite: true, duration: .45,
width: isApplied ? `250` : `100px`,
height: isApplied ? `250` : `100px`,
left: isApplied ? `${e.clientX - 125}px` : `${e.clientX - 50}px`,
top: isApplied ? `${e.clientY - 125}px` : `${e.clientY - 50}px`
})
}
});
document.querySelector('.main').addEventListener("click", e => {
if (isApplied && !addFog) {
fogTween = gsap.to(".cat", { duration: 2, overwrite: true, width: "4000px", height: "4000px", left: `${e.clientX - 2000}px`, top: `${e.clientY - 2000}px`});
addFog = true;
} else {
followTween = gsap.to(".cat", {overwrite: true, width: "200px", height: "200px", left: `${e.clientX - 100}px`, top: `${e.clientY - 100}px`, onEnd: () => {
addFog = false;
}});
}
})
function applyInvert() {
TweenMax.set(['.invert'], {backdropFilter:"invert()"});
};
function applyInvertCat() {
TweenMax.set(['.cat'], {backdropFilter:"invert()"});
};
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;
}
.invert {
backdrop-filter: invert();
width: 100%;
height: 100%;
position: absolute;
}
.text {
position: absolute;
top:0;
left: 0;
}
.ball {
pointer-event: none;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
top: calc(100vh - 50px);
left: calc(100vw - 50px);
}
.cat {
cursor: pointer;
backdrop-filter: invert();
top: 0;
left: 0;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border-radius: 50%;
pointer-event: none;
}
.main {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
</style>
</body>
</html>