In this tutorial, we will be creating a stunning fireworks animation using GSAP (GreenSock Animation Platform) along with HTML and CSS. GSAP is a powerful animation library that allows you to create complex animations with ease.
First, let’s set up our HTML structure. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks Animation GSAP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="fireworks"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Next, let’s style our fireworks animation. Create a new CSS file called styles.css and add the following code:
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
#fireworks {
width: 100px;
height: 100px;
position: relative;
}
.firework {
width: 10px;
height: 60px;
background: #fff;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
transform-origin: center bottom;
}Now, let’s create the JavaScript file script.js and add the following code to create the fireworks animation:
const fireworks = document.getElementById('fireworks');
function createFirework() {
const firework = document.createElement('div');
firework.classList.add('firework');
fireworks.appendChild(firework);
gsap.to(firework, {
duration: 2,
scaleY: Math.random() + 1,
repeat: -1,
yoyo: true,
ease: 'power4.inOut',
onComplete: () => {
fireworks.removeChild(firework);
}
});
gsap.to(firework, {
duration: 2,
rotation: 360,
repeat: -1,
ease: 'none'
});
}
setInterval(createFirework, 500);In this JavaScript code, we are creating a function createFirework that generates a firework element with random size and rotation. We are using GSAP to animate the fireworks, scaling them up and down, and rotating them around their center.
Finally, open your HTML file in a web browser, and you should see a beautiful fireworks animation displayed on the screen. Feel free to play around with the code and customize the animation to your liking.
I hope you enjoyed this tutorial on creating fireworks animation using GSAP! If you have any questions or run into any issues, feel free to ask for help in the comments. Happy coding!
sweet!
🔥