mayyar Posted October 5, 2021 Share Posted October 5, 2021 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 More sharing options...
Cassie Posted October 5, 2021 Share Posted October 5, 2021 Hi Mayyar, Have you seen our React guides? Alternatively - https://github.com/pmndrs/react-three-fiber/discussions/565 or Good luck! Link to comment Share on other sites More sharing options...
mayyar Posted October 5, 2021 Author Share Posted October 5, 2021 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 More sharing options...
Cassie Posted October 5, 2021 Share Posted October 5, 2021 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 Link to comment Share on other sites More sharing options...
mayyar Posted October 5, 2021 Author Share Posted October 5, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted October 5, 2021 Share Posted October 5, 2021 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 More sharing options...
mayyar Posted October 6, 2021 Author Share Posted October 6, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted October 6, 2021 Share Posted October 6, 2021 The body height is only 100%, so there is nothing to scroll. If you make your body taller, you'll see it working. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now