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

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.

Thanks Diaco, that will get me going!

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