Animating a Dialog element in React/NextJS

[dubfonik]

I'm trying to animate a dialog element via a timeline:

1. User clicks button to toggle
2. The backdrop appears
3. The main element slides in from offscreen

All of this would be then reversed when the user closes the dialog.

 

I'm really having trouble with my setup, and unsure if the issue lies with React, or with NextJS. For some reason, the first time I click, the dialog's backdrop doesn't appear. It appears from the second time, though. It's like it's not getting triggered correctly or something.

 

I've created a simple Stackblitz to show a version of my own code:

https://stackblitz.com/edit/stackblitz-starters-pkmtaq?file=app%2Fpage.tsx

[Rodrigo]

Hi,

 

I'm not really following your setup TBH. This is the most reliable way I know to create and handle a modal in React using GSAP and React Transition Group:

https://stackblitz.com/edit/vitejs-vite-vlpbvk?file=src%2FModal.jsx,src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[dubfonik]

8 hours ago, Rodrigo said:

Hi,

 

I'm not really following your setup TBH. This is the most reliable way I know to create and handle a modal in React using GSAP and React Transition Group:

https://stackblitz.com/edit/vitejs-vite-vlpbvk?file=src%2FModal.jsx,src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

Hi Rodrigo, thanks for your reply. However, it's quite different from the original. I want to use the <dialog> element (for all its benefits). Also, I was using the useGSAP() function.

[Rodrigo]

Hi,

 

Yeah I'm not really following what you're trying to do here, maybe you're trying to create something like Toastify?:

https://apvarun.github.io/toastify-js/

 

If you want to just toggle a GSAP instance this would be the approach:

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!