the Mind ( Footsteps effect with GSAP )

index.html

<!--  <div id='winray'><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/183204/winray.png"></div>
<div id='desc'>
  <span>Mind</span><br>
  The Biggest Jail in the World<br>
  Where you Lost the passage of Time<br>
  Where Prisoner is Jailer ! ...
</div>  -->

script.js

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

 var Doc = document , 
    ox = oy = 0 , 
    mDis = 80 , 
    id=0 ;
Doc.addEventListener('mousemove',track);
Doc.addEventListener('touchmove',track);
function track(event){
  var e = event.pageX ? event : event.targetTouches[0];
  var dis = Math.round(Math.sqrt((ox-e.pageX)*(ox-e.pageX)+(oy-e.pageY)*(oy-e.pageY))),
  xdiff = e.pageX - ox , ydiff = e.pageY - oy , 
  ang = Math.atan2(ydiff,xdiff)*180/Math.PI;
  if (dis > mDis) {
    ox = e.pageX; oy = e.pageY;
    var ND =  Doc.createElement('div');
    TweenLite.set(ND,{
      className:'foot',rotation:ang,x:e.pageX,y:e.pageY,scaleY:id&1?-1:1,transformOrigin:"50% -70%"
    });
    Doc.body.appendChild(ND);
    id++;
    TweenLite.to(ND,5,{opacity:0,onComplete:function(){
    this.target.parentNode.removeChild(this.target);
    }})
  }
};
/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */

scripts

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

style.css

@import url(https://fonts.googleapis.com/css?family=Oswald);

body{ background-color: #151515; overflow:hidden;}

.foot{
  width:59px;  height:24px;
  position:absolute;
  opacity:0.7;
  background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/183204/foot.png");
  background-size:100% 100%;
  
}

 /* #desc{
  font-family:'Oswald', tahoma; 
  font-size:20px;
  white-space: nowrap;
  position:absolute;
  transform:translate(-50%,-50%);
  left:50%; top:50%;
  text-align:center;
  color:#ef9e17; 
  font-family:'Oswald', tahoma; 
  mix-blend-mode: color-dodge;  
  
}  
//#desc span{
  font-size:10vw;
}  */

 /* #winray{
  width:280px; height:400px;
  position:absolute;
  top:0px; left:50%;
  transform:translate(-50%,0%);
  background-size:100% 100%;
  opacity:0.4;
}  */
/* #winray img{
  width:100%; height:100%;
}  */


/*#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" />

the-mind-footsteps-effect-with-gsap.markdown

the Mind ( Footsteps effect with GSAP )

Simple js Footsteps effect with GSAP

A Pen by Steven Morasky on CodePen.

License.