多效果参考：

$(function() {
  
  var scrollMagicController = new ScrollMagic();
  
  var tween1 = TweenMax.to('#animation-1', 0.3, {
    backgroundColor: 'rgb(255, 39, 46)',
    scale: 10,
    rotation: 360
  });
  var scene1 = new ScrollScene({
    triggerElement: '#scene-1',
    offset: 50
  })
  .setClassToggle('body', 'scene-1-active')
  .setTween(tween1)
  .addTo(scrollMagicController);
  
    // Create Animation for 0.5s
  var tween2 = TweenMax.to('#animation-2', 0.3, {
    backgroundColor: 'rgb(0, 255, 187)',
    scale: 10,
    rotation: 360
  });
  
  var scene2 = new ScrollScene({
    triggerElement: '#scene-2',
		offset: 50,
    duration: 300
  })
  .setClassToggle('body', 'scene-2-active')
  .setTween(tween2)
  .addTo(scrollMagicController);
  
  
  
      // Create Animation for 0.5s
  var tween3 = TweenMax.to('#animation-3', 0.3, {
    backgroundColor: 'rgb(17, 0, 98)',
    scale: 10,
    rotation: 360
  });
  
  var scene3 = new ScrollScene({
    triggerElement: '#scene-3',
		offset: 50
  })
  .setClassToggle('body', 'scene-3-active')
  .setTween(tween3)
  .addTo(scrollMagicController);
  
  
  
  
  
  // Add debug indicators fixed on right side
   scene1.addIndicators();
     scene2.addIndicators();
  scene3.addIndicators();
  
});

如果通过 setPin 方法固定某个元素，默认情况下，场景元素下方将出现空白，且随着网页的滚动而被向下推压的场景元素覆盖，在添加场景元素时可以关闭此功能，此时场景元素下方不存在空白，示例如下：

<style>
* {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 100px;
    background-color: black;
}

.section {
    width: 100%;
    height: 200px;
    background-color: red;
}

.section:nth-of-type(2) {
    background-color: orange;
}

.section:nth-of-type(3) {
    background-color: green;
}

.section:nth-of-type(4) {
    background-color: blue;
}

footer {
    width: 100%;
    height: 500px;
    background-color: black;
}
</style>
<header></header>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<footer></footer>

<script src='TweenMax.min.js'></script>
<script src='ScrollMagic.min.js'></script>
<script src='animation.gsap.js'></script>
<script src='debug.addIndicators.js'></script>

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    offset: 100,
    duration: 200
});
scene.setPin(".section:nth-of-type(1)", {
    pushFollowers: false
});
controller.addScene(scene);

ScrollMagic 中创建 Scene 实例时的选项内容如下：

示例如下：

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    duration: 200,
    triggerElement: "footer",
    triggerHook: "onEnter",
    reverse: false
});
scene.setPin(".section:nth-of-type(1)");
controller.addScene(scene);

上述示例中的含义是当 footer 元素在视口中显示时开始场景