Autumn falling leaves ( GSAP )

autumn-falling-leaves-gsap.markdown

Autumn falling leaves ( GSAP )

simple Autumn falling leaves with GSAP

A Pen by Pelayo Maojo on CodePen.

License.

index.html

<div id="container">
  
</div>

script.js

/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
var falling = true;

TweenLite.set("#container",{perspective:400})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-20%"})

var total = 8;
var container = document.getElementById("container"),	w = window.innerWidth , h = window.innerHeight;
 
 for (i=0; i<total; i++){ 
   var Div = document.createElement('div');
   TweenLite.set(Div,{attr:{class:'dot' + i},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
   container.appendChild(Div);
   animm(Div);
 }
 
 function animm(elm){   
   TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
   TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
   TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
 };

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






/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */

scripts

<script src="https://codepen.io/MAW/pen/XVRpEE"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

style.css

body{
  background-color: #111;
  font-family: Signika Negative, Asap, sans-serif;
  color:white;
  overflow:hidden;
}
.dot1{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
  background-size: 100% 100%;
}.dot2{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja1.png);
  background-size: 100% 100%;
}.dot3{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja3.png);
  background-size: 100% 100%;
}.dot5{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja1.png);
  background-size: 100% 100%;
}
.dot4{
  width:50px;
  height:40px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja4.png);
  background-size: 100% 100%;
}
.dot6{
  width:40px;
  height:20px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
  background-size: 100% 100%;
}
.dot7{
  width:20px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
  background-size: 100% 100%;
}
.dot0{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
  background-size: 100% 100%;
}
.dot8{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja4.png);
  background-size: 100% 100%;
}
.dot9{
  width:60px;
  height:50px;
  position:absolute;
  background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
  background-size: 100% 100%;
}
html, body, #container {width:100%; height:100%; }
#logo{ left:50%; top:50%; position:absolute; border-radius:10px; }



#DiacoDesignLink,#pens{
  color: #fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://codepen.io/MAW/pen/XVRpEE" rel="stylesheet" />