Kevin Powell - Community•17mo ago

Help with stacked tesimonial cards

https://codepen.io/ahad4387/pen/qBQxewK I'm trying to modify this stacked testimonial card animation. I trying get the front card to translate to left then fade away and then the below card should scale to 1.

@keyframes scaleUp {
  0% {
    transform: scale(1.2) translateY(-5000px);
    opacity: 0;
  }
  20% {
    transform: scale(1.15) translateY(-4000px);
    opacity: 0.1;
  }
  40% {
    transform: scale(1.1) translateY(-3000px);
    opacity: 0.2;
  }
  60% {
    transform: scale(1.05) translateY(-2000px);
    opacity: 0.4;
  }
  80% {
    transform: scale(1.01) translateY(-1000px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1.2) translateY(-5000px);
    opacity: 0;
  }
  20% {
    transform: scale(1.15) translateY(-4000px);
    opacity: 0.1;
  }
  40% {
    transform: scale(1.1) translateY(-3000px);
    opacity: 0.2;
  }
  60% {
    transform: scale(1.05) translateY(-2000px);
    opacity: 0.4;
  }
  80% {
    transform: scale(1.01) translateY(-1000px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

tried changing the translateY to translateX, it isn't really changing anything. Even if i change the distance, it's not affecting the animation. Please help

ahad4387

CodePen

working

...

5 Replies

Abdul Ahad⚡OP•17mo ago

Anyone here?

MatiasWilly•17mo ago

Hello @abdulahad, just checked your issue and I found out what the problem is. You have a display:none in line 105 and 125 of your styles.css that prevent your animation from showing. @abdulahad When you click on the button, at some point the card is displayed none to show the card that is below it, that why you were not seeing your animation.

.container .card-stack .card-list li:nth-child(4),
.container .card-stack .card-list li:nth-child(5) {
  **display: none;**
}

.transformPrev {
  animation: scaleUp 4000ms;
 ** display: none;**
}

Check if both causes the issue, but there is the problem.

Abdul Ahad⚡OP•17mo ago

thanks for the reply, yes it was the display problem only. I have updated the code. animation is working as expected but the styles got messed up. can you have a look please

MatiasWilly•17mo ago

The issue is that now with the comented "display:none" The card is displayed on top after animation, you need to change the behavior to be hidden after the animation ends. You can apply a display:none class after the animation time ends with a timeout problably

Abdul Ahad⚡OP•17mo ago

@MatiasWilly I tried using opacity: 0% , it's going down then left. i didn't give any Y translate, why would that be happening?

Gaming

Programming

Help with stacked tesimonial cards