Делаю современные сайтыдлябизнеса

// first screen reveal
var heroLines=gsap.utils.toArray('.hero .line-in'), heroRift=document.querySelector('.code-rift');
var heroRiftWell=document.querySelector('.code-rift-well'), heroRiftPlane=document.querySelector('.code-rift-plane');

gsap.set(heroLines,{yPercent:120});

function lockRiftPlane(){
  if(!heroRiftWell||!heroRiftPlane)return;
  var rect=heroRiftWell.getBoundingClientRect(), mobile=innerWidth<=760;
  var documentTop=rect.top+scrollY;
  heroRiftPlane.style.setProperty('--rift-plane-left',(rect.left-rect.width*.08)+'px');
  heroRiftPlane.style.setProperty('--rift-plane-top',(mobile ? -innerHeight*.46 : documentTop-rect.height*.58)+'px');
  heroRiftPlane.style.setProperty('--rift-plane-width',(mobile?Math.max(innerWidth*1.12,rect.width*1.18):rect.width*1.2)+'px');
  heroRiftPlane.style.setProperty('--rift-plane-height',(mobile?innerHeight*2.1:rect.height*3.25)+'px');
}

function heroIn(delay){
  var timeline=gsap.timeline({delay:delay||0});
  timeline.to(heroLines,{yPercent:0,duration:1.15,ease:'power4.out',stagger:.09})
    .to(heroRift,{opacity:1,duration:.88,ease:'power2.out'},'-=.94');
  return timeline;
}

lockRiftPlane();
var riftViewportWidth=innerWidth;
addEventListener('resize',function(){
  if(innerWidth<=760&&Math.abs(innerWidth-riftViewportWidth)<3)return;
  riftViewportWidth=innerWidth;
  lockRiftPlane();
},{passive:true});

var serviceRows=gsap.utils.toArray('.svc-row');
serviceRows.forEach(function(row,index){
  ScrollTrigger.create({trigger:row,start:'top 60%',end:'bottom 40%',
    onEnter:function(){activateServiceRow(index);},onEnterBack:function(){activateServiceRow(index);}
  });
});

function moveTape(time){
  x-=SPEED*Math.min(64,time-last)/1000;
  if(setWidth>0&&x<=-setWidth)x+=setWidth;
  track.style.transform='translate3d('+x+'px,0,0)';
  requestAnimationFrame(moveTape);
}

// isometric surface - 30 FPS on desktop, static on touch screens
var lastGridFrame=0, gridInterval=1000/30;
function point(i,j,time,mouseX,mouseY){
  var cell=clamp(canvasWidth/19,42,78), originX=canvasWidth*.49, originY=canvasHeight*.34;
  var x=originX+(i-j)*cell*.92, y=originY+(i+j)*cell*.43;
  var wave=Math.sin(i*.72+j*.54+time*.00105)*cell*.18+Math.sin((i-j)*.48+time*.00072)*cell*.1;
  var distance=Math.hypot(x-mouseX,y-mouseY)||1;
  var pull=mouse.active?Math.exp(-(distance*distance)/(cell*cell*18)):0;
  return {x:x+((x-mouseX)/distance)*pull*cell*.36,y:y+wave-pull*cell*.74,
    alpha:clamp(.08+(y/canvasHeight)*.18+pull*.38,0,.62)};
}

function draw(time){
  if(time-lastGridFrame<gridInterval){requestAnimationFrame(draw);return;}
  lastGridFrame=time;
  context.clearRect(0,0,canvasWidth,canvasHeight);context.lineWidth=.72;
  for(var row=-8;row<14;row++){
    context.beginPath();
    for(var column=-8;column<14;column++){
      var current=point(row,column,time,mouse.x,mouse.y), next=point(row+1,column,time,mouse.x,mouse.y);
      context.moveTo(current.x,current.y);context.lineTo(next.x,next.y);
    }
    context.stroke();
  }
  requestAnimationFrame(draw);
}

// case transition
function renderLeader(value){
  var progress=clamp01(value), toCatalog=smoothstep((progress-.18)/.20), toProjects=smoothstep((progress-.58)/.20);
  var reveals=[1,toCatalog,toProjects];
  shots.forEach(function(shot,index){
    var reveal=reveals[index], hidden=((1-reveal)*100).toFixed(3);
    shot.style.clipPath='inset(0 '+hidden+'% 0 0)';
    shot.style.transform='scale('+(1.035-reveal*.035).toFixed(4)+')';
    shot.style.opacity=reveal.toFixed(3);
  });
  progressLine.style.transform='scaleX('+progress.toFixed(4)+')';
  setStep(progress<.34?0:(progress<.70?1:2));
}

function activateServiceRow(index){
  serviceRows.forEach(function(row,rowIndex){row.classList.toggle('is-active',rowIndex===index);});
}