Page Transition using Nextjs

[DhavalV]

Hello,

 

I came across a website from the Showcase on GSAP, and I really liked the animation they'd done when switching/changing between the pages, and below is the website for the reference.

 

https://andersonsupply.com/

 

I tried to checkout the GSAP Products but unable to find what kind of Page Transition they'd used using GSAP, can anyone help me with that how I can add the similar Page Transition in Nextjs using GSAP?

 

waiting for your valuable reply,

 

Regards,

Dhaval

[mvaneijgen]

Hi @DhavalV welcome to the forum! 

 

This would probably just use the main GSAP library, maybe it's bit confusing, but GSAP is a toolbox which hands you all this amazing tools on which you can build what ever you want. There isn't really a "product" that does this in GSAP, but if you can think it up you can probably build it with tools provided. 

 

I would say they just scale out the main element with all the content, but a clipPath over it and then translate it to the left or right. This all isn't that complicated,  the work would go into hooking it up to your framework of choice.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you could create a minimal demo we could take a look at what you're struggling with. If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Hope it helps and happy tweening! 

[DhavalV]

2 minutes ago, mvaneijgen said:

Hi @DhavalV welcome to the forum! 

 

This would probably just use the main GSAP library, maybe it's bit confusing, but GSAP is a toolbox which hands you all this amazing tools on which you can build what ever you want. There isn't really a "product" that does this in GSAP, but if you can think it up you can probably build it with tools provided. 

 

I would say they just scale out the main element with all the content, but a clipPath over it and then translate it to the left or right. This all isn't that complicated,  the work would go into hooking it up to your framework of choice.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you could create a minimal demo we could take a look at what you're struggling with. If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Hope it helps and happy tweening! 

I don't have any idea how actually they've made up with GSAP, due to which I can't have any minimal demo to show where I'm struggling,

[mvaneijgen]

Then I can not help you. You are welcome to post in the "Jobs & Freelance" forum for paid consulting.

[Rodrigo]

Hi,

 

One of the master minds behind that amazing site is @elegantseagulls. Ryan actually share some of the ingredients of their secret sauce in this video:

Basically the most important part is correctly setup Next and React Transition Group in order to use the particular animation you want to create. I plagiarized Ryan's work (fingers crossed 🤞 that we don't get into an intellectual property battle here ) in this simple example (still  WIP):

https://codesandbox.io/s/gsap-page-transitions-in-react-c9ioz0

 

Also I have a minimal setup for Next in this repo (live example in the repo):
https://github.com/rhernandog/next-gsap-transitions

 

Finally be aware that using page transitions in Next can come with some side effects:

https://dev.to/koraysels/comment/1f341

I don't know if Ryan and the Elegant Seagulls team ran into this or they don't use css modules for styling in Next (it seems that they lean towards styled components, but He should be the one clarifying that).

 

Happy Tweening!