<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced GSAP Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
opacity: 0;
}
</style>
</head>
<body>
<div class="circle" style="top: 50px; left: 50px; background-color: #3498db;"></div>
<div class="circle" style="top: 50px; left: 150px; background-color: #e74c3c;"></div>
<div class="circle" style="top: 50px; left: 250px; background-color: #2ecc71;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
const circles = document.querySelectorAll('.circle');
gsap.set(circles, { scale: 0 });
const tl = gsap.timeline({ repeat: -1 });
tl.to(circles, {
duration: 0.8,
opacity: 1,
scale: 1,
stagger: 0.2,
ease: "power2.inOut"
})
.to(circles, {
duration: 2,
x: "+=150",
y: "+=50",
stagger: 0.2,
ease: "power1.inOut"
})
.to(circles, {
duration: 1,
backgroundColor: "#f39c12",
stagger: 0.2,
ease: "none"
})
.to(circles, {
duration: 2,
x: "-=150",
y: "-=50",
stagger: 0.2,
ease: "back.inOut(1.7)"
});
</script>
</body>
</html>
Comments
Post a Comment