ineslucas

When hosted on Vercel, this React Three Fiber canvas animation sometimes works and other times it really doesn't. I've already had to remove a scroll trigger as it was messing a lot with my hover/mouse events, unfortunately. What can I do so that all the objects are equally moved by the animation every time? I've already included a loader component and all my objects are within a <Suspense fallback={null}> tag. Does my useGSAP function need to return anything? import React, { useRef } from "react"; import { useFrame, useThree } from "@react-three/fiber"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; import ToolboxWithObjects from "./ToolboxWithObjects.js"; export default function Experience({ setIsHoveringLeicaM6 }) { {/** Experience is a component inside the Canvas - only place where we can use R3F hooks */} const { camera, gl } = useThree(); const keyboardRef = useRef(); const microphoneRef = useRef(); const leicaM6Ref = useRef(); const threadRef = useRef(); const businessCardRef = useRef(); const businessCardHorizontalRef = useRef(); const fullToolboxRef = useRef(); useGSAP(() => { // useGSAP instead of useLayoutEffect const tl = gsap.timeline({ }); if (businessCardHorizontalRef.current) { // Mid position tl.to(businessCardHorizontalRef.current.position, { x: 0, y: 1, z: 0.075, duration: 1 }, 0); tl.to(businessCardHorizontalRef.current.rotation, { x: -0.135, y: 0, z: 0, duration: 1 }, 0); // Final position + rotation inside the box tl.to(businessCardHorizontalRef.current.position, { x: 0, y: 0, z: 0.075, duration: 2 }, 2); tl.to(businessCardHorizontalRef.current.rotation, { x: -0.135, y: 0, z: 0, duration: 2 }, 2); } if (businessCardRef.current) { // Mid position tl.to(businessCardRef.current.position, { x: 0.005, y: 3.3, z: 0, duration: 2 }, 0); tl.to(businessCardRef.current.rotation, { x: 0, y: 0, z: 0, duration: 2 }, 0); // Final position + rotation inside the box tl.to(businessCardRef.current.position, { x: 0.005, y: 0, z: 0, duration: 2 }, 2); tl.to(businessCardRef.current.rotation, { x: 0, y: 0, z: 0, duration: 2 }, 2); } if (threadRef.current) { // Mid position tl.to(threadRef.current.position, { x: 1.6, y: 4, z: -0.4, duration: 2 }, 0); // Final position + rotation inside the box tl.to(threadRef.current.position, { x: 1.5, y: -0.18, z: -0.4, duration: 2 }, 2); tl.to(threadRef.current.rotation, { x: 0, y: 0.08, z: 1.6, duration: 4 }, 0); } if (leicaM6Ref.current) { // Mid position tl.to(leicaM6Ref.current.rotation, { x: 0, y: 0, z: 0.1, duration: 2 }, 0); // Final position + rotation inside the box tl.to(leicaM6Ref.current.position, { x: 1.015, y: -0.27, z: 0.47, duration: 2 }, 2); tl.to(leicaM6Ref.current.rotation, { x: 0, y: 0, z: 0.1, duration: 2 }, 2); } if (keyboardRef.current) { // Mid position tl.to(keyboardRef.current.position, { x: -0.6, y: 3, z: 0.8, duration: 1 }, 1); // Final position + rotation inside the box tl.to(keyboardRef.current.position, { x: -0.6, y: 0.13, z: 0.62, duration: 2 }, 2); tl.to(keyboardRef.current.rotation, { x: -1.6, y: -0.75, z: -1.6, duration: 2 }, 2); } if (microphoneRef.current) { // mid position tl.to(microphoneRef.current.position, { x: 0.3, y: 2.8, z: -1.7, duration: 2 }, 0); tl.to(microphoneRef.current.rotation, { x: 5, y: 0.02, z: 1.6, duration: 2 }, 0); // Final position + rotation inside the box tl.to(microphoneRef.current.position, { x: 0.3, y: 0.4, z: -1.7, duration: 2 }, 2); tl.to(microphoneRef.current.rotation, { x: 5, y: 0.02, z: 1.6, duration: 2 }, 2); } tl.to(camera.rotation, { x: -0.6, y: 0, z: 0, duration: 3 }, 0); tl.to(camera.position, { x: 0, y: 4, z: 6, duration: 3 }, 0); if (fullToolboxRef.current) { // objects could fall down inside the box tl.to(fullToolboxRef.current.rotation, { x: 0, y: -1.525, z: 0, duration: 1 }, 4); tl.to(camera.rotation, { x: -1.25, y: 0, z: 0, duration: 1 }, 4); tl.to(camera.position, { x: 0, y: 6, z: 2.1, duration: 1 }, 4); } }, []); return <> <group position-y={-0.6}> <ToolboxWithObjects keyboardRef={keyboardRef} microphoneRef={microphoneRef} leicaM6Ref={leicaM6Ref} threadRef={threadRef} businessCardRef={businessCardRef} businessCardHorizontalRef={businessCardHorizontalRef} fullToolboxRef={fullToolboxRef} setIsHoveringLeicaM6={setIsHoveringLeicaM6} /> </group> </> } b237fe96-c2b8-44d3-ad06-5e3d2e51dee4.mp4