(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
Horizontal Scrolling Cards – Elementor and GSAP
In this tutorial, we are learning to create cards that scroll horizontally and creates a unique experience for your visitors. We will be making 2 different versions, in first one the cards don’t stack and just fly by and in second the cards stack from right or down.
Version 1 – Horizontal Scrolling Cards (No Stacking)
- dm-horizontal-section-1 is the CSS class of the main container that will get sticky.
- dm-horizontal-wrapper-1 is the CSS class of the container that contains all the cards. This container needs to be placed inside dm-horizontal-section-1.
- Change the left: ‘-130%’ at line (40) to your desired end location of the scroll.
- In below code, we initially make dm-horizontal-wrapper-1 be position absolute and give it left 150%.
<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-horizontal-wrapper-1 {
left:150%;
top:0;
position: absolute;
}
.dm-horizontal-wrapper-1, .dm-horizontal-section-1, .dm-horizontal-card-1 {
transition: none !important;
}
</style>
<script>
gsap.to('.dm-horizontal-wrapper-1', {
scrollTrigger: {
trigger: '.dm-horizontal-section-1',
start:'0% 0%',
end: '+=200%',
scrub:true,
pin:true
},
left:'-130%'
});
</script>
Version 2 – Horizontal Scroll with Stacking Cards (Different directions)
- dm-horizontal-section-3 is the CSS class of the main container that will get sticky.
- dm-horizontal-card-3 is the CSS class of each card container that will be animated in as your scroll.
- By default, it comes from left:’300%’ making the cards animate from right to left. Simply changing the left value to be negative would lead the cards to animate from left to right.
- Similarly, if you want the cards to come from up or down, simply remove the line (32) left:’300%’ and make it be top:’300%’ for down to up and top:’-300%’ for up to down. Play around with values until you get something that works for you.
<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-horizontal-wrapper-3, .dm-horizontal-section-3, .dm-horizontal-card-3 {
transition: none !important;
}
</style>
<script>
gsap.from('.dm-horizontal-card-3', {
scrollTrigger: {
trigger: '.dm-horizontal-section-3',
start:'0% 0%',
end: '+=200%',
scrub:true,
pin:true
},
left:'300%',
stagger:0.3
});
</script>
