ScrollSpy

[LeandroPereyra]

Hello! First of all, I apologize for my English as I am using Google Translate.
I am studying ReactJs and in my project I want to add a ScrollSpy with GSAP. But I am confused.
I need that when scrolling, a word of another element changes color.
I think I understand how to do it so that I change something inside the element where I use scrollTrigger. But I don't know how to go about changing the styles of another component.
I tried to do it through a variable but I can't.
Could you help me, guide me, please?

Really, thank you very much!
This is the code:

useEffect(() => {

    const item = () => {

      document.getElementById("aboutSpy").classList.toggle("active");  // This is the item that should be added to the class "active"

    };

 

    const article3 = document.getElementById("about");  // This is the section that the class depends on when it passes into this section.

 

    gsap.to(article3, {

      scrollTrigger: {

        trigger: article3,

        start: "top 90%",

        end: "bottom 60%",

        markers: true,

        toggleClass: ()=>item(),  // I've tried doing this, but it doesn't work. I don't know if this is possible.

        toggleActions: "restart reverse restart reverse",

      },

    });

  }, []);

[LeandroPereyra]

Solved! In case it serves to someone:

useEffect(() => {

    const article3 = document.getElementById("about");

 

    let spies = gsap.utils.toArray(".scrollSpy-container span");

 

    function setActive(link) {

      spies.forEach((el) => el.classList.remove("active"));

      link.classList.add("active");

    }

 

    function unsetActive() {

      spies.forEach((el) => el.classList.remove("active"));

    }

 

    gsap.from(article3, {

      scrollTrigger: {

        trigger: article3,

        markers: true,

        start: "top 90%",

        end: "bottom 60%",

        onEnter: () => setActive(spies[0]),

        onEnterBack: () => setActive(spies[0]),

        onLeave: () => unsetActive(spies[0]),

        onLeaveBack: () => unsetActive(spies[0]),

      },

    });

  }, []);

[Cassie]

Thanks for coming back with your solution Leandro!