<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GSAP Animations</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
margin-bottom: 30px;
}
.animated-object {
width: 100px;
height: 100px;
margin: 20px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
cursor: pointer;
}
.box1 {
background-color: #3498db;
color: white;
}
.box2 {
background-color: #e74c3c;
color: white;
}
.box3 {
background-color: #2ecc71;
color: white;
}
.box4 {
background-color: #9b59b6;
color: white;
}
.box5 {
background-color: #f39c12;
color: white;
}
</style>
</head>
<body>
<h1>Animation-2</h1>
<div class="animated-object box1">1</div>
<div class="animated-object box2">2</div>
<div class="animated-object box3">3</div>
<div class="animated-object box4">4</div>
<div class="animated-object box5">5</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
gsap.from(".box1", {
duration: 1,
opacity: 0,
y: -50,
ease: "power2.out"
});
gsap.from(".box2", {
duration: 1,
opacity: 0,
scale: 0,
ease: "elastic.out(1, 0.5)",
delay: 0.5
});
gsap.from(".box3", {
duration: 1.5,
opacity: 0,
x: 200,
rotation: 360,
ease: "back.out(1.7)",
delay: 1
});
gsap.from(".box4", {
duration: 1,
opacity: 0,
y: 50,
ease: "bounce.out",
delay: 1.5
});
gsap.from(".box5", {
duration: 1,
opacity: 0,
scale: 0,
ease: "rough({ strength: 2, points: 50 })",
delay: 2
});
// Click event to trigger an additional animation
const boxes = document.querySelectorAll('.animated-object');
boxes.forEach(box => {
box.addEventListener('click', () => {
gsap.to(box, {
duration: 0.5,
opacity: 0,
scale: 0,
ease: "power2.in",
onComplete: () => {
box.style.display = 'none';
}
});
});
});
</script>
</body>
</html>
Comments
Post a Comment