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