How to Make Page Transitions using Next.js and GSAP

[@olivierlarose1]

When using GSAP in production, you might have FOUC (flash of unstyled content) , you can avoid that by adding an initial CSS value like opacity: 0. You can read more here: gsap.com/resources/fouc/

[@alvarobyrne]

I am a beginner, just took part of one react (native) project and (as you may see for what I am about to say never did nextjs work) it surprises me that nextjs doesn't provide (never better said) a global context! Very well done! Note for self: `Component` (arg of `App`) has a `key` prop

[@TheRealG-yt9yj]

SIR THANK YOU VERY MUCH . as a beginner we have so many doubts and stuff . The way your content helps is just NEXT LEVEL . THANK YOU . 😊😊

[@flavioczuk]

Brooooo you´re a legend!!! I´ve stumbled upon the link you´ve mentioned on the video by John Polacek but I was having a hard time understanding everything... With your explanation everything is now crystal clear and I was able to update my project and implement everything that way I had planned! Thank you very much and keep up the awesome work!!!!

[@wailokwang]

Olivier, thanks for your vids. I just wanted to mention that the Next.js team doesn't seem to care about page transitions on app routes, even though it's been released since Next.js 13 (and since you started uploading videos). Lol.

[@elcho007]

Simply no words for the quality of your content, hats off to you. You are a true gem!! Thank you.

[@olivierlarose1]

Cheers, I appreciate it

[@lThePotatoCrew]

If only this worked with app router :(. Great work though, your explain everything very well!

[@zjebinsky]

Just discovered your channel. This is golden!!

[@TheBorninmotion]

wow amazing example ! Please make more tuts using nextjs page router and gsap, keep up !

[@edojoshua]

Great work as always Oli!

[@MrJfergs]

I think you are one of the best Creative UI devs on KZbin if not the entire internet. Thank you for your content, I wanted to ask if you are from France? It seems that many of the devs within this niche are from France or Quebec. Merci beaucoup pour votre travail. I wanted to ask if this transition will be using the Pages or App router in next.js?

[@olivierlarose1]

I’m from Montreal, Quebec yes and this page transition is with the page router only

[@MrJfergs]

@@olivierlarose1 Nice, I ma actually not too far from Montreal myself. I have yet to find a good solution for page transitions using the app router yet.

[@dewann99]

If the "sleeper build" was a channel.

[@kevyyar]

What you mean

[@tatyabicchu21]

Totally agree

[@mateuspaula_dev]

Thanks for this content buddy, all the best for you always!!

[@olivierlarose1]

Cheers bro

[@funstationatlanta]

This is amazing! great work.

[@nellymotion]

so much good information, thank you

[@seanzhang3873]

This is great, but can you make a tutorial on Framer Motion with Next.js 13+, using the new app router. I am struggle to create transition out animation and cannot find much resource on this.

[@BharatBhandari-s5i]

Awesome explanation, can you please also suggest a way to add Intro animation in nextjs Page Router

[@rohitpandey4411]

your video is awesome, and your name is weird olivier. Thanks its a very simple implementation with good instincts

[@devwithzain]

Preloader animation olivier please 🙏

[@olivierlarose1]

Noted!

[@thisissahaj]

You can find a small bit of it in the 2nd video of his playlist..Vid - "Rebuilt Awwwards Website..."

[@shivkumar6374]

Loved to see your videos

[@ridwanajibola3038]

Thanks a lot for this.

[@olawanletemitayo2174]

Goated video as always ✨🎉

[@electroheadfx]

amazing man, thanks for the tip

[@TomaszOstroga]

Your content is always top-notch! Thank you. Could you elaborate on why that approach is not supported on the app router, please?

[@brittonwalker7341]

How would you approach this if you wanted the entry animation to animate in before the old content exits? For example, have the new content swipe up over the old content and then handle the removal of the old content?

[@marcelsdev]

Ever thought of using or replacing GSAP with Framer Motion? Only reason I don't use GSAP for products is because some library features are priced and I can replicate them using Framer Motion. Your thoughts?

[@marcelsdev]

Nevermind... I see you use Framer Motion on other projects 😄 Great content! 🦾

[@AntTheOne777]

Hey! When will your online courses be accessible? Amazing work btw.

[@fokspoks]

but how nextjs doesn't ask you to add 'use client' in places where you use hooks?

[@jjuuiiccyyjj]

thanks for this!

[@thomasfichtner9738]

Hey is there a way to make the animation mode sync. like play exit and enter animation simultaneously

[@stoggys]

Great stuff!

[@hrsikeisa]

Man wat camera do you use ? your videos are really sharp !

[@olivierlarose1]

I use my Iphone haha

[@dmnkb]

For a real live project using Next.js would you rather recommend Framer Motion or GSAP?

[@olivierlarose1]

Either is fine, but personally I would use Framer Motion

[@eduardaskuliesa8308]

I have created page transitions with custom Links, and they have entry and exit animations. Everything works fine, but I don't get it why this is wrong ?

[@ninjagaskin]

Any idea when this would be useful for app router next js?

[@xberna8156]

Amazing!

[@spacemanXVI.]

🔥🔥🔥🔥

[@joostschuur]

When it comes to page animations, does GSAP have any advantages over Framer Motion or vice versa?

[@olivierlarose1]

No the final result is quite similar. I would say Framer Motion has a faster and cleaner implementation and in my experience GSAP has some FOC problems that you need to manage.

[@MARSTEE-official]

Nice video. It’s possible in App Router with templates. (Layouts x templates).

[@PaperKrane]

I wanted to say that too. Kind of confused as to why he claims it's 'hacky' by using onClick={} on top of a Next Link component.

[@Ss-zg3yj]

Not possible

[@electroheadfx]

did you already apply for Next with app version ?

[@KaluKarKK]

Am I mistaken, or you can use template on the app router for page transition!! 🙁

[@devwithzain]

Yes kzbin.info/www/bejne/jJ-1dGuGrt91iposi=fNV-NVm7_0pNIuRR

[@olivierlarose1]

I saw this video, and like I said in the beginning of the video, I am not comfortable using this approach for a client, as it overrides the Link component with a button and an on click event, which is not good for SEO and accessibility.

[@jheanbrizadao2429]

[@liamrahimian1588]

Add a route outside your header and the route will stop working because of the transition component.

[@quebuena111]

And why the page router, that’s old stuff

[@puturangga2024]

Can you make it again but using motion framer?

[@monarchgam3r]

This solution is kinda old and only works with pages router, unless it’s an old or already existing project, app is just better to use and recommended, unfortunately there doesn’t seem to be a way to do page transitions with app router

[@olivierlarose1]

Page router gets a lot of hate for nothing haha, it still works fine for presentation type websites

[@Ss-zg3yj]

@@olivierlarose1 you know there's people building something else but useless awwards shitty agency websites no one using, right?

[@fiha_khair_yt]

I'm still waiting for web course😅❤

[@olivierlarose1]

Coming soon! Working on new modules including shaders and complex animations

[@fiha_khair_yt]

@@olivierlarose1 Thank you ❤

[@bhuvya11]

Chad video 💯💯

[@DuBritoo]

what’s your webcam?

[@CodeCraftersStudio]

Plesse update this with app router Thankyou in advance

[@roguegoblin2407]

hey oli! sent you a discord dm with a way to these transitions in nextjs with app router :)

