Worm animation made with TweenMax - Shadow on Top effect - #gsap @greenshock #TweenMax #animation #html5

script.js

var  tb  = 100
		,cl  = ['#000','#111','#222','#333','#444','#555','#666','#777','#888','#999']
    ,wi  = '100px'
    ,he  = '100px'
    ,sl  = 4
    ,fs  = 0.3
    ,ea  = 'ease:Power2.easeOut'
    ,SH  = $(document).height()
    ,SW  = $(document).width()
    ,SMT = SH / 2
    ,SML = SW / 2
		,tl  = new TimelineMax()
		,$bd = $('body')
		,blc = '<div class="block" style="'
							+'border:solid 1px '+cl[1]+';'
							//+'box-shadow:0 0 4px '+cl[2]+' inset;'
							+'width:'+wi+';height:'+he+';'
							+'background:'+cl[3]+';'
							+'position:absolute;'
							+'outline:solid 1px '+cl[3]+';'
							+'">'
		,shaT= '<div class="shadowT"></div>'
		,shaB= '<div class="shadowB"></div>'
;

function comingFromBehind(){

  //Reset - Body Design
    $bd.css({background: '#222',margin:0,padding:0,border:0,overflow:'hidden'});

  //DrawShadow - Layer top - Nice Shadow Efect
    $bd.append(shaT);
    $bd.append(shaB);

  //Design them from the center - Blocks
    for(i = 0 ; i < tb ; i++ ){
      $bd.append(blc);
    }
  
  //Center elements 
  TweenMax.set($bd.find('.block'),{top:-10,left:SML,rotation:0,transformOrigin:"0 0"});
    
  //Animation
  tl.staggerTo($bd.find('.block'), sl, {top:SH,rotation:360,transformOrigin:"0 0",repeat:-1, yoyo:true}, 0.02);
  tl.play();
   
}

$(window).load(function(){
  comingFromBehind(); 
})

$(window).resize(function() {
  //Clean Body
  $bd.html('');
  comingFromBehind(); 
});



    

style.css

.block:before{
  content:'';
  width: 5px;
  height: 5px;
  background: #00ff00;
  position: absolute;
  top:0;
  left:0;
  border-radius:50%;
}
.shadowT{
  width: 100%;
  height: 200px;
  background:transparent;
  position: absolute;
  top:100px;
  left:0;
  z-index:2;
  margin-top:-200px;
}
.shadowT:before{
  content:'';
  width: 100%;
  height:50px;
  background: transparent;
  position: absolute;
  border-radius:50%;
  left:0;
  margin-left: 0;
  margin-top: 150px;
  z-index:1;
  box-shadow: 0 0 20px 0 rgba(00,00,00,0.5);
}
.shadowT:after{
  content:'';
  width: 100%;
  height: 200px;
  background:#222;
  position: absolute;
  top:50%;
  left:0;
  z-index:3;
  margin-top: -100px;
}


.shadowB{
  width: 100%;
  height: 200px;
  background:transparent;
  position: absolute;
  bottom:0;
  left:0;
  z-index:2;
  margin-bottom:-100px;
}
.shadowB:before{
  content:'';
  width: 100%;
  height:50px;
  background: transparent;
  position: absolute;
  border-radius:50%;
  left:0;
  margin-left: 0;
  z-index:1;
  box-shadow: 0 0 20px 0 rgba(00,00,00,0.5);
}
.shadowB:after{
  content:'';
  width: 100%;
  height: 200px;
  background:#222;
  position: absolute;
  top:50%;
  left:0;
  z-index:3;
  margin-top: -100px;
}

Worm-animation-made-with-TweenMax---Shadow-on-Top-effect---#gsap-@greenshock-#TweenMax-#animation-#html5.markdown

Worm animation made with TweenMax - Shadow on Top effect - #gsap @greenshock #TweenMax #animation #html5

Simple loop animation. the idea is to make something comnig from behind the background. the result is a worm animation made with TweenMax.

A Pen by Ignacio Correia on CodePen.

License.