Mounting and unmounting animations with React

[Imo]

Hello, I'm trying to implement mounting and unmounting animations to conditionally rendered elements in my React component, similar to the example given in the Advanced React docs:
 

{!joined && (
  <div ref={usernameFormRef}>
    <Button onClick={() => onSubmit()}>
      Join
    </Button>
  </div>
)}
{joined && (
  <div ref={controlsRef}>
    <Button onClick={() => onLeave()}>
      Leave
    </Button>
  </div>
)}

const [joined, setJoined] = useState(false);
const { contextSafe } = useGSAP({ scope: controlsScope });
const tl = gsap.timeline();

const onSubmit = contextSafe(() => {
  tl.to(usernameFormRef.current, {
    opacity: 0,
    yPercent: 200,
    duration: 0.7,
    ease: "back.in(2)",
    onComplete: () => setJoined(true),
  });
  tl.from(controlsRef.current, {
    opacity: 0,
    yPercent: 200,
    duration: 0.7,
    ease: "back.out(2)",
  });
});

const onLeave = contextSafe(() => {
  tl.to(controlsRef.current, {
    opacity: 0,
    yPercent: 200,
    duration: 0.7,
    ease: "back.in(2)",
    onComplete: () => setJoined(false),
  });
  tl.from(usernameFormRef.current, {
    opacity: 0,
    yPercent: 200,
    duration: 0.7,
    ease: "back.out(2)",
  });
});

 

The problem I faced was that the onComplete function seemed to fire at the end of the timeline, not between each tween. This results in the tl.to unmounting/exit animation working as expected unlike tl.from which results in an abrupt mounting of the controlsRef element.   I have also tried implementing without a timeline but ran into the same results. What exactly am I missing here? Any help would be much appreciated. I have also attached my component directly if more context is needed. 

MultiplayerControls.tsx

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. 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. ✅

[Imo]

Woops sorry here's a rough Stackblitz of the problem:

https://stackblitz.com/edit/nextjs-q86vud?file=app%2Fcomponents%2FControls.tsx

[GreenSock]

That looks like all React-related logic. 

1. You were adding a .from() animation to the timeline that targets usernameFormRef.current...but at the end of the previous tween you're calling setJoined() which triggers a re-render of the component, so that element that you were tweening with the from() tween no longer exists! It was replaced by React with something else or removed altogether. 
2. When you setJoined(), React takes a little time to actually create/render the new state, so you have to wait for React to finish that before you can actually animate what it creates. That's the perfect case for a useGSAP() with a dependencies Array - it'll get triggered as soon as a dependency changes and is rendered. 
3. You created your timeline instance outside of any context, therefore it won't get reverted or cleaned up properly. 
4. You don't really need to set a scope if you're never using any selector text, just so you know. It doesn't hurt anything, of course. It's just that it is only useful for selector text. 

Are you trying to do this?:

https://stackblitz.com/edit/nextjs-7ex2g3?file=app%2Fcomponents%2FControls.tsx

[Imo]

On 3/24/2024 at 4:59 AM, GreenSock said:

That looks like all React-related logic. 

1. You were adding a .from() animation to the timeline that targets usernameFormRef.current...but at the end of the previous tween you're calling setJoined() which triggers a re-render of the component, so that element that you were tweening with the from() tween no longer exists! It was replaced by React with something else or removed altogether. 
2. When you setJoined(), React takes a little time to actually create/render the new state, so you have to wait for React to finish that before you can actually animate what it creates. That's the perfect case for a useGSAP() with a dependencies Array - it'll get triggered as soon as a dependency changes and is rendered. 
3. You created your timeline instance outside of any context, therefore it won't get reverted or cleaned up properly. 
4. You don't really need to set a scope if you're never using any selector text, just so you know. It doesn't hurt anything, of course. It's just that it is only useful for selector text. 

Are you trying to do this?:

https://stackblitz.com/edit/nextjs-7ex2g3?file=app%2Fcomponents%2FControls.tsx

Yup that's exactly what I was looking for thanks!