使用 Scroll Magic 的补间动画

Question

我对滚动魔法还很陌生，所以只是习惯了场景和补间。所以我有一个非常基本的设置

<section id="sectionPlaceholder" class="section">
</section>
<section id="sectionOne" class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageOne">
      </div>
      <div class="col-md-6">
        <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageTwo">
      </div>
    </div>
  </div>
</section>

它本质上是两个部分。第一个只是一个占位符部分，因此您可以看到动画触发器。第二部分并排包含两个图像。每个部分都有一个 min-height:100vh;

我在 Codepen

上创建了一个副本

正如你所看到的，当你向下滚动时，一旦你点击 sectionOne 就会触发动画。动画是正确的，我基本上希望图像以相同的速率缩放大小。不正确的是，当您点击该部分时，动画会立即运行一直播放。

我追求的是这个。点击该部分后，将触发动画。当您向下滚动该部分时，图像会放大。一旦到达该部分的底部，比例就会达到 1.2。所以换句话说，动画应该在您到达该部分底部时立即完成，而不是运行立即完成。

如果您随后向上滚动，则会发生相反的情况。

希望以上内容有意义。我本质上是在寻找由滚动控制的图像缩放，向下滚动越多，图像越大。

我怎样才能实现这样的目标？

谢谢

Answer 1

您可以在 triggerElement 之后添加一个 duration 设置，例如您可以使用 window 高度作为持续时间，就像我在这个例子中所做的那样。在你的情况下是

$(function() {
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
    triggerElement: "#sectionOne",
    duration: jQuery(window).height()
  })
  .setTween("#imageOne", 0.5, {scale: 1.2})
  .addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: "#sectionOne",
    duration: jQuery(window).height()
  })
  .setTween("#imageTwo", 0.5, {scale: 1.2})
  .addTo(controller);
});

在此处查看实际效果：

https://codepen.io/anon/pen/WZZWJX

使用 Scroll Magic 的补间动画

Tween animation with Scroll Magic

jquery

animation

scrollmagic

gsap