I need to know how to get the scroll progress from my inner sticky scroll component to handle the animation of my 3D model. Right now I just get the scroll from the container but the inner container I can't, I'm using GSAP or motion to handle de scroll, I'm gonna share the structure of my code to know how it is working
CanvaModel Component
const WormHoleCanvas = () => {
return (
<Canvas gl={{ antialias: true }}>
{/* <Environment preset="warehouse" /> */}
<ambientLight intensity={30} />
<ScrollControls>
<Overlay />
<Tunnel />
</ScrollControls>
<OrbitControls enableZoom={false} />
</Canvas>
);
};
Tunnel Component
const Tunnel = () => {
const points = useMemo(() => generateTunnelPoints(500, 5, 30), []);
const scroll = useScroll();
const curve = new THREE.CatmullRomCurve3(points);
useFrame(({ camera }) => {
const t = 1 - scroll.offset; // Use scroll from drei
???// Use scrollYProgress from motion or GSAP
const position = new THREE.Vector3();
const tangent = new THREE.Vector3();
// Combine both scroll values to get a smoother transition
????
curve.getPointAt(t, position);
curve.getTangentAt(t, tangent);
camera.position.copy(position);
camera.lookAt(position.clone().add(tangent));
});
// create edges geometry
.....
return (
<mesh>
<primitive object={edges} />
<tubeGeometry args={[curve, 100, 0.8, 20, false]} />
<meshStandardMaterial
color="white"
wireframe
// metalness={0.5}
side={THREE.DoubleSide}
/>
</mesh>
);
};
Overlay Component
const Overlay = () => {
const childRef = useRef<HTMLDivElement>(null);
return (
<Html center className="z-50">
<div>
Another Section.....
</div>
<div className="h-screen 2xl:left-[270px] left-[232px] top-0 relative border border-red-600">
<StickyScroll
content={services}
ref={childRef as Ref<HTMLDivElement>}
/>
</div>
</Html>
);
};
Sticky scroll Component
export const StickyScroll: FC<StickyScrollProps> = ({
content,
ref: parentRef,
setScrollY,
}) => {
const [activeCard, setActiveCard] = React.useState(0);
const ref = useRef(null);
const { scrollYProgress } = useScroll({
// uncomment line 22 and comment line 23 if you DONT want the overflow container and want to have it change on the entire page scroll
// target: ref
container: ref,
offset: ["start start", "end start"],
});
const cardLength = content.length;
useMotionValueEvent(scrollYProgress, "change", (latest) => {
const cardsBreakpoints = content.map((_, index) => index / cardLength);
const closestBreakpointIndex = cardsBreakpoints.reduce(
(acc, breakpoint, index) => {
const distance = Math.abs(latest - breakpoint);
if (distance < Math.abs(latest - cardsBreakpoints[acc])) {
return index;
}
return acc;
},
0
);
setActiveCard(closestBreakpointIndex);
});
const { scrollYProgress: GeminiScrollY } = useScroll({
// target: ref,
container: ref,
offset: ["start start", "end end"],
});
return (
<div
ref={parentRef}
className="w-full relative bg-transparent"
>
<div className="absolute w-full h-full lg:hidden pt-64">
<div className="sticky top-1/3 w-full h-full -mb-60">
<SwitchRackCompleteModel scrollYProgress={GeminiScrollY} />
</div>
</div>
<motion.div
className="h-screen overflow-y-auto flex justify-center relative space-x-10 rounded-md px-10 w-full bg-[--bg-color]"
ref={ref}
>
<div className="relative flex items-start w-full lg:w-1/2 justify-center bg-transparent">
<div className="max-w-3xl lg:max-w-6xl w-full px-0 xl:pl-60 relative">
{content.map((item, index) => {Some content})}
</div>
</div>
<div className="hidden lg:flex sticky h-[100vh] lg:w-[50vw] top-0 rounded-md bg-transparent items-center justify-center">
<div className="w-full relative h-full flex items-center justify-center">
{/* <div className="bg-transparent w-full h-full dark:bg-grid-white/[0.2] bg-grid-black/[0.1] shadow-[inset_0px_0px_64px_164px] shadow-background absolute"></div> */}
{content[activeCard].imageUrl ? (
<div className="relative z-10 w-full h-full">
<SwitchRackCompleteModel scrollYProgress={GeminiScrollY} />
</div>
) : null}
</div>
</div>
</motion.div>
</motion.div>
);
};
Guys I'm trying to capture the scroll progress from the sticky component and add it with the other scroll progress into the tunnel component to handle the tunnel animation while is scrolling, I was trying with refs and nothing maybe I was doing wrong. Right now the animation is just handle by the Scroll controls and useScroll imported by react-three/drei library and I want to add the scroll progress from the sticky component. Maybe I repeat a lot of things but I want to be as clear as possible.
Any information could be fine
Thanks in advance