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/
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!!!!
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
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.
I think you are one of the best Creative UI devs on UA-cam 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 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.
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.
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?
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?
🤔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.
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
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 ?
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
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.
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.
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
@@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.
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/
Simply no words for the quality of your content, hats off to you. You are a true gem!! Thank you.
Cheers, I appreciate it
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!!!!
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 . 😊😊
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
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.
If only this worked with app router :(. Great work though, your explain everything very well!
Just discovered your channel. This is golden!!
Awesome explanation, can you please also suggest a way to add Intro animation in nextjs Page Router
Great work as always Oli!
I think you are one of the best Creative UI devs on UA-cam 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?
I’m from Montreal, Quebec yes and this page transition is with the page router only
@@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.
wow amazing example ! Please make more tuts using nextjs page router and gsap, keep up !
Preloader animation olivier please 🙏
Noted!
You can find a small bit of it in the 2nd video of his playlist..Vid - "Rebuilt Awwwards Website..."
Thanks for this content buddy, all the best for you always!!
Cheers bro
This is amazing! great work.
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.
If the "sleeper build" was a channel.
What you mean
Totally agree
Your content is always top-notch! Thank you. Could you elaborate on why that approach is not supported on the app router, please?
Goated video as always ✨🎉
so much good information, thank you
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?
Hey! When will your online courses be accessible? Amazing work btw.
Loved to see your videos
your video is awesome, and your name is weird olivier. Thanks its a very simple implementation with good instincts
Nice video. It’s possible in App Router with templates. (Layouts x templates).
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.
Not possible
amazing man, thanks for the tip
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?
Nevermind... I see you use Framer Motion on other projects 😄 Great content! 🦾
Great stuff!
Amazing!
but how nextjs doesn't ask you to add 'use client' in places where you use hooks?
thanks for this!
Any idea when this would be useful for app router next js?
For a real live project using Next.js would you rather recommend Framer Motion or GSAP?
Either is fine, but personally I would use Framer Motion
Man wat camera do you use ? your videos are really sharp !
I use my Iphone haha
Add a route outside your header and the route will stop working because of the transition component.
Hey is there a way to make the animation mode sync. like play exit and enter animation simultaneously
Plesse update this with app router
Thankyou in advance
🤔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.
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
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 ?
🔥🔥🔥🔥
And why the page router, that’s old stuff
did you already apply for Next with app version ?
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
Page router gets a lot of hate for nothing haha, it still works fine for presentation type websites
@@olivierlarose1 you know there's people building something else but useless awwards shitty agency websites no one using, right?
When it comes to page animations, does GSAP have any advantages over Framer Motion or vice versa?
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.
Can you make it again but using motion framer?
I'm still waiting for web course😅❤
Coming soon! Working on new modules including shaders and complex animations
@@olivierlarose1 Thank you ❤
Am I mistaken, or you can use template on the app router for page transition!! 🙁
Yes ua-cam.com/video/VnRC8PyzBT8/v-deo.htmlsi=fNV-NVm7_0pNIuRR
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.
Chad video 💯💯
what’s your webcam?
hey oli! sent you a discord dm with a way to these transitions in nextjs with app router :)
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
@@olivierlarose1 ohh didnt realize that was what you meant, I thought you meant a literal button, sorry!
First viewer first comment , nice video oliv
Cheers bro
Pages router...USELESS!
you can do this with a template.tsx file. check next docs. basically what he's making
@@jason.zubiate there's no exit transition in App Router, you 🤡
Meh page router…
You can do page transitions with app router as well using templates.
Send me a link! Would be surprised if it does not fall in either one of the two categories I mentioned in the intro
@@PaperKrane no you can't
@@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.
@@PaperKrane templates has BROKEN exit transitions. what are you talking about? you have problems with your vision?
Always inspiring!! Keep it up bro