search

ashthornton / asscroll

Ash's Smooth Scroll 🍑
MIT License
947 stars 27 forks source link

Odd behaviour when using GSAP ScrollTrigger with "markers: true" #52

Closed StevenStavrakis closed 3 years ago

StevenStavrakis commented 3 years ago

When configuring a ScrollTrigger, setting markers: true in the scrolltrigger options causes the page to jump around. It seems to be that once the scroll is finished getting to its final position, the page jumps another 200 - 300 px in the scroll direction.

scrollTrigger: {
            trigger: '#_header_row-2-16',
            start: "+=10px",
            end: 99999,
            toggleActions: "play none none reverse",
            markers: true // <<<< this causes the issue
        }
ashthornton commented 3 years ago

It seems that ScrollTrigger forces position: relative on the scroll element when markers are enabled, which in this case is the ASScroll container. This causes the jump because the native scroll syncs when the smooth scroll stops moving and moves the now relatively positioned container with it.

You can try setting your ASScroll container to position: fixed !important; in your CSS whilst using markers, but it still doesn't seem quite right. It would be an issue with GSAP and how it handles markers with the .scrollerProxy() setup. Would be best to notify them about that one.

StevenStavrakis commented 3 years ago

In talking with the team at GSAP, there appears to be a feature coming with the next release called fixedMarkers.

That in conjunction with adding the markers as scroll elements via:

asscroll.enable({
        newScrollElements: document.querySelectorAll(".gsap-marker-start, .gsap-marker-end, [asscroll]")
    });

appears to have markers working perfectly alongside the smoothscroll. They provided me this codepen as an example.

ashthornton commented 3 years ago

That's great news! Debugging ScrollTrigger will be so much easier now 😁