使用 GSAP 和滚动的滑块过渡

Question

您好，我正在尝试复制此页面上的转换部分 http://cuberto.com 使用 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)
    };
};

codepen 的完整代码可以在here找到

我基本上是在尝试在一组带有滑动动画的滑块之间进行转换，我已经在每张幻灯片上用黑色或粉红色交替了我想要转换的元素，以便我可以看到动画。

我似乎可以将动画与当前幻灯片隔离 - 本质上我希望左侧 div 增长到 100%，然后在页面右侧设置动画，然后切换到下一个滑块并为左侧潜水设置动画从初始状态 0 到 50% 的宽度。我相信这就是 Cuberto 网站正在做的事情。

我怎么会因为滚动事件在所有幻灯片上触发动画而陷入混乱。

我对 vanilla javascript 不是特别精通，但我想尝试使用或不使用 jQuery。

我尝试过pagepiling.js和fullpage.js，但这并没有达到我想要的效果。

我真的可以做一个我可以去我的客户那里的解决方案，或者至少一个我可以去的方向。

谢谢

Answer 1

你可以使用animate.css。有很多动画可供你使用。

演示

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>