Flip Cards don't fully reverse

[JasonD]

Hi everyone, 

I've lifted the flip card animations from this forum, and when I click on the cards individually, I get the response I'm looking for.  When I hit the "flip all button" the cards don't return to their original positions.  There's redundant code in here, so go easy on me, but I've been staring at this too long, and need a second set of eyes, if you please!  Thank you so much in advance, I'm sure it's small.

See the Pen 26cc7dc6184081cadc9dd336dfe2ab34 by zenogy (@zenogy) on CodePen

[mvaneijgen]

You've blocked the forking of pens... Give me a minute to copy everything over.

 

I don't know if I've taken some creative liberties, but I wouldn't create multiple timelines that are animating the same element. You where also creating a eventListener on the flipAll button for each element on the page so on each click the logic would play 6 times (once for each card), but you want just one that animates the timeline of each card, at least that is how I would do it. 

 

I've added all your timelines to an array of timelines which I all play and reverse on the click of the flipAll button

 

See the Pen KKeMBoQ by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

Well I forgot to inform that I'll answer that, so it seems that @mvaneijgen will be working his GSAP magic in this thread 🪄

 

There are a couple of issues in your code, the biggest is the fact that you are creating two loops that create similar GSAP instances on the same items, which inevitable will cause some problems, as you are experiencing.

 

It's easier to just create a single loop and add everything there, attach the flip animation to each card and in the Flip All button, just loop through the collection and toggle the direction of each tween. Here is a live example:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[JasonD]

These are great! Thank you so much. Yeah, I knew I had redundancy and needed to clean things up, but couldn't see it anymore.   I really appreciate it. This forum is so fantastic.  I can't thank this community enough.

 

I had no idea I could control the timelines like that.