oliver1999

Hi, I'm trying to use ScrollMagic and GSAP to rotate a specific element and everything is fine until I add an ease animation with the following code : tl.fromTo(rotateGSAP.current.rotation , { y:0, }, { y:40, duration:400, ease:'Power3.easeInOut' } ); the problem is that the effect applies to the whole scrolling process while I want with each single scroll I do the animation goes with an ease effect. my code in React: useEffect(() => { ScrollMagicPluginGsap(ScrollMagic, gsap); const tl = new TimelineMax(); TimelineMax.defaultOverwrite = false var controller = new ScrollMagic.Controller({ refreshInterval: 1 }); tl.fromTo(rotateGSAP.current.rotation , { y:0, }, { y:40, duration:400, ease:'Power3.easeInOut' } ); const scene = new ScrollMagic.Scene({ triggerElement: ".startBottle", triggerHook: "onLeave", duration: 5930, }) .setTween(tl) .addTo(controller) .reverse(true) })

Thank you , my problem solved by using useRef and pass it to the <group> like following code: ```` const rotateGSAP = useRef() const tl = new TimelineMax(); tl.fromTo(rotateGSAP.current.rotation , { y:0, }, { y:40, } ); return ( <group ref={rotateGSAP} rotation={[Math.PI / 2, 0, 0]}> <mesh geometry={nodes.defaultMaterial.geometry} material={materials.bottle} /> <mesh geometry={nodes.defaultMaterial_1.geometry} material={materials.wrap} /> </group> ); ````

Thank you, can you help me to import a 3d object (e.g. a bottle) and then rotate it by GSAP?

I want to clone this bottle and animations : https://meadlight.com/en I cant set it on CodeSandbox because there was a problem by ``` import { useGLTF } from "@react-three/drei" ``` Can I record a video from codes & result in browser?

Hi all, I want to rotate a 3D object using GSAP. I imported my 3D model using gltfjsx so it became a JavaScript script Now I do not know what to select and rotate it. In the following code I was able to get the rotation of <group> and change it, but unfortunately it does not re-render Because I work at React. const SpinnigMesh = ({pos , args , color , speed=1 ,...props })=>{ const [startRotate , setStartRotate] = useState(false) const [value , setValue] = useState(0) useEffect(() => { ScrollMagicPluginGsap(ScrollMagic, gsap); gsap.registerPlugin() const tl = new TimelineMax(); TimelineMax.defaultOverwrite = false var controller = new ScrollMagic.Controller(); tl.to(grp.props.rotation , { 1: 122, duration:0.5, } ); const scene = new ScrollMagic.Scene({ triggerElement: ".s2", triggerHook: "onLeave", }) .setTween(tl) .addTo(controller) .reverse(true) }) const mesh = useRef(null); const group = useRef() const { nodes, materials } = useGLTF('../../../../wine.glb') const grp = <group rotation={[Math.PI / 2, 0, 0]}> <mesh geometry={nodes.defaultMaterial.geometry} material={materials.bottle} /> <mesh geometry={nodes.defaultMaterial_1.geometry} material={materials.wrap} /> </group> return( <group rotation={[0,15.2,-0.3]} scale={1.5,1.4,1.4} ref={group} {...props} dispose={null}> <group ref={mesh} rotation={[-Math.PI / 2, 0, 0]}> {grp} </group> </group> ) }