CODEWITHSUNDEEP
javascriptjquerycssgsapscrollmagic
DIM3NSION
DIM3NSION

Reputation: 1761

Initiating tween after completion of previous tween. - Greensock / ScrollMagic

Trying to use GreenSock / ScrollMagic JS to animate a div on a page. I want to fire a second animation on my animation box after the first tween has completed. So move the box down 300px, then move it left 300px. How would I go about adding a tween sequence. My codepen for this is -

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

The JS I'm using is - 

// 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);

The structure for my 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>

So in brief I want to animate slide-dos so that it adds left:300px after its completed its top:300px.

Any help greatly appreciated! :)

DIM3NSION

Upvotes: 4

Views: 1969

Answers (1)

Jan Paepke
Jan Paepke

Reputation: 2027

While @reekogi's answer is correct, it is unnecessarily complicated.
If you are using a Timeline anyway, just create sequences like this:

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

For more information see here: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

Upvotes: 3

Related Questions