Skip to content

Instantly share code, notes, and snippets.

@nola
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nola/9606490 to your computer and use it in GitHub Desktop.
Save nola/9606490 to your computer and use it in GitHub Desktop.
360 particle whip
var particle = $(".green-bar");
function randNum( bit ){
//TweenMax.fromTo(bit, 0.3+(Math.random()*0.5), {y:Math.floor(Math.random()*245) + 1, x:-500, rotationY:0, scale:(0.3+(Math.random()*0.8)), skewX:45, opacity:(0.01+(Math.random()*0.2))}, {rotationY:Math.floor(Math.random()*90), x:1000, ease:Linear.easeNone, transformOrigin:"50% 50%", onComplete:randNum, onCompleteParams:[bit] }, 0);
//TweenMax.fromTo(bit, 0.3+(Math.random()*2), {y:Math.floor(Math.random()*245) + 1, x:-500, rotationX:0, scale:(0.5+(Math.random()*1)), skewX:0, opacity:(0.01+(Math.random()*0.1))}, {rotationX:Math.floor(Math.random()*360), x:1000, skewX:20, ease:Linear.easeNone, transformOrigin:"50% 50%", onComplete:randNum, onCompleteParams:[bit] }, 0);
//TweenMax.to(bit, 0.01+(Math.random()*3), {y:(-1*(100)+(Math.random()*200)), opacity:(0.09+(Math.random()*0.1)), scale:(0.5+(Math.random()*1)), rotationY:360, rotationX:(0+(Math.random()*10)), ease:Linear.easeNone, transformOrigin:"50% 50% -1600", onComplete:randNum, onCompleteParams:[bit] }, 0);
TweenMax.fromTo(bit, 0.01+(Math.random()*3),
{rotationY:0, opacity:(0.01+(Math.random()*0.09))},
{ y:(-1*(100)+(Math.random()*200)),
opacity:(0.01+(Math.random()*0.3)),
scaleY:(0.01+(Math.random()*2)),
rotationY:360,
//rotationX:(-10+(Math.random()*10)),
skew:45,
ease:Linear.easeNone,
transformOrigin:"50% 50% -2000",
onComplete:randNum,
onCompleteParams:[bit]
}, 1);
}
particle.each( function (i, ele) {
randNum(ele);
});
.benefits .green-bar{
width: 200px;
height: 10px;
background-color: #dbf4d8;
position: absolute;
top: 120px;
left: 335px;
border-radius: 5px;
z-index: 1;
}
<div class="hero">`
<div class="green-flare particle1"></div>
<div class="green-flare particle2"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
<div class="green-bar particle3"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment