Question

尝试使用GreenSock / ScrollMagic JS为页面上的div设置动画。我想在第一个补间完成后在动画框上触发第二个动画。所以将盒子向下移动300px，然后向左移动300px。我将如何添加补间序列。我的代码是 -

我正在使用的JS是 -

// init the controller
var controller = new ScrollMagic({
    globalSceneOptions: {
        triggerHook: "onLeave"
    }
});


// pinani
var pinani = new TimelineMax()

    // panel slide translateX
    .add(TweenMax.to("#slide-dos", 1, {top: "150px"})) // panel slide top
    .add(TweenMax.to("#slide-dos", 1, {left: "500px"})) // panel slide left
    .add(TweenMax.from( $('#slide-dos'), 0.5, {css:{scale:0.05, opacity:0, top: "100px"}, ease:Quad.easeInOut }));



// panel section pin
new ScrollScene({
        triggerElement: "section#pin",
        duration: 1100
    })
    .setTween(pinani)
    .setPin("section#pin")
    .addTo(controller);

我的HTML结构 -

<div class="row">
  <div class="large-12 columns"></div>
</div>

<section id="pin" class="scroll-magic-section">
  <div id="spacer">

    <div class="row">
      <div class="large-12 columns">
        <div id="slide-banner">
          <div class="container">
            <h3>Banner</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div id="slide-pre">
          <div class="container">
            <h3>Pre-Animation</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div id="slide-dos">
          <div class="container">
            <h3>Animation Box</h3>
          </div>
        </div>
      </div>
    </div>
</section>

所以简而言之，我想为幻灯片添加动画，以便在完成其顶部：300px之后添加左侧：300px。

任何帮助非常感谢！：）

DIM3NSION

Answer 1

虽然@ reekogi的答案是正确的，但这是不必要的复杂如果您正在使用时间轴，只需创建如下序列：

var pinani = new TimelineMax()
    .add(TweenMax.to("#slide-dos", 1, {top: "300px"})) // panel slide top
    .add(TweenMax.to("#slide-dos", 1, {left: "300px"})); // panel slide left

有关详细信息，请参阅此处：http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

完成前一个补间后启动补间。 - Greensock / ScrollMagic

1 个答案: