How to prevent scroll position changing on resize with ScrollTrigger and ASScroll plugin

[nealwright]

I'm not sure if this is possible, but figured I should ask here before I decide to give up on it. I'm using ScrollTrigger with ASScroll as a ScrollProxy plugin on a horizontal scrolling site. I'm finding that when I resize the page, the scroll position moves, despite each section width and height being set using vw and vh units. The ideal behavior would be for the scroll position to remain the same while the sections themselves stretch along with the resize.

 

I've included a little drawing to show what I mean. I'm also linking to an existing horizontal scrolling site that behaves the way I'd like my site to behave when resizing.

 

I've recreated the effect using the same code I'm using in CodePen. Thanks for any help you can provide!

See the Pen LYORdOP by Hendeca (@Hendeca) on CodePen

[OSUblake]

Welcome to the forums @nealwright

 

We really don't offer support for 3rd party on this forum, and ASScroll really seems to be problematic with resizing. At least with your demo. It was doing a bunch of wonky stuff when I tried resizing it, showing native scrollbars and pushing content around. 🤷‍♂️ 

 

 

 

Instead of doing horizontal, have you tried just animating the x axis like this?

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

 

[nealwright]

No, I haven't tried it, but I think I will, as this seems to achieve what I want and I have experienced a lot of strange behaviors with ASScroll. Thanks for the help, I will try this and report back!

[nealwright]

@OSUblake Quick question: if I am not using snapping like this codepen example, could I just have the scroll event trigger an animation to the new scrollLeft value?

 

window.addEventListener('scroll', () => {
  let scrollPos = window.scrollLeft
  gsap.to('.my-container', {
  	x: -scrollPos,
    duration: 0.2,
    ease: "power2.out"
  }
})

Something like this?

[OSUblake]

You can just remove the snap part and it should be fine.

 

And for the code you posted, it would work, but only if the user is scrolling horizontal. That's kind of hard to do with a mouse as you have to use the shift button.

 

[nealwright]

9 minutes ago, OSUblake said:

You can just remove the snap part and it should be fine.

 

And for the code you posted, it would work, but only if the user is scrolling horizontal. That's kind of hard to do with a mouse as you have to use the shift button.

 

Does this also work if you have multiple ScrollTrigger sections that are pinned? Like could I still pin the content at various sections as the page scrolls horizontally?

[OSUblake]

1 hour ago, nealwright said:

Does this also work if you have multiple ScrollTrigger sections that are pinned?

 

I'm a bit confused about what you're referring to. Are you talking about that event listener code you posted or ScrollTrigger in general?

 

With ScrollTrigger, you can pin multiple sections that do that horizontal effect. Give it shot, and if run you into any problems, we can nudge you in the right direction. I would definitely recommend experimenting without any type of smooth scrolling in place, like ASScroll.

 

And if you need some inspiration, there are bunch of demos here.

 

https://greensock.com/st-demos/

 

And on our CodePen collections.

 

ScrollTrigger Showcase - a Collection by GreenSock on CodePen

 

ScrollTrigger How-To Pens - a Collection by GreenSock on CodePen

 

[nealwright]

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!

[OSUblake]

I personally would never mess with horizontal scrolling just for the reasons I already mentioned. If I wanted horizontally triggered animations, I would use containerAnimations.

 

 

 

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

The scrub value is what controls how smooth it is, and if you the main body had smooth scrolling, that would add to it.