(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Stacking Cards – Elementor and GSAP
In this tutorial, we are learning how to create stacking cards with Elementor and GSAP. If you watch the video, you will find simple stacking cards effect without offset. So, if you wish to learn about simple stacking cards, you can watch the first part of the video. The 2nd and 3rd part uses the below code, that makes the previous cards scale down and also lowers opacity.
Efficient Workflow Solutions
Streamline your business operations with our efficient workflow solutions. From seamless task management to optimized processes, enhance productivity and achieve your business goals effortlessly.
Client-Centric Interaction
Prioritize client satisfaction with our client-centric approach. Foster meaningful interactions through intuitive interfaces, ensuring a positive and engaging experience for your customers.
Tailored Branding Strategies
Performance-Driven Results
Experience business growth with our performance-driven solutions. Optimize your strategies, enhance efficiency, and stay ahead of the competition by leveraging our robust and effective business templates.
Liked this Design?
Efficient Workflow Solutions
Streamline your business operations with our efficient workflow solutions. From seamless task management to optimized processes, enhance productivity and achieve your business goals effortlessly.
Client-Centric Interaction
Streamline your business operations with our efficient workflow solutions. From seamless task management to optimized processes, enhance productivity and achieve your business goals effortlessly.
Tailored Branding Strategies
Streamline your business operations with our efficient workflow solutions. From seamless task management to optimized processes, enhance productivity and achieve your business goals effortlessly.
Performance-Driven Results
Streamline your business operations with our efficient workflow solutions. From seamless task management to optimized processes, enhance productivity and achieve your business goals effortlessly.
Liked this Design?
Consider supporting me by donating, subscribing to YouTube or simply buying templates from my website.
Version 1 – Stacking Cards with No constant scale down – Elementor & GSAP
- All the card containers need to be given the CSS class – dm-gsap-cards.
- The last card container should also be given extra CSS class – dm-gsap-cards-end. (Simply add space to add multiple CSS class)
- You can remove the scale or opacity parameter in below GSAP if you don’t want them. Also, you can add your own effects if you know CSS and GSAP.
- The stacking would work perfectly till 10 cards, as the scale value and opacity value decreases 0.1 for each lower card. You can still test out more than 10 cards and see if you like it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-gsap-cards {
transition: opacity 0.3s !important;
}
</style>
<script>
window.addEventListener("load", () => {
const dmGsapCards = document.querySelectorAll('.dm-gsap-cards');
const dmCardsLength = dmGsapCards.length;
dmGsapCards.forEach((dmElement, index) => {
const dmCardsOffset = -15 * (index + 1);
const scaleValue = (100 - dmCardsLength) / 100 + ((index + 1) * 0.01); // Incremental scale value
const opacityValue = (1 - dmGsapCards.length/10) + ((index + 1) * 0.1);
gsap.to(dmElement, {
scrollTrigger: {
trigger: dmElement,
endTrigger: '.dm-gsap-cards-end',
start: `0%+=${dmCardsOffset}px 15%`,
end: '0% 15%',
pin: true,
scrub: true,
markers: false
}
});
if (index < dmGsapCards.length - 1) {
const nextElement = dmGsapCards[index + 1];
gsap.to(dmElement, {
scrollTrigger: {
trigger: nextElement,
start: '50% 50%',
end: '50% 50%',
markers: false,
onEnter: () => {
gsap.to(dmElement, { opacity: opacityValue, scale: scaleValue, duration: 0.5, transformOrigin: 'top center'});
},
onLeaveBack: () => {
gsap.to(dmElement, { opacity: 1, scale: 1, duration: 0.5 });
}
}
});
}
});
});
</script>
Version 2 – Stacking Cards with Constant scale down – Elementor & GSAP
- All the card containers need to be given the CSS class – dm-stack-cards.
- The containers are made sticky using position sticky CSS and top:15vh offset has been given. Ideally you want your cards to use vh, so that you can add top offset in vh to make it center responsively. If you wish to use px, rem, %, you are free to do so.
- We use nth-child(2,3,4,….), to add translate property for the offset effect. Also make sure parent container has gap:0. Simply change translateY value with equal difference between each nth-child to add more offset between cards.
- The stacking would work perfectly till 10 cards, as the scale value and opacity value decreases 0.1 for each lower card. You can still test out more than 10 cards and see if you like it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-stack-cards {
top: 15vh;
position: sticky;
transform-origin: 'top center';
}
.dm-stack-cards:nth-child(2) {
transform: translateY(20px);
}
.dm-stack-cards:nth-child(3) {
transform: translateY(40px);
}
.dm-stack-cards:nth-child(4) {
transform: translateY(60px);
}
.dm-stack-cards:nth-child(5) {
transform: translateY(80px);
}
</style>
<script>
window.addEventListener("load", () => {
const dmStackCards = document.querySelectorAll('.dm-stack-cards');
const dmStackCardsLength = dmStackCards.length;
dmStackCards.forEach((dmStackCard, index) => {
const nextCard = dmStackCards[index + 1];
const lastCard = dmStackCards[dmStackCards.length - 1];
if (nextCard) { // Ensure there is a nextCard before setting up the animation
const scaleOrderValue = (100 - dmStackCards.length) / 100 + ((index + 1) * 0.01);
const opacityOrderValue = (1 - dmStackCards.length/10) + ((index + 1) * 0.1);
gsap.to(dmStackCard, {
scrollTrigger: {
trigger: nextCard,
endTrigger: lastCard,
start: `0% 50%`,
end: '100% 50%',
scrub: true,
invalidateOnRefresh: true,
markers: false
},
scale: scaleOrderValue,
opacity: opacityOrderValue
});
}
});
});
</script>
