Snap ScrollMagic 部分擦除

Question

我正在使用 ScrollMagic 的部分擦除在滚动时将一个面板淡入下一个面板，这非常有效，但我想知道是否可以在滚动时捕捉到下一个面板（现在，如果您停止滚动，您会在两个面板）。

我知道我可以使用 fullpage.js，因为它们提供了完全一样的效果，但我宁愿不向我已经很重的 javascript 加载网站添加另一个库，我想知道我是否无法使用 ScrollMagic 获得相同的效果。

var controller = new ScrollMagic.Controller();

var wipeAnimation1 = new TimelineMax()
.fromTo(".panel2", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel3", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel4", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone});

new ScrollMagic.Scene({
	triggerElement: "#slider",
	triggerHook: 0,
	duration: "100%"
})

.setPin("#slider")
.setTween(wipeAnimation1)
.addTo(controller);

* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}

#spacer {
width:100%;
height:100%;
text-align:center; 
}

#slider {
width: 100%;
height: 100%;
color:#ffffff;
text-align:center;
}

.panel {
height: 100%;
width: 100%;
position: absolute;
}

.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>

<div id="spacer">spacer</div>

<div id="slider">
	<section class="panel panel1">
		<b>ONE</b>
	</section>
	<section class="panel panel2">
		<b>TWO</b>
	</section>
	<section class="panel panel3">
		<b>THREE</b>
	</section>
	<section class="panel panel4">
		<b>FOUR</b>
	</section>
</div>

<div id="spacer">spacer</div>

Answer 1

因此，来自 ScrollMagic 的 Jan Paepke 帮助提出了解决方案。它基本上归结为取消滚动与动画的链接，并通过其自身使用触发器来启动/动画每个面板。

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
		triggerElement: "#slider",
		triggerHook: 0,
    duration: "700%"
})
.setPin("#slider")
.addTo(controller);

var panels = [
  {
    trigger: '#trigger2',
    name: '.panel2'
  },
  {
    trigger: '#trigger3',
    name: '.panel3'
  },
  {
    trigger: '#trigger4',
    name: '.panel4'
  }
]

for (var i=0; i<panels.length; i++) {
  var panel = panels[i];
  new ScrollMagic.Scene({
      triggerElement: panel.trigger,
      triggerHook: 0
  })
  .setTween(new TimelineMax()
  .fromTo(panel.name, 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone}))
  .addTo(controller);
}

* {
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
}

#spacer {
  width:100%;
  height:100%;
}
#trigger2 {
  position: absolute;
  top: 100vh;
}

#trigger3 {
  position: absolute;
  top: 300vh;
}
#trigger4 {
  position: absolute;
  top: 500vh;
}
#sliderwrapper {
  position: relative;
  height: auto;
}

#slider {
		width: 100%;
		height: 100%;
    color:#ffffff;
	}

.panel {
		height: 100vh;
		width: 100%;
  position:absolute;
}

.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>

<div id="spacer"></div>

<div id="sliderwrapper">
<div id="slider">
	<section class="panel panel1">
		<b>ONE</b>
	</section>
	<section class="panel panel2">
		<b>TWO</b>
	</section>
 	<section class="panel panel3">
		<b>THREE</b>
	</section>
	<section class="panel panel4">
		<b>FOUR</b>
	</section>
  </div>
  
<div id="trigger2"></div>
<div id="trigger3"></div>
<div id="trigger4"></div>
</div>

<div id="spacer"></div>