<!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;
}
.box1 {
background-color: #3498db;
color: white;
}
.box2 {
background-color: #e74c3c;
color: white;
}
.box3 {
background-color: #2ecc71;
color: white;
}
</style>
</head>
<body>
<h1>Animation 1</h1>
<div class="animated-object box1">1</div>
<div class="animated-object box2">2</div>
<div class="animated-object box3">3</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
// GSAP Animations
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
});
</script>
</body>
</html>
Comments
Post a Comment