在前一个补间动画完成后启动下一个补间动画 - Greensock / ScrollMagic

Question

在前一个补间动画完成后启动下一个补间动画 - Greensock / ScrollMagic

4

尝试使用GreenSock / ScrollMagic JS在页面上对一个div进行动画处理。我想在第一个tween完成后，在我的动画框上触发第二个动画。所以先将框向下移动300px，然后向左移动300px。如何添加tween序列？我的codepen链接是 - 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>

简单来说，我想要动画显示slide-dos元素，并在它完成top:300px之后添加left:300px。

非常感谢您的帮助！ :)

DIM3NSION

- DIM3NSION

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jan Paepke · Accepted Answer

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

这是关于在it技术中使用的一些有用的信息。如果您需要了解更多，可以点击链接查看详细说明。