ScrollTrigger following document position, not custom smooth-scroll position despite use of scrollerProxy

[mallardandclaret]

 

As you can see in the attached minimal demo- I am using a custom smooth-scroller which allows the document body to move freely behind the smooth scroll container which is animated towards the current scroll position using a transform. However gsap scrollTriggers are following the document body position rather than the smooth-scroll position despite setting up scrollerProxy and updating scrollTrigger on smooth-scroll position update- therefore scrollTriggers are trailing behind the smooth-scroll position as you scroll (shown in the markers within the codePen demo)

 

//The smooth scroll container
let rsSS = document.getElementById('rs-ss')

//(c)ontainer y pos, (s)croll y pos - cy is the animated position, sy is the current document scroll position. sy gets updated on scroll
let cy = 0
let sy = 0

//*Scroller Proxy*

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.scrollerProxy(rsSS, {
    scrollTop(value) {
        if (arguments.length) {
            cy = value;
            return;
        }
        return cy;
    },
    getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
    },
});


//*Scroller*
//When we scroll, update sy value for animationFrame loop
let syUpdater = () => { sy = window.pageYOffset }

//Run every animation frame tick
window.animateFrame = () => {
    //Run only when sy has changed (User has scrolled)
    if((Math.abs(cy - sy) > .1)){
        //Calculate momentum pos using linear interpolation - easing function
        cy = (1 - fric) * cy + fric * sy

        //Move the container
        rsSS.style.transform = `translateY(-${ cy }px )`

        // when the smooth scroller updates, tell ScrollTrigger to update() too: 
        ScrollTrigger.update()
    }
    window.requestAnimationFrame(animateFrame) //loop every animation frame
}

Any advice would be greatly appreciated

See the Pen jOYwBOz by Rob__Sim-01 (@Rob__Sim-01) on CodePen

[OSUblake]

Welcome to the forums @mallardandclaret

 

Your ScrollTriggers need to know about the scroller they are using.

 

Quote

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

I'd just set it as default so you don't have to worry about adding it to every trigger.

 

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