Сенсорная поддержка прокрутки анимации - PullRequest
Новая
       58

Сенсорная поддержка прокрутки анимации

0 голосов
/ 08 октября 2019

У меня есть проблемы с моим кодом. Я использую GSAP для прокрутки полной высоты моей страницы. Все хорошо работает на рабочем столе, используя прокрутку, но на мобильном я не могу провести. Потому что для прокрутки я использовал этот код: 

if ( direction == 'down' ) {

if(caseIndex < numOfSections) {
    caseIndex++;    

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

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

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

Моя функция для ScrollBottom1; 

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

My TimeLineMaxанимация: 

  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);

Я не могу использовать прослушиватель событий, например: 

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

, потому что он работает только для первого слайда ...

У меня есть вдохновение длярешить мою проблему: 

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;

});

Но я понятия не имею, хорошо это или нет .. Кто-нибудь может мне помочь с этим? Спасибо!

1 Ответ

0 голосов
/ 08 октября 2019

Я нашел решение для этого. 

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();
   }
});
...