滚动触摸支持 animation

Question

I have some problem with my code. I'm using GSAP for scrolling full height of my page. Everything working nice on desktop using scroll but on mobile I cant swiping.. Because to scroll I used that code:

if ( direction == 'down' ) {

if(caseIndex < numOfSections) {
    caseIndex++;    

if(caseIndex == 1){
    scrollBottom1(caseIndex);       
}

if(caseIndex == 2){ 
    scrollBottom2(caseIndex);
}

if(caseIndex == 3){
    scrollBottom3(caseIndex);
}
  }   
}

My function for ScrollBottom1 ;

   const scrollBottom1 = (caseIndex) =>{
        tl1.play();
    }

My TimeLineMax animation:

  var tl1 = new TimelineMax({pasused: true});
      tl1.to(slide1,0,{display:"block"})
      .to(".hide-text", 1, {y:"100%",ease:Power3.easeIn},"slide1" )
      .to(".slogan", 0.5, {delay:"0.5",y:"-100%"},0 )
      .to(slide0,1.5,{delay:"0.3",y:"-100vh",ease:Power3.easeInOut}, 0)
      .to(slide1,1.5,{delay:"0.3",y:"0vh", ease:Power3.easeInOut }, 0)
      .to(toggleNavi,0,{backgroundColor:"#fff"})
      .to(slide0,0,{display:"none", y:"0"})
      .to(slide1,0,{y:"0",})      
       tl1.paused(true);

I can't use Event listener like:

window.addEventListener("mousemove", scrollBottom1);
window.addEventListener("touchstart", scrollBottom1);
window.addEventListener("touchmove", scrollBottom1);

cause it's working just for first slide...

I have some inspiration for resolve my problem:

var lastY;

$(document).bind('touchmove', function(e) {

    var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;

    if (Math.abs(currentY-lastY) < 10) { return; }

    if (currentY > lastY) {

        alert('down');

    } else {

        alert('up');
    }

    lastY = currentY;

});

But I have no idea it's good or not.. Can anyone help me with this? Thanks!

Answer 1

I found solution for this.

var ts;
$('.case_0').bind('touchstart', function (e){
   ts = e.originalEvent.touches[0].clientY;
});

$('.case_0').bind('touchend', function (e){


    if (tl1 && tl1.isActive()) {
        return;
    }

    if (tl2 && tl2.isActive()) {
        return;
    }

    if (tl3 && tl3.isActive()) {
        return;
    }


   var te = e.originalEvent.changedTouches[0].clientY;
   if(ts > te+5){
    tl1.play();
   }else if(ts < te-5){
    tl1.reverse();
   }
});