スライダーGSAPとトランジションや

Question

こんにちはスクロールは私がTweenMaxを使用して、このページのセクションhttp://cuberto.com 上の遷移を、複製しようとしています。 codepenで

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

完全なコードは、私は基本的に私は、各スライドに移行したい要素を交互にしている、スワイプアニメーションとスライダーの束との間で移行しようとしているhere

を見つけることができます黒やピンクのように私はアニメーションを見ることができます。

アニメーションを現在のスライドに隔離しているように見えることがあります。つまり、左手のdivを100％に伸ばして、ページを右にアニメーションしてから、次のスライダに切り替えて左手をアニメーションします最初の状態0から50％の幅まで飛びます。これは、Cubertoサイトがやっていることだと思います。

どのように私はスクロールイベントですべてのスライド上でアニメーションを発射するとひどい混乱になっている。

私はとか、jQueryのせずにこれを試みたいのjavascriptが、バニラと特に有能ではありませんよ。

私はpagepiling.jsとfullpage.jsを試してみましたが、これは私が探している効果を達成していません。

私は本当に私は私のクライアントに行くことができ、または少なくとも方向は私が行くことができるAA分解能で行うことができます。

おかげ

Answer 1

あなた

のためにそれが参考になります。このリンクを参照してください

this is example based on animation css

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

はあなたが使用することができ、好きなように多くのアニメーション利用可能があります。

animate.css