JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div id="box">
    <div id="char">
        <svg id="confetti" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" />
    </div>
</div>

CSS

#box {
    width: 250px;
    height: 250px;
    border:1px dashed red;
    position: relative;
}
#confetti {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFF;
}

JavaScript

var svgNS = 'http://www.w3.org/2000/svg';

function Random(max) {
    return Math.random() * max;
}

function random(min, max) {
    return min + Math.floor(Math.random() * (max - min));
}

function animm(elm) {
    TweenMax.to(elm, Random(3) + 3, {
        y: h,
        ease: Linear.easeNone,
        repeat: -1,
        delay: -5
    });
    TweenMax.to(elm, Random(3) + 1, {
        x: '+=70',
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    })
    TweenMax.to(elm, Random(1) + 0.5, {
        opacity: 0,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    })
};
var total = 10;
var w = 211//$("#happy").width();
var h = 234//$("#happy").height();
for (var i = 0; i < total; i++) {
    var myCircle = document.createElementNS(svgNS, 'circle');
    myCircle.setAttributeNS(null, 'class', 'dot');
    myCircle.setAttributeNS(null, 'r', 5);
    document.getElementById("confetti").appendChild(myCircle);
    TweenMax.set($('.dot')[i], {
        x: Random(w),
        y: 0,
        opacity: 1,
        scale: Random(0.5) + 0.5,
        fill: 'hsl(' + random(0, 150) + ',50%,50%)'
    });
    animm($('.dot')[i]);
}