Slider transitions with GSAP and Scrolling

Question

Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax.

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

full code at codepen can be found here

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.

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.

How ever I am getting in an awful mess with the scroll event firing an animation on all the slides.

I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery.

I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for.

I could really do with a a resolution I can go to my client with, or at least a direction I could go in.

Thanks

Answer 1

You could use animate.css.There are so many animation available whatever you want you can use.

Demo

function onNextClick() {
  var button = document.getElementById('next'),
    index = button.getAttribute('index'),
    divs = document.getElementsByClassName('main-div')[0].getElementsByTagName('div');
  index++;
  if (index == 3) {
    index = 0;
  }
  for (var i = 0; i < divs.length; i++) {
    divs[i].classList.remove('show');
    divs[i].classList.add('hide');
  }
  divs[index].classList.remove('hide');
  divs[index].classList.add('show');
  button.setAttribute('index', index);

}

.main-div {
  width: 100%;
  display: inline-block;
}

.next {
  background: transparent;
  border: 0px;
  color: blue;
  font-size: 28px;
  text-transform: capitalize;
  text-decoration: underline;
  margin: 15px;
}

.main-div div {
  width: 100%;
  height: 250px;
  color: #3c3c3c;
  font-size: 56px;
  text-align: center;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.div-one {
  background: pink;
}

.div-two {
  background: green;
}

.div-three {
  background: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div class="main-div">
  <div class="div-one show animated bounceInRight">
    1
  </div>
  <div class="div-two hide animated bounceInRight">
    2
  </div>
  <div class="div-three hide animated bounceInRight">
    3
  </div>
  <button id="next" onclick="onNextClick()" index="0" class="next">next</button>
</div>