I just tried this but this didnt work either. So my logic looks like this right now:
import ScrollTrigger from 'gsap/ScrollTrigger';
export function setProxyOnGsapScrollTrigger(scroller, fns) {
// Kill existing scroll triggers if theres any
const scrollTriggers = ScrollTrigger.getAll()
if( scrollTriggers.length ) scrollTriggers.forEach( scrollT => scrollT.kill() )
ScrollTrigger.scrollerProxy(document.body, {
scrollTop(value) {
if (arguments.length) {
scroller.scrollTop = value;
}
return scroller.scrollTop;
},
});
scroller.addListener(ScrollTrigger.update);
fns.forEach( ({ fn, params }) => fn(...params) )
document.addEventListener('smoothScrollDestroy', () => {
console.log('reset scrollTriggerProxy')
const allScrollTriggers = ScrollTrigger.getAll()
if( allScrollTriggers.length ) allScrollTriggers.forEach( scrollT => scrollT.kill() )
ScrollTrigger.scrollerProxy(document.body);
fns.forEach( ({ fn, params }) => fn(...params) )
})
}
the fns are the functions that create the animations. So right now if I load the page with the screen size above 768 or below that, the animations work. But when I change it to below 768 or above, the scrollTrigger wont work anymore.