Snap ScrollMagi c секционные салфетки

Question

Я использую разделы ScrollMagi c, чтобы перетаскивать одну панель на другую при прокрутке, это прекрасно работает, но мне было интересно, можно ли привязаться к следующей панели при прокрутке (теперь, если вы перестанете прокручивать наполовину выцветают между двумя панелями).

Я знаю, что могу использовать fullpage. js, поскольку они предлагают именно такой эффект, но я не добавляю другую библиотеку на свой уже загруженный javascript загруженный веб-сайт и мне интересно, если бы я не мог получить тот же эффект с ScrollMagi c.

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

Итак, Ян Паепке из ScrollMagi c помог найти решение. Это в основном сводится к тому, чтобы отсоединить анимацию от прокрутки и инициировать / анимировать каждую панель отдельно, работая с триггерами.

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>