Change boolean variable via scrolltrigger

[gandarufuuu]

Hi all,
I'm new to GSAP and trying to wrap my head around the following problem:
In react I have a state variable

const [hitBottom, setHitBottom] = useState({ value: false });

I'm trying to figure out how to setup a scroll trigger and set that boolean to true, once the footer at the bottom of the page is in view, and reverse it to false once it leaves the viewport.

I cannot find anything on how to change state variables in the docs and would appreciate a nudge in the right direction. Thank you!

Here's what I tried doing:

  useEffect(() => {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: '#footer'
      }
    });
    tl.fromTo(
      setHitBottom,
      {
        value: false
      },
      {
        value: true
      }
    ).reverse();
  }, []);

 

[GreenSock]

You'll significantly increase your chances of getting a solid answer if you provide a simple minimal demo (like a Stackblitz or CodeSandbox) illustrating the challenge. Here's a starter you can fork: https://stackblitz.com/edit/react-cxv92j

 

Also, I'd strongly recommend reading https://gsap.com/react

 

There's a brand new (unannounced) @gsap/react useGSAP() hook that'll make things easier for you. I noticed you weren't doing proper cleanup which React requires. 

 

But in theory, your code might look something like: 

useGSAP(() => {
  
  ScrollTrigger.create({
    trigger: "#footer",
    onToggle: self => setHitBottom(self.isActive)
  });
  
});

Does that help? 

[gandarufuuu]

Thank you for your reply. I didn't provide a demo since I felt my problem was more of a general nature vs a project specific problem.
Your code worked indeed. I'm not sure if I need a cleanup, if I implement it like this
 

useEffect(() => {
    ScrollTrigger.create({
      trigger: '#footer',
      onToggle: (self) => setHitBottom(self.isActive)
    });
  }, [setHitBottom]);

 

[GreenSock]

8 hours ago, gandarufuuu said:

I'm not sure if I need a cleanup, if I implement it like this

useEffect(() => {
    ScrollTrigger.create({
      trigger: '#footer',
      onToggle: (self) => setHitBottom(self.isActive)
    });
  }, [setHitBottom]);

Yes, you would definitely need to cleanup if you use the useEffect() hook rather than the useGSAP() one.

useEffect(() => {
  let st = ScrollTrigger.create({
    trigger: '#footer',
    onToggle: (self) => setHitBottom(self.isActive)
  });
  return () => st.revert(); // <-- cleanup
}, [setHitBottom]);

 

Is there any particular reason you don't want to use the useGSAP() one? It saves you some hassle. 

[Rodrigo]

Hi,

 

Jack is right, is highly recommended that you use cleanup in a situation like this, right now you are creating a new instance everytime your state is updated which could lead to a memory leak.

 

Also in order to not create the ScrollTrigger instance on every render you can pass a function to the set function in order to set the new state based on the previous one. Keep in mind that this:

const [count, setCount] = useState(0);

useGSAP(() => {
  ScrollTrigger.create({
    trigger: '.green',
    start: 'top top',
    end: '75% top',
    onToggle: () => {
      setCount(count + 1);
    },
  });
}, []);

Will always set the count to 1, since in the scope of the useGSAP hook the value is always 0 because is never updated (the same will happen with a useEffect or useLayoutEffect, this is NOT a shortcoming of useGSAP, but the way scope and context execution works in JS).

 

This on the other hand will work as expected:

const [count, setCount] = useState(0);

useGSAP(() => {
  ScrollTrigger.create({
    trigger: '.green',
    start: 'top top',
    end: '75% top',
    onToggle: () => {
      setCount((count) => count + 1);
    },
  });
}, []);

Here is a super simple demo:

https://stackblitz.com/edit/vitejs-vite-1pjhjh

 

Hopefully this helps.

Happy Tweening!

[gandarufuuu]

Thank you Jack and Rodrigo, I'm constantly learning new things and appreciate your well-founded answer a lot. I had no idea about the useGSAP hook, and had my way of doing things from a tutorial on the web.
Your demo was super helpful, Rodrigo!