ScrollMagic 触发的 GSAP 动画

准备工作

• gsap
• ScrollMagic
• animation
• addIndicators (调试)

<!--导入组件 ScrollMagic-->
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<!--TweenMax-->
<script src="https://cdn.bootcss.com/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdn.bootcss.com/gsap/latest/TimelineLite.min.js"></script>
<script src="https://cdn.bootcss.com/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdn.bootcss.com/gsap/latest/plugins/BezierPlugin.min.js"></script>

持续时间

将GSAP补间与ScrollMagic一起使用时，有两种选择。您可以使用实际的补间持续时间，然后在按下触发器时以正常速度播放动画，或者可以允许ScrollMagic劫持该持续时间，并且在滚动时将播放补间。

言外之意就是动画是什么一种状态来展示的，一是到达触发点自动执行完整动画。还有就是ScrollMagic劫持时间，比如以滚动滚轮的形式展示动画

// 1.创建一个控制器对象
var controller = new ScrollMagic.Controller(); 
// 2.创建gsap动画
var tl = new TimelineMax();
...
...
// 3.创建一个场景对象（一个控制器对象下可以创建多个场景）
var scene = new ScrollMagic.Scene({
  triggerElement: "#stage", // 从哪一个元素开始
  duration: "50%",  // !重点区别
  triggerHook: 0.25 // 什么时候触发 ==》 25% Top
})
    // 4. 调试配置
  .addIndicators({
    name: "Box Name",
    colorTrigger: "white",
    colorStart: "white",
    colorEnd: "white"
  })
  .setTween(tl)
  .addTo(controller);

这里以duration 来表示持续时间。它的单位并不是时间而是距离滚轮高度所运动距离的长度。

可以表示为数值类型或者百分比。比如设置duration:100% 就表示动画持续滚轮一周期。

triggerHook 来表示触发的位置。也可以表示为数值类型或者百分比类型。

固定元素来播放动画

另一个常见的动画是固定元素，播放补间或时间轴，然后取消固定。要记住的最大事情是为实际的固定部分创建一个父容器。固定后，动画将在该元素内播放。

点击查看【codepen】

new ScrollMagic.Scene({
  ...
})
  .setPin("#pinMaster") // ! 固定住它
  ...

水平滚动

持续时间为100％*（面板-1）的数量。此示例有五个幻灯片，因此持续时间设置为400％，每个面板移动为20％。此时间轴是手动创建的，但也可以循环创建。