(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
Move Image Slider with Scroll – GSAP
Easily Create an Image Slider that moves left or right based on your scroll direction. We simply translate all images in X-direction equally which is also why we need to add more images than normal in a single slider to fill up more than screen.
- dm-scrolling-image is the CSS class of all the images in slider container.
- dm-scroll-left is the CSS class of container with images that needs to move left when scrolling down.
- dm-scroll-right is the CSS class of the container with images that needs to move right when scrolling down.
- Change width percentage to your requirements, the width is for image size. Example: 20% will show 5 images at once, 25% will show 4 images etc.
- You can have different image sizes for tablet, mobile.
- Make sure to add both dm-scroll-left & dm-scroll-right container in a container and give it overflow:hidden, else there would be left/right scroll overflow.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
.dm-scrolling-image{
width: 25%;
display: flex;
flex-shrink: 0;
}
/*Tablet Settings*/
@media(max-width:1024px) {
.dm-scrolling-image{
width: 30%;
display: flex;
flex-shrink: 0;
}
}
/*Mobile Settings*/
@media(max-width:767px) {
.dm-scrolling-image{
width: 40%;
display: flex;
flex-shrink: 0;
}
}
.dm-scroll-left {
transition: none !important;
transform: translate(0%,0%);
}
.dm-scroll-right {
transition: none !important;
transform: translate(-100%,0%);
}
</style>
<script>
gsap.to('.dm-scroll-left',
{
transform: 'translate(-50%,0%)',
ease:'none',
scrollTrigger:
{
trigger: '.dm-scroll-left',
start: '0% 100%',
end: '100% 0%',
scrub: true
}
});
gsap.to('.dm-scroll-right',
{
transform: 'translate(-50%,0%)',
ease:'none',
scrollTrigger:
{
trigger: '.dm-scroll-right',
start: '0% 100%',
end: '100% 0%',
scrub: true
}
});
</script>
