Romanus Posted February 9, 2023 Share Posted February 9, 2023 I trying to start using "react three fiber" How can I use gsap here? Please help me understand. On the codepen, I made a default example of three fiber. How to rotate a cube using gsap? Do I need the useFrame hook? Any attempt to add gsap fails See the Pen NWBZKYV?editors=0010 by romanusname (@romanusname) on CodePen 1 Link to comment Share on other sites More sharing options...
akapowl Posted February 9, 2023 Share Posted February 9, 2023 Hello @Romanus These articles should give you an idea for how to approach things with GSAP in React. It's also worth mentioning, that GSAP's .context() will be your best friend when it comes to React. https://greensock.com/docs/v3/GSAP/gsap.context() I'm not the most versed with React, but here is your example with GSAP tweening on the cubes' x-rotation. See the Pen VwBJYLw by akapowl (@akapowl) on CodePen 4 1 Link to comment Share on other sites More sharing options...
Ishan Shishodiya Posted March 3, 2023 Share Posted March 3, 2023 On 2/9/2023 at 1:24 PM, akapowl said: Hello @Romanus These articles should give you an idea for how to approach things with GSAP in React. It's also worth mentioning, that GSAP's .context() will be your best friend when it comes to React. https://greensock.com/docs/v3/GSAP/gsap.context() I'm not the most versed with React, but here is your example with GSAP tweening on the cubes' x-rotation. Tell me if I am wrong, but we can change different properties inside a property itself by just passing it as the pointer like you passed ref.current.rotation in gsap.to to change the "x" property on rotation? Link to comment Share on other sites More sharing options...
Cassie Posted March 3, 2023 Share Posted March 3, 2023 I'm afraid I don't know what you mean by this - is there a specific property you're trying to target? Link to comment Share on other sites More sharing options...
noviedo Posted March 3, 2023 Share Posted March 3, 2023 Hey Romanus! I hope you are well, I leave here a fork of your pen using GSAP to rotate the cube. See the Pen rNZmZLx by nazarenooviedo (@nazarenooviedo) on CodePen Basically, I used a useEffect() to animate it. useEffect(() => { if (!ref.current) return; gsap.to(ref.current.rotation, { x: Math.PI, ease: "linear", repeat: -1, duration: 2 }); }, []); I hope helps you! 1 Link to comment Share on other sites More sharing options...
moonunit7 Posted April 16, 2023 Share Posted April 16, 2023 (edited) Hello I'm using React Three Fiber and GSAP/ScrollTrigger. It "works" but there are glitches and I can't for the life of me figure out why. It looks smooth but sometimes the camera jumps when a trigger is hit either on the way down or back up. I've noticed that if I set "scrub" to zero - it's better. Any ideas why? https://codesandbox.io/embed/r3f-gsap-n2pj34 https://codesandbox.io/s/r3f-gsap-n2pj34?file=/src/components/threeD/Cube.tsx PS: I recently switched to React (because boss) and I was wondering if anyone could please tell me how far off I am with my approach. throw away or salvageable? Thanks!! Edited April 16, 2023 by moonunit7 Trying to add the embed code to the post. Not working. Link to comment Share on other sites More sharing options...
akapowl Posted April 16, 2023 Share Posted April 16, 2023 Hello @moonunit7 4 hours ago, moonunit7 said: It looks smooth but sometimes the camera jumps when a trigger is hit either on the way down or back up. When you are using a number value for the scrub, like you are doing in your codesandbox, it will take that amount of time for the animation to catch up to the scroll-bar/-position. So there is a time window, where the next animation might logically very well be triggered in that amount of time; before the last animation has caught up to the scroll-position - see the problem? 4 hours ago, moonunit7 said: I've noticed that if I set "scrub" to zero - it's better. Any ideas why? When you set scrub to true (or apparently to 0 as you tried) instead, scroll and tween will be pretty much synced, so there won't be the chance of the above happening. You should be able to fix that behaviour you are experiencing by either changing your setup to use one large timeline handling all the tweens instead of using multiple individual timelines like you do now - or alternatively keep your setup as it is, use scrub: true on your ScrollTriggers and switch to a smooth-scrolling implementation like ScrollSmoother to smoothen out the scroll. This thread should have all the information you need. I hope it will help. 3 Link to comment Share on other sites More sharing options...
moonunit7 Posted April 16, 2023 Share Posted April 16, 2023 Hi @akapowl thanks for the quick reply. Yip that's what I figured but wanted to double check if I missed anything. Cheers! Link to comment Share on other sites More sharing options...
iDVB Posted May 25, 2023 Share Posted May 25, 2023 @aka, Is there a way to use `gsap.context()` with React Three Fiber when it comes to being able to reference all the classnames under the current context vs creating refs for reach item? Seems like since fiber isnt using classnames you are stuck creating refs for each object? Link to comment Share on other sites More sharing options...
Rodrigo Posted May 25, 2023 Share Posted May 25, 2023 Hi @iDVB, That's unfortunately one of the tradeoffs of RTF and using canvas (THREE in this particular case). When using THREE directly I imagine that you can create variables or constants for each element, but with RTF being high order components that create a THREE object, you have no other choice. The one alternative I can think of is to create a method (ref should also run as a callback) and create an object with useRef in order to have a central immutable store for all your elements. const threeRefs = useRef({}); const createRef = (name, e) => { threeRefs.current[name] = e; }; return ( <main> <RTFElement ref={(e) => createRef("myCube", e)} /> </main> ); The code above assumes that the ref in a RTF component returns the actual reference to the rendered THREE element in the canvas. Hopefully this helps. Happy Tweening! 1 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