[@olivierlarose1]

Hey man, thanks for the ressource. Unfortunately, you’re doing it in one of the two ways I described in the beginning of the video (page transition with an on click on a button), which is not good for SEO and accessibility. I personally would not feel comfortable using that in production for a client. As of now, if I want a page transition, I use the Page router, which still works fine for presentation websites. Cheers

[@roguegoblin2407]

@@olivierlarose1 ohh didnt realize that was what you meant, I thought you meant a literal button, sorry!

[@alexnjagi3169]

🤔I wouldn't recommend saving children components to the state, it might raise performance concerns for large component trees. Instead of using the state to listen for children changing, can't we just use `Router. events` from next js, and anytime we move to another page, we can perform some action.

[@olivierlarose1]

I agree with you, but a problem I see with using router events is we wouldn’t have control over the displaying of the pages, so I don’t see how we could delay the page transition to leave space for the exit animation

[@ayoubdev8019]

First viewer first comment , nice video oliv

[@olivierlarose1]

Cheers bro

[@Ss-zg3yj]

Pages router...USELESS!

[@jason.zubiate]

you can do this with a template.tsx file. check next docs. basically what he's making

[@Ss-zg3yj]

@@jason.zubiate there's no exit transition in App Router, you 🤡

[@StephenRayner]

Meh page router…

[@PaperKrane]

You can do page transitions with app router as well using templates.

[@olivierlarose1]

Send me a link! Would be surprised if it does not fall in either one of the two categories I mentioned in the intro

[@Ss-zg3yj]

@@PaperKrane no you can't

[@PaperKrane]

​@@Ss-zg3yj Lol I wrote an entire message on this chain of how you *can* but it looks like the channel creator deleted it because it disproves his point. Research Next.js 'templates' that are rendered inside of layout.js. You can create an animation in and build your own Next.js Link component that just ads an animation on the outro and then uses Next.js router to push the next page. I have apps in production with this but hey, if you want to live in a bubble and believe it isn't possible, that is A-OK with me.

[@Ss-zg3yj]

@@PaperKrane templates has BROKEN exit transitions. what are you talking about? you have problems with your vision?