Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mayyar

Scroll trigger with react three fiber

Recommended Posts

Hello every one , i found so trouble in use scroll trigger with react three fiber , so can any one help me ? 

or i have to learn some thing befor ?? i saw an example but never see what i need to do 

thank's 

Link to comment
Share on other sites

1 hour ago, Cassie said:

Have you seen our React guides? 

Hi , thank you for replying cuz i am struggle, i try ```

useEffect(() => {
    gsap.to(boxRef.current.position, {
      x: "+=10",
      duration: 6,
      scrollTrigger: {
        trigger: boxRef.current.position,
        scrub: true,
        start: "top bottom",
        end: "top top"
      }
    });
  });
```
but it not work
Link to comment
Share on other sites

You just need to make your ScrollTrigger inside an effect.

 

const { camera } = useThree();

useEffect(() => {

  // animate camera with scroll trigger
}, [])

 

Link to comment
Share on other sites

The body height is only 100%, so there is nothing to scroll. If you make your body taller, you'll see it working.

  • Like 2
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.
×