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

 

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