4

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

http://codepen.io/anon/pen/HfFwJ

我正在使用的 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>

所以简而言之，我想为幻灯片制作动画，以便它在完成 top:300px 后添加 left:300px。

非常感谢任何帮助！:)

尺寸

4

1 回答 1

3

虽然@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/

于 2014-09-11T17:44:53.023 回答