Jump to content
Search Community

How to use gsap with react three fiber?

Romanus test
Moderator Tag

Recommended Posts

 

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

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 4 weeks later...
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

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!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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 by moonunit7
Trying to add the embed code to the post. Not working.
Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

@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

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!

  • Like 1
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.
×
×
  • Create New...