You are so good at this - no B.S, explaining the important parts... and tackling interesting problems in a straightforward no-hype manner. ❤ Lack of cyan / magenta backlighting also appreciated.
This is Awesome! This definitely helps me understand some of the animation timing and sequences. I am testing out page transitions using app router and Barbajs. With Gsaps new useGsap function which is basically a us effect and use layouteffect. It might be possible to link the routing. Though I’m using dynamic routing for my other pages It will definitely seem like a fun challenge. Always good content Oliver! You always come through in the perfect time!
Thanks a lot for this video buddy, I got to build this page transition by myself and it was really cool to see the way you built it. Keep bringing great content as always, big hug!
First of all, I requested you for a video on this topic in your previous video so thank you so much for making this! Just wish you would've used the app router since it is the more used in Next.js these days, but hey, thanks for the wonderful explanation on these animations. Getting a perspective on how to think and plan these animations with a certain mindset really helps a lot. Amazing videos as always. Cheers!
an extremely comprehensive content 👍🏻 definitely going to join your animation course once launches, I'm wondering about the plugin you used at 28:00 to calculate/detect the height in the third animation, what is it? it a time saver really
Thanks again for the great content, Olivier! I am kind of bummed that the page transitions are only possible using page router. Going to definitely look into this more and see if using page router jeopardizes any of the SEO benefits that app router has.
As a beginner, I've been thinking, with the app router, what if all the page (home, about, contact, etc.) is made as a components, then import those component into just one page to contain all these "page" components, then create the transition in that one page? And then hide all the component except one (if at home component, hide all component other than home component, and vice versa.) So we only have 1 page. I feel like this is a very roundabout way of doing it lol. 😂 The only thing that probably wouldn't work is the back button. Nice video btw! 👍
how to start to learn this all things from scratch? im a web designer, but all this animation and page transition is sick bro! do you have a training to learn all this things becoming a web developer? thanks bro! much love from philippines
awesome , how i do this in app router is simply have buttons as links and on press animate page first and then route , match that animation on loaded page
Hey oli bro, exactly what i was looking for my portfolio website, but im using app router though😢. Also can you look into some initial loading animation when a website loads? Thanks for osm content as always.❤
You don't necessarly need to use the App router for a portfolio, the Page router would work fine. And if you use Next.js, you probably don't need a loading animation if all your data is pre-redenred. However you could have an introduction when landing on the website, is that what you want me to take a look at?
I was waiting for that video since i saw your comment on your previous video, was really looking forward to you finding out how to make these transitions (even in a hacky way), do you really think there is no solution ? edit : Maybe you could wrap your app in a client provider that catches all path changes before they happen, plays the animation and then pushes the new path ? But then we can’t use Link and have them preload the page they point to i guess…
I have some animations in every page when first loaded, but its not visible since the page transition is being rendered on top of the page, but dennis’s page transition has a nice slide up animation, how do u implement that
Why The exit animation is not working in the slide animation in the project I've created? can you please tell me, I'm very frustrated by this error. and also the animation is not working without adding "use client" to the Inner/index.jsx file. The exit parameter is not working in the animation of slide.
i tried to do it with plain react but it wont work.. import "./App.css"; import { Outlet } from "react-router-dom"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; import { AnimatePresence } from "framer-motion"; export default function App() { return (
I've been trying to recreate this using Reac.js intead of next.js, but I'm having problems with react router. I can't seem to figure out how to show the proper route during the svg slide. I click on the page link, svg slides up (exit), but the div that uses useLocation from react router shows the exiting route, not the route that I clicked on. And then on enter of the svg it changes to the location it was supposed to show.
Dennis’s page transition runs fine in laptop but in mobile its super laggy, straight up unusable, in pageinsights this page transition loses 20-30 points in performance. Did any1 find a way to optimize this? At least help me optimize, i have no idea how to do so
this kind of still old as we dont have _app now in app folder, could you make second part of this video how to integrate in that, one solution i found is templete.js file
The tutorial is awesome but im having difficulty in only one thing that what version of next js u r using cuz rn the layout.jsx doesnt render the _app.js content. I tried using ai for help and some other vids for explaination but couldnt actually understand the setup part can someone pls explain how to tackle this situation
Amazing ! 😍😍😍😍😍😍😍😍😍😍 Is it possible to make the same thing in nextjs 14 ? There is no _app.tsx file anymore and you have to rely on layout.tsx template.tsx page.tsx and all this new invented stuff i tried to wrap my template.tsx component in but animations works only for the initial animation exit={{opacity:0}} - isn't works
Most underrated RUclips educator. Just look at the thing this man is coding, Amazing.
Thanks! It means a lot
You are so good at this - no B.S, explaining the important parts... and tackling interesting problems in a straightforward no-hype manner. ❤ Lack of cyan / magenta backlighting also appreciated.
Amazing tutorials as always ✨ please continue to make such Awwwards level animation tutorials 🙏🙏🙏🙏
Cheers!
You used my suggestion! Amazing work as always Oli👏
bro you are a gold mine for a developer like me. I love your videos, keep up the mentorship and continue to make such awesome content.
Thank you for the kind words! Glad this could be of help
This is my first time learning such cool interactivity with next.js. I’m watching it intently in Korea. Good luck.
Cheers!
I think I found the most underrated King of NextJS w/ Animations 👑😂
28:23 that joy of achievement we work for hahaha. Thank you, you're a real teacher.
Amazing work! Very educational and helpful! Please continue, never stop, waiting with eager your next content. 🎉👏
Thanks!
This is Awesome! This definitely helps me understand some of the animation timing and sequences. I am testing out page transitions using app router and Barbajs. With Gsaps new useGsap function which is basically a us effect and use layouteffect. It might be possible to link the routing. Though I’m using dynamic routing for my other pages It will definitely seem like a fun challenge.
Always good content Oliver! You always come through in the perfect time!
Thanks a lot for this video buddy, I got to build this page transition by myself and it was really cool to see the way you built it.
Keep bringing great content as always, big hug!
Cheers!
Dude, you are a genius simplified, how you don't have 1m views
haha I appreciate the support!
Wooow damn, I've just founded your channel and you win a new subscriber ! Damn you rock man, thanks a lot for your all of your works !
Thanks I appreciate it!
thanks for share your knowledge with us. I'm using it in my portfolio.
best mordern instructor i have seen so far
Thank you so much!
Please keep bringing your awesome content!
Big Hug!
For sure! Thank you for the support
As always, awesome tutorial!
Cheers!
just awesome
since long time i was in search of this type of tutorial .
First of all, I requested you for a video on this topic in your previous video so thank you so much for making this!
Just wish you would've used the app router since it is the more used in Next.js these days, but hey, thanks for the wonderful explanation on these animations. Getting a perspective on how to think and plan these animations with a certain mindset really helps a lot. Amazing videos as always. Cheers!
Glad you enjoyed. I wish it was available on the App router too, but it's not officially supported as of today
@@olivierlarose1 Hi bro! Do you have any idea if it will be supported any soon?
I learned a lot of things from this! Thanks a lot Olivier 🔥
Your videos are OP🔥
Thanks!
Bro, I'm litreally finding the way to make the page transition, and dennis portfolio was the inspiration for me as well❤️
Nice!
Your channel is amazing.
Thanks!
an extremely comprehensive content 👍🏻 definitely going to join your animation course once launches, I'm wondering about the plugin you used at 28:00 to calculate/detect the height in the third animation, what is it? it a time saver really
This guy is going to be famous real soon
Appreciate the support!
Great vid, remember to hydrate yourself bro.
you rapidly earned a new subscriber! i'm eager to see new videos!
Thanks! Glad you’re enjoying the content
top tier content 🔥🔥
Thanks again for the great content, Olivier! I am kind of bummed that the page transitions are only possible using page router. Going to definitely look into this more and see if using page router jeopardizes any of the SEO benefits that app router has.
FYI the page router does not jeopardize any of the SEO benefits, they have the exact same benefits SEO wise
@@olivierlarose1 ah ok!
nicely explained.
always op content 🔥🔥🔥🔥🔥
I thought motion exit was broken since next12?, I need to look into this again, good idea using the component.
Only works with the Page router
Great Video!
As a beginner, I've been thinking, with the app router, what if all the page (home, about, contact, etc.) is made as a components, then import those component into just one page to contain all these "page" components, then create the transition in that one page?
And then hide all the component except one (if at home component, hide all component other than home component, and vice versa.)
So we only have 1 page. I feel like this is a very roundabout way of doing it lol. 😂
The only thing that probably wouldn't work is the back button.
Nice video btw! 👍
That could work yeah, but that's a massive hack, I would just user the Page router instead lol
You explain so well
Appreciate it!
Super vidéo, bravo
My goat has posted... ❤
Thanks for the support!
Hey Oliver
Nice tutorial man
but can i use tailwind instead of custom css ?
will it work
Love your work! Do you know if there is any way of doing something similar with the App Router yet?
Great tutorial Olivier! Your videos are always on point.
I was wondering, is there any way to prevent scrolling while the transition is running?
if u found out how, please let me know
Thank you so much for a great tutorial! I have a question. Can we make different page transitions between different pages?
Great content 🎉
Appreciate it!
This is awesome! But for some reason, my exit animation isn't working. I'm using vite with react
Merci Olivier
Ça fait plaisir
how to start to learn this all things from scratch? im a web designer, but all this animation and page transition is sick bro! do you have a training to learn all this things becoming a web developer? thanks bro! much love from philippines
Amazing ❤
Thanks!
thanks bro
Appreciate it!
awesome , how i do this in app router is simply have buttons as links and on press animate page first and then route , match that animation on loaded page
Hey oli bro, exactly what i was looking for my portfolio website, but im using app router though😢.
Also can you look into some initial loading animation when a website loads? Thanks for osm content as always.❤
You don't necessarly need to use the App router for a portfolio, the Page router would work fine.
And if you use Next.js, you probably don't need a loading animation if all your data is pre-redenred. However you could have an introduction when landing on the website, is that what you want me to take a look at?
@@olivierlarose1 yes exactly, sorry for the confusion but yes the introduction animation is what i meant to say😁
I realy love your videos
Thank you for the support
this video is a classic
Thanks bro!
it's such a shame isn't it, that we can't make page transition in app router yet.
Just realised this when I’m almost done creating the website with app router lol
@@alvin3171997 currently, i much prefer nuxtjs when it come to simple web (i love their transition api) and choose nextjs when building a complex app.
100%. It's a shame but I'm hopeful it will be possible in the future with the View Transitions API
@@olivierlarose1 would like videos about it oli 🙌
I've done it with app router, lmk if you wanna see the repo, nextjs + gsap
Lets goooooowwww 🎉
How can I create this kind of text animation 1:56? Please make a video.
Just by curiousity, it should be able with the new App router now with intercepting routes right? Or am I mistaken?
You can use template in app router to add page transition
I don’t think so. You might be able to have an entry animation on page change but not an exit animation as of now
i love it
amazing bro I loved it can you please make the same animation with the app router
Give this guy a GitHub Walk of Fame star...
I appreciate that!
Really like your content. You from MTL?
Thanks and yes!
Hey, nice tutorial, could you also rebuild Dennis's Burger Menu animations?
nvm, found out ur other video which covered that, thanks anyway
The fact that you can't make a basic fade-out-in page transition with the new app router makes me question nextjs's sanity
wrapping the animation component around {children} in layout.ts should work no?
I was waiting for that video since i saw your comment on your previous video, was really looking forward to you finding out how to make these transitions (even in a hacky way), do you really think there is no solution ?
edit : Maybe you could wrap your app in a client provider that catches all path changes before they happen, plays the animation and then pushes the new path ? But then we can’t use Link and have them preload the page they point to i guess…
There are no official solutions as of now, but I'm not too worried, I think the new View Transitions API could eventually work with the App router
@@olivierlarose1yes certainly, and we’re gonna need safari to support view transitions too
I have some animations in every page when first loaded, but its not visible since the page transition is being rendered on top of the page, but dennis’s page transition has a nice slide up animation, how do u implement that
Why The exit animation is not working in the slide animation in the project I've created? can you please tell me, I'm very frustrated by this error. and also the animation is not working without adding "use client" to the Inner/index.jsx file.
The exit parameter is not working in the animation of slide.
Motion exit is broken since next12.
@@andres03ortega Bro I'm Still Working on That Project 😭. I've scraped this animation.
Thank You For Replying 😭
Awesome tutorial! Your source code page seems to be giving a 500 internal error though.
Fixed! Thanks for the heads up
🔥🔥🔥
i tried to do it with plain react but it wont work..
import "./App.css";
import { Outlet } from "react-router-dom";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import { AnimatePresence } from "framer-motion";
export default function App() {
return (
);
}
I've been trying to recreate this using Reac.js intead of next.js, but I'm having problems with react router. I can't seem to figure out how to show the proper route during the svg slide. I click on the page link, svg slides up (exit), but the div that uses useLocation from react router shows the exiting route, not the route that I clicked on. And then on enter of the svg it changes to the location it was supposed to show.
cool!
Appreciate it
Dennis’s page transition runs fine in laptop but in mobile its super laggy, straight up unusable, in pageinsights this page transition loses 20-30 points in performance.
Did any1 find a way to optimize this? At least help me optimize, i have no idea how to do so
this kind of still old as we dont have _app now in app folder, could you make second part of this video how to integrate in that, one solution i found is templete.js file
This is unrelated but, bro is actually a bro! You're cute btw 😂😂
One question when I am using next/link , it does not animating instead it directly go to page, i have to use a tag which is reloading whole page.
The tutorial is awesome but im having difficulty in only one thing that what version of next js u r using cuz rn the layout.jsx doesnt render the _app.js content. I tried using ai for help and some other vids for explaination but couldnt actually understand the setup part can someone pls explain how to tackle this situation
When you npx create-next-app@latest choose "no" when it prompts you to choose yes or no for the app router...
can you do gsap ones, framer is overratted
How did you configure your scss to work with components without importing? I'm new to frontend :D
Simply run npm install sass and it should compile right away no need for other configs
now how can i do that in app router ?
should we use gsap + react ? or framer motion + react ?
framermotion is free and user friendly so i’d go with that
Gsap with React works fine, but personally I think Framer Motion with React fits better
Make a app route page transition please
what is your camera bro ?
Can you create video for nuxt
Can you please explain briefly why page transition is not possible in app router?
There’s an open issue check it out here: github.com/vercel/next.js/issues/49279
bro i want the text animation help plz
pages for small? I can't agree, pages is there for long time, and app is new
I agree, I think small might not be the right word. The App router is good for web apps basically, so the page Router is fine for “simple” MPA’s
pls make framer motion tutorial
Noted!
Why can’t we use app router ?
The internal routing is not made the same, there's no way of officially making a page transition using the App router, you would have to find a hack.
uh oh sorry is it works in app router ?
No it does not
Why not app router???
Not officially supported as of today
Bro Your website is showing a internal server error ,can you check it.
I don't see it myself, you mind giving the failing url?
U r osm bro
Appreciate it!
Amazing ! 😍😍😍😍😍😍😍😍😍😍
Is it possible to make the same thing in nextjs 14 ?
There is no _app.tsx file anymore and you have to rely on layout.tsx template.tsx page.tsx and all this new invented stuff
i tried to wrap my template.tsx component in but animations works only for the initial animation
exit={{opacity:0}} - isn't works
with the App router no you can't, it's not officially supported