<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Extraordinary GSAP Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.orbit {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="orbit">
<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');
const orbit = document.querySelector('.orbit');
gsap.set(circles, { opacity: 0 });
circles.forEach((circle, index) => {
const offsetAngle = (index / circles.length) * Math.PI * 2;
const circleX = Math.cos(offsetAngle) * 180; // Radius of the circle
const circleY = Math.sin(offsetAngle) * 180; // Radius of the circle
gsap.to(circle, {
duration: 3 + index * 0.1,
x: circleX,
y: circleY,
scale: 2,
opacity: 1,
repeat: -1,
yoyo: true,
ease: "power1.inOut",
backgroundColor: "random([#3498db,#e74c3c,#2ecc71,#f39c12,#9b59b6,#1abc9c,#34495e,#d35400])",
delay: index * 0.1
});
});
gsap.to(orbit, {
rotation: 360,
duration: 10,
repeat: -1,
ease: "linear"
});
</script>
</body>
</html>
Comments
Post a Comment