使用ScrollMagic反转动画

Question

我想有一个由ScrollMagic控制的网页的一部分。将是一组幻灯片，固定并具有淡入淡出效果，可在您滚动页面时更改它们。

当我从上到下滚动时，它可以工作，但当我到达页面末尾并向上滚动时，没有动画。

如何在反向上实现相同的行为？

​

	$(function () { 
		var controller = new ScrollMagic.Controller({
			globalSceneOptions: {
				triggerHook: 'onLeave'
			}
		});

		var slides = document.querySelectorAll("section.panel");

		for (var i=0; i<slides.length; i++) {
            var animation = TweenMax.to(slides[i], 1, { autoAlpha: 1, ease: Quad.easeInOut});
            var options = { triggerElement: slides[i] };
            if(i === slides.length-1){
                options['duration'] = 0;
            }
			var scene = new ScrollMagic.Scene(options)
				.setPin(slides[i])
                .setTween(animation)
                .addIndicators();
            scene.addTo(controller);
		}
	});

.panel {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: white;
  opacity: 0;
}
.panel.first {
  opacity: 1;
}
.panel.last{
margin-bottom: 400px;
}
.panel .column {
  width: 50%;
}
.panel .column.vertical-center {
  margin: auto 0;
  padding: 0 5em;
}
.panel .column .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: black;
  line-height: 1.1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="slide1" class="panel first">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 1
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 2
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 3
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 4
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 5
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide6" class="panel last">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 6
    </div>
    <p>Description</p>
  </div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

​

Answer 1

场景参数reverse应处理此问题。默认情况下，它被设置为true，当向上滚动时，它应该反向播放动画。下面是您设置参数的位置：

var scene = new ScrollMagic.Scene({
    duration: 100,
    triggerHook: 1,
    reverse: true
    });

或者在这里添加：

var scene = new ScrollMagic.Scene({
    duration: 100,
    triggerHook: 1
    }).reverse(true)

Answer 2

您可以使用下面的代码来反转滚动动画：

var scene = new ScrollMagic.Scene(options)
            .setPin(slides[i])
            .setTween(animation)
            .addIndicators();
            .reverse(true); // this will reverse your animation in scrollmagic
        scene.addTo(controller);