Use a generic function to fire off different onComplete's at the same time.

[dbj]

This title might not even make sense.

 

Here the code I'm trying to pull off:

document.addEventListener('DOMContentLoaded', function() {

  // Animate game cards into view
  function animateGameCards() {
    let elements = document.getElementsByClassName('game-card');
    console.log(elements);
    if (elements.length) {
      TweenMax.staggerFromTo(elements, 0.5, {
        autoAlpha: 0,
        y: 50
      }, {
        autoAlpha: 1,
        y: 0
      }, 0.025);
    }
  }

  // Animate tickets into view
  function animateTickets() {
    let elements = document.getElementsByClassName('ticket-wrapper');
    console.log(elements);
    if (elements.length) {
      TweenMax.staggerFromTo(elements, 0.5, {
        autoAlpha: 0,
        y: 50
      }, {
        autoAlpha: 1,
        y: 0
      }, 0.025);
    }
  }

  // Fake a quick loading state and call a tween on complete.
  function fakeLoading(fn) {
    let loading = document.getElementsByClassName('loading')[0];
    if (loading) {
      let rnd = Math.random() * (1 - 0.35) + 0.35;
      let tween = TweenMax.fromTo(loading, 0.5, {
        autoAlpha: 1
      }, {
        autoAlpha: 0,
        delay: rnd,
        onComplete: fn
      });
    } 
  }

  fakeLoading(animateGameCards);
  fakeLoading(animateTickets);

});

For this prototype I am working on I want to be able to pass a function into fakeLoading() to create a loading animation delay before the tween goes off. I want this loading tweens to happen simultaneously and have two (or more) spinners on different parts of the page spinner before the animation fires.

 

What happens when I call fakeLoading multiple times in succession is that only one of them triggers. What am I doing wrong and how can I do this right?

 

Thanks for your time.

[OSUblake]

A demo would help, but it looks like you're using the same element, overwriting the previous animation.

let loading = document.getElementsByClassName('loading')[0];

[dbj]

The single loading element was just to simplify things for me while trying to make this work. While making the pen for you I figured what was really going on and that I was overwriting the tween. Thanks for the help anyway