Flip only one card at a time GSAP

Question

I'm trying to flip cards on click of button. My issue is ALL cards are flipping and not just the card that is clicked. I asked this question earlier and it worked great when the click was on the whole card container but realized I need it on the button

HTML:

<div class="flip-card-column--test">
    <div class="flip-card-container">
        <div class="flip-card-front">
            <p class="flip-card__label">
               Front of Card Label
            </p>
            <div class="flip-card__toggle">
                <span class="flip-card__front">+</span>
            </div>
        </div>
        <div class="flip-card-back">
            <p class="flip-card__label">
                Back of Card Label
            </p>

            <p class="flip-card__text --narrow--mobile flip-card__back">
               Text
            </p>

            <div class="flip-card__toggle">
                <span class="flip-card__back toggle__minus">-</span>
            </div>
        </div>
    </div>
</div>


<div class="flip-card-column--test">
    <div class="flip-card-container">
        <div class="flip-card-front">
            <p class="flip-card__label">
               Front of Card Label
            </p>
            <div class="flip-card__toggle">
                <span class="flip-card__front">+</span>
            </div>
        </div>
        <div class="flip-card-back">
            <p class="flip-card__label">
                Back of Card Label
            </p>

            <p class="flip-card__text --narrow--mobile flip-card__back">
               Text
            </p>

            <div class="flip-card__toggle">
                <span class="flip-card__back toggle__minus">-</span>
            </div>
        </div>
    </div>
</div>

<div class="flip-card-column--test">
    <div class="flip-card-container">
        <div class="flip-card-front">
            <p class="flip-card__label">
               Front of Card Label
            </p>
            <div class="flip-card__toggle">
                <span class="flip-card__front">+</span>
            </div>
        </div>
        <div class="flip-card-back">
            <p class="flip-card__label">
                Back of Card Label
            </p>

            <p class="flip-card__text --narrow--mobile flip-card__back">
               Text
            </p>

            <div class="flip-card__toggle">
                <span class="flip-card__back toggle__minus">-</span>
            </div>
        </div>
    </div>
</div>

SCSS:

    .flip-card-column--test{
    .flip-card-container {
    width: 200px;
    height: 200px;
   }

  .flip-card-front, .flip-card-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 25px 5px 27px;
    background-color: red;
    backface-visibility: hidden;
  }

   .flip-card-back {
    background-color: blue;

    .flip-card__label{
     padding-top: 0;
     margin-bottom: 6px;
    }
   }
   .flip-card__text{
    margin: 0 auto;
    }
    .flip-card__label{
     padding-top: 15px;
   }
  }

JQUERY GSAP:

 //Card flip animations
    TweenMax.set($($flipCardBack), {rotationY: -180});

    $.each($flipCardContainer, function (i, element) {
        var frontCard = $(this).find('.flip-card-front'),
            backCard = $(this).find('.flip-card-back'),
            tl = new TimelineMax({paused: true, reversed: true});
        tl
            .to(frontCard, 1, {rotationY: 180})
            .to(backCard, 1, {rotationY: 0}, 0)
            .to(element, .5, {z: 50}, 0)
            .to(element, .5, {z: 0}, .5);

        element.animation = tl;

        $('.flip-card__toggle').on('click', function () {
            if (tl.progress() === 0
                || tl.reversed()) {
                tl.play();
            } else {
                tl.reverse();
            }
        });
    });

This worked on card container click event:

$('.flip-card-container').on('click', function elOver() {
if(this.animation.progress() === 0
|| this.animation.reversed()) {
    this.animation.play();
} else { 
    this.animation.reverse();
}
});

Answer 1

This error is because you have included a general click listener inside of your click function. $('.flip-card__toggle').on('click' applies to all of your card toggle buttons.

In other words, each time that any card toggle is clicked, you're telling it to animate each timeline.

To fix this, either move the click event listener outside of the click event, like below:

var $flipCardBack = $(".flip-card-back"),
    $flipCardContainer = $(".flip-card-container");

//Card flip animations
TweenMax.set($flipCardBack, { rotationY: -180 });

$.each($flipCardContainer, function(i, element) {
  var frontCard = $(this).find(".flip-card-front"),
      backCard = $(this).find(".flip-card-back"),
      tl = new TimelineMax({ paused: true, reversed: true });
  tl
    .to(frontCard, 1, { rotationY: 180 })
    .to(backCard, 1, { rotationY: 0 }, 0)
    .to(element, 0.5, { z: 50 }, 0)
    .to(element, 0.5, { z: 0 }, 0.5);

  $(this)[0].animation = tl;
});

$(".flip-card__toggle").on("click", function() {
  var tl = $(this).closest(".flip-card-container")[0].animation;
  if (tl.progress() === 0 || tl.reversed()) {
    tl.play();
  } else {
    tl.reverse();
  }
});

Or change the selector of the click event listener to something specific to that container:

$.each($flipCardContainer, function(i, element) {
  var frontCard = $(this).find(".flip-card-front"),
      backCard = $(this).find(".flip-card-back"),
      toggle = $(this).find(".flip-card__toggle"),
      tl = new TimelineMax({ paused: true, reversed: true });
  tl
    .to(frontCard, 1, { rotationY: 180 })
    .to(backCard, 1, { rotationY: 0 }, 0)
    .to(element, 0.5, { z: 50 }, 0)
    .to(element, 0.5, { z: 0 }, 0.5);

  toggle.on("click", function() {
    if (tl.progress() === 0 || tl.reversed()) {
      tl.play();
    } else {
      tl.reverse();
    }
  });

  $(this)[0].animation = tl;
});

Demo