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. 😁
Greenshift Shop – Extend your site with premium Gutenberg WordPress addons
Download the code below if you don’t want to follow this tutorial.
Greenshift Stacking Cards Animation V0.1
How to Create the stacking scroll animation
How can you recreate the stacking scroll animation in GreenShift what you just saw.
Create a ‘timeline’ container
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.
Design the cards
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.
Add some white-space
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.