Jump to content
Search Community

Flip Cards don't fully reverse

JasonD test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites



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!

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...