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

[StevenStavrakis]

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

[ashthornton]

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]

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]

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