Daaburn

Hey @alig01 @Rodrigo thanks for taking the time to read and answer my question, really appreciate it! @alig01 Took a look at the video relating to gsap.context(), appreciate the shout. I've made the changes as suggested but there same issue regarding the missing plugin alongside a new error of element.getBoundingClientRect is not a function @RodrigoThere's no problem with using GSAP for R3F, it's just that when I try to apply scroll trigger it doesn't work. Context: I want to create a website similar to the example below where there is a 3d model that will rotate when the user scrolls down the page. But if I think about it, in that case would I instead create invisible points on my website and use that to trigger the scroll effect for the 3d model to rotate instead of setting the trigger on the 3d model since it stays on the same canvas? Additionally, since I want it to rotate everytime I scroll, would I still be using scroll trigger or is there a better alternative/library made for this? https://silencio.es/?fbclid=IwAR0EghoKrFl2948h93DFTCTqv2TuPeQ2G01gRNFuikW8hXi34iIlsKMyiq0

Hey guys, new to react and gsap here, also haven't used codepen before so I don't know how to import my models and use react there - thus the code looks messy and doesn't display anything but just putting it there for you guys to better visualise the problem I tried Scroll Trigger with 2d elements and they work fine, however when I try it with 3d elements it displays the usual error I see around about the missing plugin. I've tried searching for similar threads/problems but all those are for 2d elements and have not worked to solve my issue. My code with gsap.to works, but the scroll trigger afterwards doesn't work. I assume the problem is related to scroll trigger for 3d models? I wrapped it in a <Canvas> element. Error: Invalid property markers set to true Missing plugin? gsap.registerPlugin() Here is the code again in case codepen doesn't work: import React, { useEffect, useRef } from 'react'; import { useGLTF, PerspectiveCamera } from '@react-three/drei'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useControls } from 'leva'; import { useSound } from 'use-sound'; import * as THREE from 'three'; import { useFrame } from '@react-three/fiber'; import { OrbitControls, Html } from '@react-three/drei'; export default function BoxTest(props) { const { nodes, materials } = useGLTF('./models/box.glb') const ref = useRef(); const tl = useRef(); const { scale, rotation, position } = useControls({ scale: 0.8, rotation: [4.5, 6.5, 3], position: [-0.6, -1.4, -1] }); useEffect(() => { gsap.registerPlugin(ScrollTrigger); tl.current = gsap.timeline(); tl.current.to(ref.current.position, {y: 5, markers: true, ScrollTrigger: { trigger: tl.current, scrub: true, }}) }, []); return ( <> <ambientLight intensity={1} /> <OrbitControls enableZoom={false} /> <group dispose={null}> <group {...props} dispose={null}> <PerspectiveCamera makeDefault={false} far={100} near={0.1} fov={22.895} position={[7.359, 4.958, 6.926]} rotation={[-0.627, 0.71, 0.441]} /> <mesh ref={ref} scale={scale} position={position} rotation={rotation} geometry={nodes.Cube.geometry} material={materials.Material} /> </group> </group> </> ); } useGLTF.preload('./models/box.glb');