GSAP/NextJS Exit Transition

[So Cored]

Hi Team,

 

Hope everyone is doing great. Need your help with my project guys!

 

I'm trying to increase the animation delay of the exit transition but for some reason it's not letting me to do so.

 

I want the h1 tag(WELCOME TO THE HOME PAGE) to exit much longer basically. So I can do more animation on top of it.

 

Here is the link of the demo page.

 

Thank you guys! Appreciate your help

[GSAP Helper]

Hm, when I click that link I get a page that says: "CodeSandbox Projects needs access to your GitHub repositories data. Update your permissions to access to the full experience." (and I don't want to click that)

 

Can you please provide a minimal demo that doesn't require security access like that? Better yet, a CodePen would be ideal (if possible).

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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

[Rodrigo]

Hi @So Cored and welcome to the GreenSock forums.

 

Please be more specific regarding the framework you're using for this. In the thread title you mention NextJS but the sandbox sample you linked uses Gatsby. The reason is because depending on the framework is the best recommended approach to solving this.

 

For NextJS the recommendation would be using React Transition Group with GSAP and for Gatsby it  would be the Transition Link Plugin.

 

Happy Tweening!!!