帶GSAP和滾動的滑塊轉換

Question

嗨我試圖使用TweenMax複製此頁上的轉換部分http://cuberto.com 。

var slides=document.querySelectorAll('.slide'); 
var tl=new TimelineLite({paused:true}); 

for(var i=slides.length;i--;){ 

    var D=document.createElement('div'); 

     D.className='Dot'; 

     D.id='Dot'+i; 

    D.addEventListener('click',function(){ tl.seek(this.id).pause() }); 

    document.getElementById('Dots').appendChild(D); 

    tl.add('Dot'+i) 





    if(i>0){ 
     if(i!=slides.length-1) 
     { 
      tl.addPause() 
     } 

     tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) 
      .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) 
      .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) 
      .set(slides[i],{ background: "none"}) 
      .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) 
      .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) 
     .set(slides[i],{zIndex:1-i}) 
      .set(slides[i-1],{zIndex:slides.length}) 
      .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) 
      .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) 
    }; 
}; 

在codepen完整的代碼，可以發現here

我基本上是試圖與刷卡動畫一堆滑塊之間的轉換，我已經輪流我想在每個幻燈片過渡元素黑色或粉紅色，所以我可以看到動畫。

我似乎將動畫隔離到當前幻燈片 - 本質上我希望左手div增長到100％，然後將頁面動畫化到右側，然後切換到下一個滑塊並左手動畫從初始狀態0跳到50％的寬度。我相信這是Cuberto網站正在做的事情。

我怎麼會在所有幻燈片上發出動畫的滾動事件中陷入糟糕的混亂。

我不是特別擅長香草javascript，但想試試這個有或沒有jQuery。

我已經嘗試過pagepiling.js和fullpage.js，但是這並沒有達到我期待的效果。

我真的可以做AA分辨率我可以去我的客戶端，或至少一個方向，我可以進去。

感謝

Answer 1

請參考以下鏈接它會有助於您

this is example based on animation css

document.getElementById('yourElement').classList.add('animated bounceInRight'); 

有這麼多的動畫可用任何你想要的，你可以使用。

animate.css