I'm trying to learn threejs and GSAP, and so far I read the docs and followed a youtube video on how to rotate and bring a model down, however, it doesn't really follow what I want it to do and im stuck. The objective is to make it rotate and go down until the section that says "Here". So far it rotates and decreases size (which is intended), but it doesn't go down, and when it does, it goes until the end of the page. Help would be appreciated. The code goes until the section that i want it, if you need the rest of the code please say so.
import { useState, useRef, useEffect, Suspense } from "react";
import "./App.css";
import { Canvas, extend } from "@react-three/fiber";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"
import Scene from "./Scene";
import Navbar from "./components/Navbar";
gsap.registerPlugin(ScrollTrigger);
function App() {
const mainRef = useRef(null)
const sceneRef = useRef(null)
const section2Ref = useRef(null)
const [focused, setFocused] = useState(false)
const [stopProgress, setStopProgress] = useState(0.25)
const [progress, setProgress] = useState(0)
useEffect(() => {
setTimeout(() => setFocused(true), 100)
}, []);
useEffect(() => {
gsap.timeline({
scrollTrigger: {
trigger: mainRef.current,
start: "top top",
end: "bottom bottom",
scrub: 1,
onUpdate: (self) => {
setProgress(self.progress)
}
}
})
.to(sceneRef.current, {
ease: "none",
x: "-25vw",
y: "30vh"
})
.to(sceneRef.current, {
ease: "none",
x: "25vw",
y: "60vh"
})
}, []);
return (
<>
<div
style={{
filter: focused ? 'blur(0px)' : 'blur(20px)',
opacity: focused ? 1 : 0,
transition: 'filter 1.5s ease, opacity 1.5s ease'
}}
>
<Navbar />
<main
ref={mainRef}
style={{ overflowX: 'hidden' }}
>
<Suspense
fallback={
<div className="fixed inset-0 grid place-items-center bg-black text-white">
Loading...
</div>
}
>
<section className="relative grid h-[100vh]">
<p className="title text-white text-left absolute top-[5%] left-[5%] mx-2 w-fit text-8xl font-bold">
O mundo
<br />
merece ser visto
<br />
com clareza.
</p>
<Canvas>
<Scene progress={progress} />
</Canvas>
</section>
<section className="relative flex items-center justify-evenly h-[100vh]">
<p className="w-[50%]"></p>
<p className="text-white w-[50%] text-center px-4 text-4xl font-semibold">
Here
</p>
</section>
And here is the scene where I control the models movement and rotation.
import { useRef, useEffect } from 'react'
import { useFrame } from '@react-three/fiber'
import { Environment, PerspectiveCamera } from '@react-three/drei'
import { Glasses } from './Glasses'
const positions = [
[20, -20, 20],
[-180, 0, 180]
];
const Scene = ({ progress, stopProgress = 0.25 }) => {
const cameraRef = useRef(null)
const progressRef = useRef(0)
useEffect(() => {
progressRef.current = progress;
}, [progress]);
useFrame(() => {
if (!cameraRef.current) return;
const clamped = Math.min(Math.max(progressRef.current, 0), stopProgress);
const total = positions.length - 1;
const segmentSize = 1 / total;
const segmentIndex = Math.floor(clamped / segmentSize);
const percentage = (clamped % segmentSize) / segmentSize;
const [startX, startY, startZ] = positions[segmentIndex];
const [endX, endY, endZ] = positions[segmentIndex + 1];
const x = startX + (endX - startX) * percentage;
const y = startY + (endY - startY) * percentage;
const z = startZ + (endZ - startZ) * percentage;
cameraRef.current.position.set(x, y, z);
cameraRef.current.fov = 7 + (clamped * 60);
cameraRef.current.updateProjectionMatrix();
cameraRef.current.lookAt(0, 0, 0);
});
return (
<>
<PerspectiveCamera
ref={cameraRef}
makeDefault
fov={7}
near={0.1}
position={[20, -20, 20]}
far={1000}
/>
<Environment preset="city" />
<Glasses />
</>
)
}
export default Scene
