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.
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 help5 Replies
Anyone here?
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.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
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
@MatiasWilly I tried using
opacity: 0%
, it's going down then left.
i didn't give any Y translate, why would that be happening?