React - multiple scrolltriggers within one component

[maxvia]

Hi guys,

 

How do I handle having multiple ScrollTrigger functions within 1 component. When I do that it gives me a 'GSAP target null not found.' 

 

Thanks

 

const Test = () => {
  let text = useRef()
  let mainContainer = useRef()
  useEffect(() => {
    ScrollTrigger.create({
             trigger: text,
             start:"top 50%",
             end: "bottom 50%",
             onEnter: function() {
              //gsap function
             },
   )}
     ScrollTrigger.create({
             trigger: mainContainer,
             start:"top top",
             end: "bottom 50%",
             onEnter: function() {
              //gsap function
             },
   )}
  },[])
  
  return(
    <div 
    	ref={mainContainer}
   	>
    	<div
			ref={text}
		>
      		This is a text
      	</div>
    </div>
  )
}

 

[ZachSaucier]

Hey maxvia. I believe you should be using .current like text.current and mainContainer.current as your targets instead when using refs.

[Rodrigo]

Hi,

 

Indeed Zach is right. Here is the official React documentation regarding accessing the refs:

 

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

 

Happy Tweening!!!

[maxvia]

Hey Zach, assigning my ref to a new Const inside my useEffects seems like it is solving my issues!

Thank you