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⚡
Abdul Ahad⚡16mo ago
Anyone here?
MatiasWilly
MatiasWilly16mo 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⚡
Abdul Ahad⚡16mo 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
MatiasWilly16mo 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⚡
Abdul Ahad⚡16mo 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?
Want results from more Discord servers?
Add your server