4

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

DIM3NSION
  • 1,681
  • 5
  • 20
  • 38

1 Answers1

3

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/

Jan Paepke
  • 1,997
  • 15
  • 25
  • Briliant, thanks Jan. As a further question, how could I say scale that div to maybe half the size whilst moving down the page. So 2 animations at the same time. I'm struggling with the syntax after looking at the documentation – DIM3NSION Sep 11 '14 at 21:09
  • Hi Jan - Been trying to play around with this, is the syntax wrong as its not loading that final animation for .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 })); Also edited the question with proper formatting – DIM3NSION Sep 12 '14 at 11:42
  • 1
    Hi! This is really a GSAP question. Just supply a 0 as the second parameter with the last add call so it will be added to the beginning of the timeline. As previously stated, be sure to read the documentation and this may also be helpful: http://greensock.com/jump-start-js – Jan Paepke Sep 12 '14 at 21:39