dubfonik Posted May 22 Share Posted May 22 I'm trying to animate a dialog element via a timeline: User clicks button to toggle The backdrop appears 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 22 Share Posted May 22 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! Link to comment Share on other sites More sharing options...
dubfonik Posted May 23 Author Share Posted May 23 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted May 23 Share Posted May 23 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now