How to fix a horizontal scroll section with scrollTrigger

I’m trying to have a section that scrolls horizontally while you scroll down. I was looking at videos on how to do this, and although it seems simple enough, i cant get it to work. Can somebody help me understand what I’m doing wrong?
(it looks ugly on code pen because it doesn’t have my local files and the rest of the CSS. Just what’s necessary)

Here is my code on CodePen

This is an example of what I wanted

I tried variations of two ways i saw:

gsap.registerPlugin(ScrollTrigger)

let sections = gsap.utils.toArray('.card-scroller div')

gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    scrollTrigger: {
        trigger: (".card-scroller"),
        pin: true,
        scrub: 1,
        end: "+=3000"
    }
})

and

document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(ScrollTrigger)
});

const container = document.querySelector('.card-scroller')
const sections = gsap.utils.toArray('.card-scroller div')


let scrollTween = gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
        trigger: (".card-scroller"),
        pin: true,
        scrub: 1,
        end: "+=3000"
    }
})

You need to sign in to view this answers

Related Post