Jump to content
Search Community

Animating a Dialog element in React/NextJS

dubfonik test
Moderator Tag

Recommended Posts

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:


Link to comment
Share on other sites

8 hours ago, Rodrigo said:



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:



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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...