CODEWITHSUNDEEP
javascriptgsap
rnrh
rnrh

Reputation: 295

TweenMax staggerFromTo() onCompleteAll not waiting for Tweens to complete

I'm using a static staggerFromTo() to animate children out on button click. Looking at the documentation, the 6th parameter is onCompleteAll, which is supposed to call after the entire sequence of tweens has completed.

When I use this, the function in the onCompleteAll parameter is called when the Tween starts, not when it's completed. If you look at the fiddle below, and open the console, you can see it log "done" as soon as you click the button.

Am I doing something wrong? Do I not understand how the parameter works?

$('button').on('click', function() {
  TweenMax.staggerFromTo($('.wrapper').children(), 1, {
    x: 0,
    opacity: 1,
  }, {
    x: 50,
    opacity: 0,
  }, .2, logDone())
})

function logDone() {
  console.log('done');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>animate</button>
<div class="wrapper">
  <div>
    one
  </div>
  <div>
    two
  </div>
  <div>
    three
  </div>
</div>

Upvotes: 0

Views: 630

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

The main issue is that you're immediately invoking the function by adding the () after the function name. You should just pass in logDone.

But since you're already loading GSAP 3, why not use the GSAP 3 syntax??

Here's how I'd write your JS:

$('button').on('click', function() {
  gsap.fromTo('.wrapper > *', {
    x: 0,
    opacity: 1,
  }, {
    duration: 1,
    stagger: 0.2,
    x: 50,
    opacity: 0,
    onComplete: logDone
  })
})

function logDone() {
  console.log('done');
}

Upvotes: 1

Related Questions