Jump to content
Search Community

Different scroll jumps - horizontal ScrollTrigger

gn90 test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi, i don't know if this belongs here but i have a strange behaviour on my site. I made a horizontal scroll website with ScrollTrigger. The (sub)pages have different lengths/widths but everything uses the same JS. If I scroll once with the mouse, you jump different distances depending on the length of the page. I really don't know how to fix this. Is there any parameter i could use to handle this?

 

I don't have a Codepen link due the fact u cant have 2 different pages. I can post the link to my testserver with the actual page if this is allowed.

 

But this is my ScrollTrigger code:

ScrollTrigger.matchMedia({
    "(min-width: 992px)": function () {
        ScrollTrigger.normalizeScroll(true);
    }
});

const getMaxWidth = () => {
    maxWidth = 0;
    sections.forEach((section) => {
        maxWidth += section.offsetWidth;
    });
};

const setupScrollTrigger = () => {
    ScrollTrigger.matchMedia({
        "(min-width: 992px)": function () {
            sections = gsap.utils.toArray("section");
            getMaxWidth();
            ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

            scrollTween = gsap.to(sections, {
                x: () => `-${maxWidth - window.innerWidth}`,
                ease: "none",
                scrollTrigger: {
                    trigger: ".wrapper",
                    pin: true,
                    scrub: 0.5,
                    end: () => `+=${maxWidth/3}`,
                    invalidateOnRefresh: true
                }
            });

        }
    });
}

 

Thanks in advance

Gui

Link to comment
Share on other sites

Hi Thank you for the link.

 

I created a demo of the 2 pages: https://codesandbox.io/s/magical-jackson-8fsy6n?file=/test.html

 

index.html is the "short" page and test.html the "longer". If you just scroll once with the mouse on both sites you can clearly see that on test.html it jumps way further than on index.html because the page itself is longer.

 

Btw i have a mediaQuery on this testpage. Viewport width should be 992px+ 

 

Thanks in advance

Link to comment
Share on other sites

I looked at your demo, but I'm not sure what you're asking.

 

4 hours ago, gn90 said:

index.html is the "short" page and test.html the "longer". If you just scroll once with the mouse on both sites you can clearly see that on test.html it jumps way further than on index.html because the page itself is longer.

 

What are you expecting to happen, or what do you think should happen when you saying this? Everything looks fine to me. The horizontal animations are matched up with the scrollbar position.

 

  • Like 1
Link to comment
Share on other sites

Hi sry its bit hard for me to explain because i am not an english native speaker. I will try it with some screenshots. Its not about the animation or anything else. It's just about the distance when u scroll

 

When i scroll on my mousewheel just "one" step/click the viewport jumps a bit -> thats a normal behaviour. The thing I don't understand is that depending on the "pagesize" (how long the page is) the jump is different. As you can see on the screenshots i attached the page with less content has a smaller "jump" than the one with more content when i scroll the mousewheel just one step. Is it more clear what I mean?

 

Thanks in advance,

Gui

 

small-page.png

wide-page.png

Link to comment
Share on other sites

Ohh ok this is the scrollspeed and its based on the end value. That makes sense thank you. But how do i do this when both use the same Scrolltrigger functionality? Is there a way to make the scrollspeed the same? I have this value of an example and i thought this needed for the horizontal ScrollTrigger to work.

 

end: () => `+=${maxWidth / 3}`,

 

Link to comment
Share on other sites

  • Solution

You'd have to normalize the end values based on some constant that you like. 

let scrollSpeed = 3500;

 

And then something like this should give you constant speed.

end: () => `+=${scrollSpeed * (maxWidth - window.innerWidth) / scrollSpeed }`

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...