React three fiber tween not working on the first render

[streetRAT]

https://codesandbox.io/s/keycap-demo-forked-t207rm?file=/src/Keyboard/Keyboard.jsx

 

Hello everyone 🙂 I have had the pleasure of stumbling across this lovely software and community and decided it was the perfect way to tackle one of my more ambitious projects. Documenting my most ambitious project.

In the codeSandBox above I have a basic react three fiber scene with a render of my custom keyboard. The aim is to get the keyboard to float around and have the pieces be blown up as I talk about them. Starting with the basic movement and scrollTriggers everything was working as expected, timelines are really just...chefs kiss.

When it came time to share the code and see how it worked on my other machines I realized that the animation would not trigger on the first render. If I change a line of code or remove a variable, for example (`line 83 - keybRef.current`, Keyboard.jsx) can be removed and when you save the sandbox the animation works. When you reload however the animation will not work.

I am facing even more strange behavior on the local side that I am sure is the same issue showing up in a different way as the sandbox is not identical to my dev environment.

I hope I have provided enough information.

Thanks 🙂

[GreenSock]

Welcome to the community, @streetRAT

 

I don't have much time to dig into all the code right now, but one thing I noticed right away is that you're calling the wrong method in your cleanup function: 

// bad
contextRef.current && contextRef.current.kill();

// good
contextRef.current && contextRef.current.revert();

Does that resolve things for you? 

 

I'm curious if you saw kill() being called in a demo somewhere. Like...what made you think that was the right method to call? I want to make sure we don't have a bad demo somewhere that's misleading people. As far as I know, every demo of gsap.context() shows revert() being called.

[streetRAT]

Thanks for the reply. I think I have narrowed the problem down to the ref not being defined early enough. tryingg to figure out why that is happening.

revert() did not fix things unfortunately. I found it in one of these forums. I can't find the actual link but will post it when I do. thanks anyway 🙂

 

[devanshdsoni]

@streetRAT hey, did you get any soltuion for this issue?

 

I am also facing the same issue, please help if you have got any soltions. 

 

Regards.

[GSAP Helper]

Hi @devanshdsoni and welcome to the GSAP Forums!

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[GSAP Helper]

Hi @devanshdsoni 

 

Without a minimal demo, it's very difficult to troubleshoot. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