Jump to content
GreenSock

maxvia

React - multiple scrolltriggers within one component

Recommended Posts

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>
  )
}

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Thank you

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×