Scroll trigger with react three fiber

[mayyar]

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 

[Cassie]

Hi Mayyar, 

Have you seen our React guides? 

Alternatively - https://github.com/pmndrs/react-three-fiber/discussions/565

or
 

Good luck!

 

[mayyar]

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

[Cassie]

please can you pop together a minimal demo - it's very hard to debug without context.

We have some templates on codesandbox that may help.

https://codesandbox.io/s/gsap-react-starter-ut42t

[mayyar]

1 hour ago, Cassie said:

please can you pop together a minimal demo - it's very hard to debug without context.

Hey , i am not sure if i can share a sandbox , 

this is a minimal , i want to move camera while scrolling https://codesandbox.io/s/polished-cdn-2o25x?file=/src/index.tsx

 

[OSUblake]

You just need to make your ScrollTrigger inside an effect.

 

const { camera } = useThree();

useEffect(() => {

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

 

[mayyar]

18 hours ago, OSUblake said:

You just need to make your ScrollTrigger inside an effect.

 

thank you , why when i open it in full screen it's not working ?? https://codesandbox.io/s/baked-ao-forked-0smj4?file=/src/App.js

 

[OSUblake]

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