<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
TweenMax.set("img",{xPercent:"-50%",yPercent:"-50%"})
var total = 70 , container = document.getElementById('container-confetti') ,
w = container.offsetWidth , h = container.offsetHeight;
for (var i=0 , div ; i<total; i++){
div = document.createElement('div'); div.className='dot';
container.appendChild(div);
TweenMax.set(div,{x:R(0,w),y:R(0,100),opacity:1,scale:R(0,0.5)+0.5,backgroundColor:"hsl("+R(170,360)+",50%,50%)"});
animm(div);
};
function animm(elm){
TweenMax.to(elm,R(0,5)+3,{y:h,ease:Linear.easeNone,repeat:-1, delay:-5});
TweenMax.to(elm,R(0,5)+1,{x:'+=70', repeat:-1,yoyo:true,ease:Sine.easeInOut})
TweenMax.to(elm,R(0,1)+0.5,{opacity:0, repeat:-1,yoyo:true,ease:Sine.easeInOut})
};
function R(min, max){ return min + ( Math.random() * (max - min)) };
</script>
.dot{ width:10px; height:10px; position:absolute; background-color:#00FF00; border-radius: 20px; }
If you need any plugin for this tutorial you can find it in the plugins page.
