gsap.from() saving initial value and using it

[sandeepdev]

import React, { useRef } from 'react'

import { useGLTF } from '@react-three/drei'

import gsap from 'gsap'

import { useGSAP } from '@gsap/react';

 

export function BeerCan(props) {

 

  const { nodes, materials } = useGLTF('/beercannew.glb')

  const canRef = useRef(null)

 

  useGSAP(() => {

    let ctx = gsap.context(() => {

      gsap.from(canRef.current.position, { y: 10, duration: 1, })

 

    })

    return () => ctx.revert()

 

  }, [])

  return (

    <group ref={canRef} position={[-0.829, 4.1, -4.274]} rotation={[-0.1, 1.35, 0]} scale={[1.11, 2.0, 1.11]}>

      <mesh geometry={nodes.Cylinder_1.geometry} material={materials['top of can']} />

      <mesh geometry={nodes.Cylinder_2.geometry} material={materials.image} />

    </group>

  )

}

 

useGLTF.preload('/beercannew.glb'),once i save it ,it works well,but after i reload my page it takes previous position as initial position

[GreenSock]

I'm not quite sure what you're asking, but you don't need to use a context inside the useGSAP() hook - it does that for you:

// BAD
useGSAP(() => {
  let ctx = gsap.context(() => {
    gsap.from(canRef.current.position, { y: 10, duration: 1, })
  });
  return () => ctx.revert()
}, []);

// GOOD
useGSAP(() => {
  gsap.from(canRef.current.position, { y: 10, duration: 1, })
});

If you still need help, please provide a minimal demo, like in Stackblitz. Here's a starter template you can fork: 

https://stackblitz.com/edit/gsap-react-basic-f48716

[sandeepdev]

I'm just trying to simple animation of can landing from y position 10 to its initial position between the text,when i save my code initially it works,but once i start reloading in browser,its initial position becomes y position so it goes down....

 

https://stackblitz.com/~/github.com/Sandeep18JS/OakHaven-Beer,

[GreenSock]

I looked at your demo and I refreshed the page a bunch of times and I don't see any problems. I'm sure I'm missing something - how do I replicate the issue? Can you please be very specific about the steps to reproduce? 

 

Also, it's a good idea to register the useGSAP hook before you use it:

gsap.registerPlugin(useGSAP);

 

[sandeepdev]

My bad i guess..my communication isn't good.

goes through this video -  https://www.veed.io/view/42dedbd3-0853-418b-83de-75ccb4dba21a?panel=share&sharingWidget=true

This is what im trying to do....

 

[GreenSock]

I don't think that's a GSAP issue - it might be a rendering issue with your 3D tool. If I log out the actual values that GSAP is setting, they're all correct: 

useGSAP(() => {
    console.log("original", canRef.current.position.y);
    gsap.from(canRef.current.position, { 
      y: 10, 
      duration: 1,
      onUpdate() {
        console.log("update", canRef.current.position.y);
      },
      onComplete() {
        console.log("final", canRef.current.position.y);
      }
    })
  })

 

Interestingly, if you set immediateRender: false, and delay: 0.01, it seems to work. So there's something about the way your 3D stuff initially renders that's throwing things off. 🤷‍♂️

[sandeepdev]

Yea thank you  so much fo your help, its working now if i use immediateRender: false, and delay: 0.01,the other 3d models are working fine normally just this one is odd...