title: Slider transitions with GSAP and Scrolling
body: <p>Hi I'm trying to replicated the transitions on this pages sections <a href="http://cuberto.com" rel="nofollow noreferrer">http://cuberto.com</a>
  using TweenMax.</p>
  
  <pre><code>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&gt;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)
      };
  };
  </code></pre>
  
  <p>full code at codepen can be found <a href="https://codepen.io/dansbananaloafcake/pen/jLbOEg" rel="nofollow noreferrer">here</a></p>
  
  <p>I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation.</p>
  
  <p>I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing.</p>
  
  <p>How ever I am getting in an awful mess with the scroll event firing an animation on all the slides.</p>
  
  <p>I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery.</p>
  
  <p>I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for.</p>
  
  <p>I could really do with a a resolution I can go to my client with, or at least a direction I could go in.</p>
  
  <p>Thanks</p>