A few months back, I decided to go from tech summarise only to do something with the fantastic plugins I’ve for WordPress, like Greenshift. When someone on Facebook asked if a stacking card animation could be recreated, as seen in the GIF animation from CodyHouse or on Swagapp, I rose for the challenge. With just shy of 3 hours of experimentation, I’ve got the results below.
I must say, I am impressed by the results, though the GreenShift GSAP integration doesn’t allow for stacked animation, as far as I know. So I don’t know how to get this perfectly right. If you’re considering using GreenShift, please use my link. 😁
Just recorded a youtube video about How I created the stacking card Animation. You can also buy the code if you are feeling lazy 😉.
Tutorial
Download the code below if you don’t want to follow this tutorial.
The timeline container is the container that will house all your containers, images, or texts you’d like to animate. I like my animated sections to eventually stop so you can see the rest of the page.
This is a huge card, and I set it to something like 4000px height.
Next is adding the cards you want to show in your stacking animation. I suggest that while you’re designing them, you also check on mobile if the cards are looking okay-ish because after animating, it can be a hassle to change some of the designs, in my experience.
To set some spacing, I’d like my cards to animate at least half their height before cowering behind the next card. I had set my cards to have a height of 600px, so the margin-top on the next card would be 300px
Count the number of cards you have. I’ll explain why soon. I have 4, so I would like 3 cards to be animated. So I know the first card always needs to be smaller than the next.
Scaling the card
To do this, I set the scale of the first card to 0.7 so it would start to be 0.7 times its size. The next card gets a scale of 0.8, and the card after that is 0.9. Until you reach 1 because a scale of 1 doesn’t change the size.
Moving it to the top ever so slightly
Next is to set the translate Y to the number of animated cards times 2 (so 6 in my case). Then put a minus sign in front of it so -6 in my case, to offset the cards too -6% to the top.
Triggers
I don’t understand triggers quite well yet, but set the trigger start to the top -300px, to start the animation from the top, 300 px down. That would be halfway the next card (see why you need the spacing ;))
The trigger end is set to +=1800, to end the animation at 1800px. Then set interpolate by scroll to 1 and the trigger Anchor and Transform Origin to the center top. The last is to make sure the containers will animate from the top center of the container.
Set the position to sticky and add the top 20px.