Slider Übergänge mit GSAP und Scrolling

Question

Hallo Ich versuche, die Übergänge auf diesen Seiten Abschnitte http://cuberto.com mit TweenMax zu replizieren.

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

vollständiger Code bei codepen here

gefunden werden kann ich im Grunde bin versucht, mit einer Swipe-Animation zwischen einem Bündel von Schiebern für den Übergang, habe ich das Element abgewechselt i auf jeder Folie übergehen möchte in schwarz oder pink, damit ich die Animation sehen kann.

Ich kann scheinen, die Animation auf die aktuelle Folie zu isolieren - im Wesentlichen möchte ich die linke Hand div auf 100% wachsen, dann animieren Sie die Seite nach rechts, wechseln Sie dann zum nächsten Schieberegler und animieren Sie die linke Hand tauchen von einem Ausgangszustand von 0 auf eine Breite von 50%. Ich glaube, das ist es, was die Cuberto-Site tut.

Wie auch immer ich in einem schrecklichen Durcheinander mit dem Scroll-Ereignis feuere eine Animation auf allen Dias.

Ich bin nicht besonders kompetent mit Vanille Javascript, aber möchte dies mit oder ohne jQuery versuchen.

Ich habe pagepiling.js und fullpage.js versucht, aber das erreicht nicht den Effekt, den ich suche.

ich wirklich mit aa Auflösung tun konnte ich meinen Kunden gehen kann, oder zumindest eine Richtung konnte ich in.

Dank

Answer 1

Bitte lesen Sie diesen Link und sie nützlich sein wird für Dich

this is example based on animation css

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

Es gibt so viele Animation zur Verfügung, was Sie wollen Sie verwenden können.

animate.css