Confetti Animation using JavaScript

Confetti Animation Using JavaScript

In this article, You will learn how to create confetti animation using HTML CSS SVG and JS with little help from CSS keyframes for animation.

By the end of this article, you'll be able to create amazing confetti animation effect using HTML, CSS and JavaScript!

Watch the Tutorial on Youtube

https://youtu.be/8UcUibF6ioc

Live Preview.!

HTML Code

<div class="wrapper">
    <div class="box">
        <img class="trophy" src="assets/trophy2.png" />
        <img class="badge" src="assets/badge.png" />
        <svg viewBox="0 0 10 10"><path /></svg>
        <svg viewBox="0 0 10 10"><path /></svg>
        <svg viewBox="0 0 10 10"><path /></svg>
        <svg viewBox="0 0 10 10"><path /></svg>
    </div>
    <img class="ribon" src="assets/ribon2.png" />
</div>

CSS Code

*{
    margin: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
}
.wrapper{
    width: 300px;
    height: 350px;
    position: relative;
}
.wrapper img.ribon{
    width: 490px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 125%);
}
.wrapper .box{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.wrapper .box img{
    position: absolute;
}
.wrapper .box img.trophy,
.wrapper .box img.badge{
    width: fit-content;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* SVG and Animation */
.wrapper .box svg{
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.wrapper .box svg path{
    fill: none;
    stroke: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}
@keyframes svgAnimation {
    0%{
        opacity: 0;
        stroke-dasharray: 100%, 170%;
        stroke-dashoffset: 10;
    }
    60%{
        opacity: 1;
        stroke-dashoffset: -16;
    }
    100%{
        opacity: 0;
        stroke-dasharray: 100%, 100%;
        stroke-dashoffset: -16;
    }
}

/* Element Styling append with javascript */
.wrapper .box span{
    display: inline-block;
    position: absolute;
    transform-style: preserve-3d;
    perspective: 400px;
    opacity: 0.8;
    visibility: hidden;
    z-index: -1;
    animation: animate 2s ease 0.5s 1;
}
.wrapper .box span:nth-child(50n+3){
    animation: animate 2s ease 0.5s 1, animateTwo 1s linear 0s infinite;
}
.wrapper .box span:nth-child(50n+2){
    animation: animate 2s ease 0.8s 1;
}
.wrapper .box span:nth-child(50n+4){
    animation: animate 2s ease 0.5s 1;
}
@keyframes animate {
    0%{
        opacity: 0.8;
        visibility: hidden;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, -500px) rotate3d(0, 0, 0, 0deg);
    }
    25%{
        opacity: 1;
        visibility: visible;
        z-index: 2;
        transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 180deg);
    }
    50%{
        transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 270deg);
    }
    100%{
        opacity: 0.5;
        visibility: hidden;
        z-index: -1;
        transform: translate3d(0, 0, 100px) rotate3d(1, 1, 1, 360deg);
        display: none;
    }
}
@keyframes animateTwo {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

JavaScript Code

window.addEventListener('load', function(){
const colorArray = ['red','blue','yellow','orange','green','purple','pink','brown','skyblue','deepskyblue','firebrick','yellowgreen','cyan', 'orangered'];
const svgPathArray = ['M2,5 S2,-2 4,5 S7,8 8,4', 'M2,2 Q5,2 5,5 T8,8','M2,5 A 5 25 0 0 1 8 8','M5,2 Q 2,5 5,8'];

const box = document.querySelector('.box');
const svgPaths = document.querySelectorAll('svg path');

for (var i = 0; i < 100; i++) {

    let size = Math.floor(Math.random() * 5);
    let color = colorArray[Math.floor(Math.random() * 6)];
    let span = document.createElement('span');

    if (i <= 3) {
        svgPaths[i].setAttribute('d', `${svgPathArray[Math.floor(Math.random() * svgPathArray.length)]}`);
        svgPaths[i].style.stroke = color;
        svgPaths[i].style.left = `${Math.random() * 100}px`;
        svgPaths[i].style.top = `${Math.random() * 100}px`;
        svgPaths[i].style.animation = 'svgAnimation 0.8s linear 0.5s 1'; 
    }
    if (i < 5) {
        span.style.cssText = `
            width: ${size * 3}px;
            height: ${size * 3}px;
            background-color: ${color};
        `;
    }
    if (i > 5 && i < 30) {
        span.style.cssText = `
            width: ${size * 2}px;
            height: ${size * 2}px;
            border-radius: ${size};
            background-color: ${color};
        `;
    }
    if (i > 30 && i < 50) {
        span.style.cssText = `
            width: ${size}px;
            height: ${size * 8}px;
            border-radius: ${size};
            background-color: ${color};
        `;
    }
    if (i > 50 && i <= 100) {
        span.style.cssText = `
            border-top: ${Math.floor(Math.random() * size + 5)}px solid ${color};
            border-left: ${size * 2 + 5}px solid transparent;
            border-right: ${size * 2 + 2}px solid transparent;
        `;
    }
    span.style.left = `${Math.random() * 300}px`;
    span.style.top = `${Math.random() * 250}px`;
    span.style.rotate = `${size * 2}deg`;
    box.append(span);

}
})

Responsive Navigation Bar Using Javascript

Fullscreen Animated Navigation Menu

Animated Login Form in HTML CSS with Validations

Registration Form in HTML and CSS

Draggable Slider in JavaScript