Observer.create blocking scroll on other pages

[noahtrotman]

Hi,

 

I'm using gsap observer and its working and all on the main page, however when I navigate to another page the mouse wheel is blocked. The sandbox log says element not found but I'm not sure what the observer target should be instead of ".wrapper" (the classname of element). I'm just trying to target the specific page and not all pages. Aware that it defaults to the viewport and so this may be causing the problem. How would I change that?

 

Scroll to move blue box.

Click on blue box to navigate to page.

Scroll on page with text.

 

https://codesandbox.io/s/vigorous-visvesvaraya-l0wf22?file=/components/Main.js:789-803

[Cassie]

Heya! I don't really understand React router that well, but I'm *guessing* that as it's a single page app, you'll have to kill your observer somewhere.

@Rodrigo is your man for React stuff.

I'm going to have a little poke around the forums and demos to see if I can figure it out though. 👀

[noahtrotman]

Heya,

 

Ok, that helps.

I'm working with nextjs so it'll be using their router and not React router.

I'll take a look around too and see if I can find something.

[Cassie]

This is a good starting point - 

 

 

You check that article out and I'll take a look at how Next's routing works. Unless Rodrigo jumps in and rescues us.

[noahtrotman]

Hey,

 

I was able to get it to work. Just needed to subscribe to the nextjs router events when the route was about to change. Thank you for pointing me in the right direction.

 

 const scroll = Observer.create({ 
 ...
 })


router.events.on("routeChangeStart", () => {
    scroll.kill();
  });

Updated sandbox:

https://codesandbox.io/s/laughing-cache-y51p4z?file=/components/Main.js:1414-1483

[Rodrigo]

Hi,

 

This seems to work:

useLayoutEffect(() => {
  const obs = Observer.create({
    target: window,
    type: "wheel, touch",
    wheelSpeed: -1,
    preventDefault: true,
    onUp: () => {
      if (isAnimating) return;
      // setCurrent(current === 0 ? 3 : current + 1);
      next();
    },
    onDown: () => {
      if (isAnimating) return;
      // setCurrent(current === data.length - 1 ? 0 : current - 1);
      previous();
    },
    tolerance: 10,
  });
  return () => {
    console.log("CLEANUP");
    obs.kill();
  };
}, []);

Also I wouldn't recommend doing this:

let [isAnimating] = useRef(false);

A ref in React is not something you can work as something returned by a useState hook. It's just an object with a current property that is kept through re-renders.

https://reactjs.org/docs/refs-and-the-dom.html

 

I just saw your post about using Next router to kill the Observer instance. Is cleaner and more predictable using the useEffect/useLayouyEffect hook's cleanup section for that:

https://greensock.com/react-advanced#useIsomorphicLayoutEffect

 

@GreenSock it seems that the Observer instance is not being killed when created inside a GSAP Context instance:

https://stackblitz.com/edit/nextjs-7kayie?file=pages%2Findex.js,components%2FMain.js

 

Hopefully this makes things clearer.

 

Happy Tweening!

[Cassie]

Alternate option, using context

https://codesandbox.io/s/hardcore-hooks-1go6uw?file=/pages/index.js
 

[Cassie]

Oh weird, It worked in my demo. Maybe something else was working in mine? I swopped the target out to use a ref too.

 

Quote

it seems that the Observer instance is not being killed when created inside a GSAP Context instance:

 

[noahtrotman]

@Rodrigo

 

Ok, I'll incorporate the useLayoutEffect and kill it on the return.

 

 

6 minutes ago, Rodrigo said:

Also I wouldn't recommend doing this:

let [isAnimating] = useRef(false);

Ok I will change that. I was originally using useState but the observer was still able to trigger onUp/ onDown functions while animating (double trigger) and wasn't sure why so I thought this would fix it

 

@Cassie

Seeing your solution now. I will try both and see which one I prefer from testing.

 

Thank you both!

[GreenSock]

3 hours ago, Rodrigo said:

@GreenSock it seems that the Observer instance is not being killed when created inside a GSAP Context instance:

https://stackblitz.com/edit/nextjs-7kayie?file=pages%2Findex.js,components%2FMain.js

I've enhanced the next release of Observer to automatically kill() any instances created inside a gsap.context() when it gets reverted. Here's a link to the latest beta: 

https://assets.codepen.io/16327/Observer.min.js

 

But yes, in the meantime you can just kill() it in your cleanup function. ✅