mallardandclaret

https://codepen.io/Rob__Sim-01/pen/jOYwBOz 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 Screen Recording 2022-03-29 at 10.40.50.mov