<!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-container {
width: 500px;
height: 500px;
position: relative;
perspective: 1000px;
}
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
</style>
</head>
<body>
<div class="circle-container">
<div class="circle" style="background-color: #3498db;"></div>
<div class="circle" style="background-color: #e74c3c;"></div>
<div class="circle" style="background-color: #2ecc71;"></div>
<div class="circle" style="background-color: #f39c12;"></div>
<div class="circle" style="background-color: #9b59b6;"></div>
<div class="circle" style="background-color: #1abc9c;"></div>
<div class="circle" style="background-color: #34495e;"></div>
<div class="circle" style="background-color: #d35400;"></div>
</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, { opacity: 0, scale: 0 });
const tl = gsap.timeline({ repeat: -1 });
tl.to(circles, {
duration: 1.5,
opacity: 1,
scale: 1,
stagger: 0.2,
ease: "power2.out"
})
.to(circles, {
duration: 6,
rotation: 360,
repeat: -1,
ease: "none"
})
.to(circles, {
duration: 3,
backgroundColor: "#fff",
scale: 0.8,
stagger: 0.2,
ease: "power2.inOut"
})
.to(circles, {
duration: 3,
backgroundColor: "random([#3498db,#e74c3c,#2ecc71,#f39c12,#9b59b6,#1abc9c,#34495e,#d35400])",
scale: 1,
stagger: 0.2,
ease: "power2.inOut"
});
</script>
</body>
</html>
Comments
Post a Comment