How to remove the scrollProxy

[iliya]

Hello everyone,
Im creating a website with smooth-scrollbar and to use gsap scrollTrigger, I set a proxy for scrolling and it works like a charm. Now for screen sizes below 768 Im destroying smooth-scrollbar if it exists and normalize the scroll. The problem is that when I do that gsap scrollTrigger doesnt work. I tried killing all the scrollTrigger instances and recreating them but it didnt work. So im guessing that the scrollProxy is the problem and I should some how remove that. I searched through the documentation but I didnt find any way to remove it so I was wondering is there any way I can destroy the scrollProxy?

This is the scrollerProxy im using which works perfectly as long as you dont go below 768px

 

ScrollTrigger.scrollerProxy(document.body, {
    scrollTop(value) {
      if (arguments.length) {
        scroller.scrollTop = value;
      }
 
      return scroller.scrollTop;
    },
  });

 

and I have an event listener for when it gets destroyed to kill all scrollTriggers and rebuild the animations.

 

document.addEventListener('smoothScrollDestroy', () => {
    const allScrollTriggers = ScrollTrigger.getAll()
    if( allScrollTriggers.length ) allScrollTriggers.forEach( scrollT => scrollT.kill() )

    buildScrollAnimation()
})

 

[elegantseagulls]

Do you have a minimal demo showing that's happening here? Are you resetting the ScrollerProxy to body, or whatever is the new scroll-container?

[iliya]

23 minutes ago, elegantseagulls said:

Do you have a minimal demo showing that's happening here? Are you resetting the ScrollerProxy to body, or whatever is the new scroll-container?

Im sorry for not providing a codepen since my project is a little messy right now.

I tried resetting the scrollerProxy to body like below but I dont know if Im doing it right. Can you give me an example on how I should reset it?
 

ScrollTrigger.scrollerProxy(document.body, {
  scrollTop(value) {
    if (arguments.length) {
      window.scrollY = value;
    }

    return window.scrollY;
  },
});

 

[GreenSock]

Have you tried this?

ScrollTrigger.scrollerProxy(document.body);

In other words, it's setting the actual proxy data to null for document.body (replacing what was there before). 

[iliya]

19 minutes ago, GreenSock said:

Have you tried this?

ScrollTrigger.scrollerProxy(document.body);

 

In other words, it's setting the actual proxy data to null for document.body (replacing what was there before). 

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.

[GreenSock]

Are you positive that you're using the latest version of ScrollTrigger (3.10.4)? 

 

If you still need help, please provide a minimal demo with just a few <div> elements illustrating the problem in as simple a fashion as possible and we'd be happy to take a peek.