[React Three Fiber] + GSAP to create animation

[Audreyk]

Hello everyone!

I’m trying to create an animation using React Three Fiber and GSAP, more specifically using TimelineMax.

I’m replicating a vanilla JS tutorial and version to React Three Fiber:

• code: InfiniteTubes/demo3.js at a3b831b6c95bed4d803dfeed8b66ec76de333996 · Mamboleoo/InfiniteTubes · GitHub
• live ref: Infinite Tubes with Three.js | Demo 3 | Codrops

Here is my SandBox:

GSAP/FIBER TUNNEL - CodeSandbox

I put the GSAP animation within useFrame but the values are not updating…

any help would be appreciated! Thank you

[drcmda]

useFrame is a components access to the renderloop, it executes 60 times per second. you are initializing classes in there, it makes no sense. the animation is a side-effect: https://codesandbox.io/s/gsapfiber-tunnel-forked-kr819?file=/src/objects/App.tsx

i also dont understand why you animate objects instead of the real camera and texture. the useFrame in the end wouldn’t be needed to write the object data back into the texture/camera.

[Audreyk]

@drcmda thanks a lot! I’m still fairly new to React-Three-Fiber so I’m still learning and making mistakes! Your help clarified a lot of things, so thanks a lot!