Javascript Particle Animation: Particle Animation GSAP
In this article, I will show you how to create a javascript particle animation using just a few lines of code.
The HTML code you will need to create this animation is looking like this:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>As you can see there is no need for more HTML code because the rest of the structure will be generated using javascript.
Then, the CSS code:
body{
background:#101010;
margin:0;
padding:0;
width:100%;
height:100vh;
overflow:hidden;
position:relative;
}
.container{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.container div{
position:absolute;
background:#9cee02;
width:30px;
height:30px;
border-radius:100%;
box-shadow: 0px 0px 4px 0px #9cee02;
}Just basic CSS code in order to make our particles look like a normal circle.
Finally, the last part of the code you need to create is the javascript code, which will create the entire animation, and it looks like the following:
function random(min, max){
return Math.floor(Math.random() * (1 + max - min) + min);
}
// Setup
var tl = new TimelineMax({ repeat: -1 }),
container = jQuery('.container'),
isMobile = !!("ontouchstart" in window),
dotsCount = isMobile ? 80 : 300,
html = '';
for (var i =0; i< dotsCount; i++){
html += "<div></div>";
}
var dots = $(html).appendTo(container);
dots.each(function() {
tl.add(TweenMax.fromTo(this, 6, {
left: random(0,100) + "%",
top: random(0,100) + "%",
z: random(-725, 600),
opacity: Math.random()
}, {
left: "+=" + random(-40, 40) + "%",
top: "+=" + random(-36, 36) + "%",
z: "+=" + random(-725, 600),
opacity: Math.random() + 0.1,
repeat: 1,
yoyo:true,
ease: SVGLineElement.easeInOut
}), 0);
});
tl.fromTo(container, .8, {perpective:50, opacity: .55}, {perspective: 215, opacity:.9, ease: Sine.easeInOut}, 3.25)
.to(container, .8, {perspective:50, opacity:.55, ease: Sine.easeInOut}, 6.5);