Hey @OSUblake, sorry I wasn't very clear with my question. I'm now trying some various tests to see if I can get things working. What I'm hoping to accomplish is to basically create a smooth horizontal scrolling effect purely through gsap and have multiple horizontal sections that get pinned. My previous question had to do with the demo you posted, but I'm not sure it's actually relevant to what I'm doing.
I have tried the code to transform an element when scrolling, but can't seem to get ScrollTrigger to work with it. I have tried with and without horizontal: true and with and without pinType: 'fixed' but so far am not having any luck. The code is part of a larger codebase so it's hard to include everything, but I can at least include the smooth scroll code (similar to what I posted above) and the ScrollTrigger section:
window.addEventListener('scroll', e => {
let scrollPos = window.scrollY
gsap.to('.wrapper', {
x: -scrollPos,
ease: 'power2.out',
duration: 0.2
})
})
ScrollTrigger.create({
horizontal: true,
trigger: ".intro",
start: "left left",
end: "right right",
pin: ".intro .content",
pinType: 'transform',
})
I'm realizing that transforming an element horizontally as a way of mimicking sideways scrolling (and avoiding having to hold shift while scrolling) probably won't work because those sections aren't in the flow of the page. Not sure if there's a way around this, but trying to find a way to do it.
I'm going to see if I can use scrollerProxy to achieve this as it would work well with my existing code.
Thanks!