Click through multiple cards

[demiava]

What I'm trying to do is to fade the card away and wrap it back behind another card. Cards should be triggered on click. Wrapping and fading works fine. The issue I can't solve is that once the animation is triggered for each card, clicks do not work the second time.

 

I even tried to set the card back to paused state onCompleted but it didn't help.

See the Pen ExdxqEz by demiavaliani (@demiavaliani) on CodePen

[mvaneijgen]

The problem with translating x is that t the browser the element is still in its original position, so with this you could be clicking on an element which doest appear to be not be there. 

 

What I would do is create a timeline of you animation and make it so it is repeatable, so that if the animation loops infinitely it is correct. 

 

See the Pen WNabNRv?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Then add a label to the end of each card animation, so that you can tween to that label. Then I would just add the click handler to the wrapper instead of the cards them selfs and check if there is a .nextLabel() and if not set the progress to 0. Hope it helps and happy tweening! 

 

See the Pen VwEYwmG?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[demiava]

Okay, now it's clear. Thanks for the help

[demiava]

@mvaneijgen one more question please. Is it possible to somehow control the next tween within the timeline while the current tween is still playing? To take the current example, imagine that while the first card is being faded out after clicking on it, the second one would scale up just a bit (but before clicking on it). This is the

See the Pen poxvJvG by demiavaliani (@demiavaliani) on CodePen

, but the one issue is that I can't set such effect to both cards and second issue is that notice how there is a small delay between the click and start of animation after the first loop.

[Rodrigo]

Hi,

 

In order to create that particular effect, maybe you'll have to create a single animation on each click event and add a boolean that indicates whether or not another animation is running, use an onComplete to toggle that boolean. With that you could create that hint scale animation you mention. With a single timeline I'm not sure is possible.

 

As for the second issue the problem is that weird first instance in the loop:

tl.from(cards[1], { scale: 0.8, duration: 1 }, ">-1");

That basically is adding this instance one second before the previous one is completed. The first time the loop runs the timeline is empty so you're telling GSAP put this one second before zero. Now while GSAP is capable of many things, creating negative time is not one of them, otherwise Jack would've won the Physics Nobel Price for that . GSAP does the next thing it can and moves it one second before the end of the timeline, that's why I believe you're seeing that pause. Removing that makes it work as expected I think:

See the Pen oNagzaX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[demiava]

Thanks @Rodrigo. Somehow, when fully into GSAP, I keep forgetting that I can mix CSS animations too. Anyways, here is the full solution in case someone wants to see in future: 

See the Pen bGmdWgv by demiavaliani (@demiavaliani) on CodePen