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

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

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

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.

[Calendar with 12 different timelines/steps. Not sure which way is correct.]

Thanks Diaco, that will get me going!

[Calendar with 12 different timelines/steps. Not sure which way is correct.]

Hello, I've been trying to make this calendar pen that has a different timeline for each month, and the user can click through the months and see the different animations.

 

At first I tried creating a separate timeline for each month, and calling it from the master timeline, but then I was having problems with tweening between two timelines and being able to reverse.

 

So I found out that I should rather be using one timeline with 12 markers, and using tweenFromTo to switch between them.

 

As you can see from my demo I'm not there yet... but I might be pretty close. I know it has to do with me being terrible at "clever" JavaScript but I'm a designer-trying-to-code kinda guy, so be gentle!

 

Am I close with my code, or is there a much better way that I'm not figuring out?

 

Thanks,

David

See the Pen right by dbj (@dbj) on CodePen