Most underrated KZitem educator. Just look at the thing this man is coding, Amazing.
@olivierlarose1
8 ай бұрын
Thanks! It means a lot
@dvkerns
Ай бұрын
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.
@Way_Of_The_Light
8 ай бұрын
Amazing tutorials as always ✨ please continue to make such Awwwards level animation tutorials 🙏🙏🙏🙏
@olivierlarose1
8 ай бұрын
Cheers!
@0hyeon500
8 ай бұрын
This is my first time learning such cool interactivity with next.js. I’m watching it intently in Korea. Good luck.
@olivierlarose1
8 ай бұрын
Cheers!
@mianshahzeb4801
8 ай бұрын
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.
@olivierlarose1
8 ай бұрын
Thank you for the kind words! Glad this could be of help
@muneeburrehman547
7 ай бұрын
I think I found the most underrated King of NextJS w/ Animations 👑😂
@wyarn
5 ай бұрын
28:23 that joy of achievement we work for hahaha. Thank you, you're a real teacher.
@edojoshua
8 ай бұрын
You used my suggestion! Amazing work as always Oli👏
@fettah179
8 ай бұрын
Dude, you are a genius simplified, how you don't have 1m views
@olivierlarose1
8 ай бұрын
haha I appreciate the support!
@HA-R-E
8 ай бұрын
thanks for share your knowledge with us. I'm using it in my portfolio.
@stefantrajkov7877
7 ай бұрын
Amazing work! Very educational and helpful! Please continue, never stop, waiting with eager your next content. 🎉👏
@olivierlarose1
7 ай бұрын
Thanks!
@JudahSullivan
6 ай бұрын
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!
@therealsharat
8 ай бұрын
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!
@olivierlarose1
8 ай бұрын
Glad you enjoyed. I wish it was available on the App router too, but it's not officially supported as of today
@gabrielm4979
7 ай бұрын
@@olivierlarose1 Hi bro! Do you have any idea if it will be supported any soon?
@mateuspaula_dev
8 ай бұрын
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!
@olivierlarose1
8 ай бұрын
Cheers!
@MrHardliker
7 ай бұрын
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 !
@olivierlarose1
7 ай бұрын
Thanks I appreciate it!
@Nahhhhhhth
8 ай бұрын
Thank you so much! Please keep bringing your awesome content! Big Hug!
@olivierlarose1
8 ай бұрын
For sure! Thank you for the support
@masudrana_360
3 ай бұрын
just awesome since long time i was in search of this type of tutorial .
@lumatea
8 ай бұрын
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! 👍
@olivierlarose1
8 ай бұрын
That could work yeah, but that's a massive hack, I would just user the Page router instead lol
@manjeshkumarsharma
8 ай бұрын
Your videos are OP🔥
@olivierlarose1
8 ай бұрын
Thanks!
@user-cl3uf6qr7o
2 ай бұрын
best mordern instructor i have seen so far
@clovermk1635
3 ай бұрын
I learned a lot of things from this! Thanks a lot Olivier 🔥
@adarsh_endeavour
8 ай бұрын
Bro, I'm litreally finding the way to make the page transition, and dennis portfolio was the inspiration for me as well❤️
@olivierlarose1
8 ай бұрын
Nice!
@Mater-code
Ай бұрын
Great vid, remember to hydrate yourself bro.
@shaked1233
8 ай бұрын
As always, awesome tutorial!
@olivierlarose1
8 ай бұрын
Cheers!
@florentgironde7279
3 ай бұрын
Super vidéo, bravo
@readDocs
8 ай бұрын
Hey Olivier nice content as always! One way I make page transitions in nextjs is by using the layout and listening for pathname changes and searchparams inside a transition component. Not as easy as using framer motion, but hey it works! Hopefully soon, we can get the page transition API available across all browsers!
@olivierlarose1
8 ай бұрын
Doesn't that only give you an enter animation? I believe I tried something similar a while ago and it only allowed entry animations to work. Let me know!
@readDocs
8 ай бұрын
You’re right, what I forgot to add is that the transition component acts like a ‘middleware’: -User lands in the home page -User clicks on the contact link button, that actually doesn’t direct to “/contact”, but to router.replace(“/?contactTransition=true”) - I can start to do a home page exit animation since I didn’t leave the page with an onStart set to contactTransitionParam === ‘true’ and I can also do an enter animation inside my transition component that lives in the shared layout. -Finally, On animation end, the transition component pushes to the actual /contact page. It’s a bit hacky maybe but I does the job for me ^^ By the way I am using reactSpring but it could probably work with Framer Motion too.
@olivierlarose1
8 ай бұрын
I see, that definitely works indeed, thanks for the input! It’s still a bit too hacky for me tho but hopefully we have something official with the View Transitions API. Otherwise I’m still satisfied with the Page Router and Framer Motion for experimental websites
@MrTobypowell
6 ай бұрын
nicely explained.
@sahilverma_dev
8 ай бұрын
Your channel is amazing.
@olivierlarose1
8 ай бұрын
Thanks!
@treyrader
8 ай бұрын
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.
@olivierlarose1
8 ай бұрын
FYI the page router does not jeopardize any of the SEO benefits, they have the exact same benefits SEO wise
@treyrader
8 ай бұрын
@@olivierlarose1 ah ok!
@germancho-dev
7 ай бұрын
you rapidly earned a new subscriber! i'm eager to see new videos!
@olivierlarose1
7 ай бұрын
Thanks! Glad you’re enjoying the content
@nellymotion
8 ай бұрын
top tier content 🔥🔥
@roebienarnaiz
5 ай бұрын
Great Video!
@atulkadyan1303
8 ай бұрын
always op content 🔥🔥🔥🔥🔥
@rashidshahriar7913
8 ай бұрын
This guy is going to be famous real soon
@olivierlarose1
8 ай бұрын
Appreciate the support!
@ekchills6948
8 ай бұрын
You explain so well
@olivierlarose1
8 ай бұрын
Appreciate it!
@CarlWicker
7 ай бұрын
I thought motion exit was broken since next12?, I need to look into this again, good idea using the component.
@olivierlarose1
7 ай бұрын
Only works with the Page router
@user-dz1mg2zp7k
6 ай бұрын
amazing bro I loved it can you please make the same animation with the app router
@nikhilpsathyanathan
7 ай бұрын
You can use template in app router to add page transition
@olivierlarose1
7 ай бұрын
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
@user-lr1ff4xc9o
8 ай бұрын
Thank you so much for a great tutorial! I have a question. Can we make different page transitions between different pages?
@spicejayalicayathebilliona2416
6 ай бұрын
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
@tomrodriguez894
Ай бұрын
Love your work! Do you know if there is any way of doing something similar with the App Router yet?
@Otto-D
7 ай бұрын
Merci Olivier
@olivierlarose1
7 ай бұрын
Ça fait plaisir
@user-er2wx7ts1j
8 ай бұрын
thanks bro
@olivierlarose1
8 ай бұрын
Appreciate it!
@aryankathawale9269
8 ай бұрын
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
@joaomaia9140
8 ай бұрын
Great content 🎉
@olivierlarose1
8 ай бұрын
Appreciate it!
@nouraltabba
6 ай бұрын
Great tutorial Olivier! Your videos are always on point. I was wondering, is there any way to prevent scrolling while the transition is running?
@cityisbetter
2 ай бұрын
if u found out how, please let me know
@rraconteur__
5 ай бұрын
Just by curiousity, it should be able with the new App router now with intercepting routes right? Or am I mistaken?
@Yesterday_i_ate_rat
8 ай бұрын
Amazing ❤
@olivierlarose1
8 ай бұрын
Thanks!
@mohamedbelaouer1696
8 ай бұрын
I realy love your videos
@olivierlarose1
8 ай бұрын
Thank you for the support
@user-vi8vy8dx1o
5 ай бұрын
Hey Oliver Nice tutorial man but can i use tailwind instead of custom css ? will it work
@sohambhosale5780
8 ай бұрын
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.❤
@olivierlarose1
8 ай бұрын
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?
@sohambhosale5780
8 ай бұрын
@@olivierlarose1 yes exactly, sorry for the confusion but yes the introduction animation is what i meant to say😁
@cityisbetter
2 ай бұрын
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
@kuipid
8 ай бұрын
My goat has posted... ❤
@olivierlarose1
8 ай бұрын
Thanks for the support!
@lakshya5946
Ай бұрын
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.
@andres03ortega
4 күн бұрын
Motion exit is broken since next12.
@lakshya5946
4 күн бұрын
@@andres03ortega Bro I'm Still Working on That Project 😭. I've scraped this animation. Thank You For Replying 😭
@user-yi3rq7jk2r
8 ай бұрын
i love it
@ilmanmanarulqori5632
8 ай бұрын
Lets goooooowwww 🎉
@mazwrld
8 ай бұрын
this video is a classic
@olivierlarose1
8 ай бұрын
Thanks bro!
@cityisbetter
3 ай бұрын
Hey, nice tutorial, could you also rebuild Dennis's Burger Menu animations?
@cityisbetter
3 ай бұрын
nvm, found out ur other video which covered that, thanks anyway
@magnusbrzenk447
7 ай бұрын
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
@cityisbetter
2 ай бұрын
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
@devyb-cc
8 ай бұрын
it's such a shame isn't it, that we can't make page transition in app router yet.
@alvin3171997
8 ай бұрын
Just realised this when I’m almost done creating the website with app router lol
@devyb-cc
8 ай бұрын
@@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.
@olivierlarose1
8 ай бұрын
100%. It's a shame but I'm hopeful it will be possible in the future with the View Transitions API
@devyb-cc
8 ай бұрын
@@olivierlarose1 would like videos about it oli 🙌
@roguegoblin2407
8 ай бұрын
I've done it with app router, lmk if you wanna see the repo, nextjs + gsap
@oloyang431
6 ай бұрын
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.
@mrrobot9101
7 ай бұрын
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 ( ); }
@irfansaeedkhan7242
6 ай бұрын
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
@wayne_logan
4 ай бұрын
This is unrelated but, bro is actually a bro! You're cute btw 😂😂
@davidevignozzi
8 ай бұрын
🔥🔥🔥
@leiyin1998
8 ай бұрын
cool!
@olivierlarose1
8 ай бұрын
Appreciate it
@OutrospectiveOfficial
8 ай бұрын
Awesome tutorial! Your source code page seems to be giving a 500 internal error though.
@olivierlarose1
8 ай бұрын
Fixed! Thanks for the heads up
@dikshantsinghadhikari5899
6 ай бұрын
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
@zacmuturi4522
Ай бұрын
When you npx create-next-app@latest choose "no" when it prompts you to choose yes or no for the app router...
@kartikhatwar7374
7 ай бұрын
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.
@GabrielDucharme
8 ай бұрын
Really like your content. You from MTL?
@olivierlarose1
8 ай бұрын
Thanks and yes!
@rayrtsx
8 ай бұрын
Give this guy a GitHub Walk of Fame star...
@olivierlarose1
8 ай бұрын
I appreciate that!
@matt54892
7 ай бұрын
How did you configure your scss to work with components without importing? I'm new to frontend :D
@olivierlarose1
7 ай бұрын
Simply run npm install sass and it should compile right away no need for other configs
@zenos_99
8 күн бұрын
Make a app route page transition please
@victormustin2547
8 ай бұрын
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…
@olivierlarose1
8 ай бұрын
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
@victormustin2547
8 ай бұрын
@@olivierlarose1yes certainly, and we’re gonna need safari to support view transitions too
@user-yi3rq7jk2r
2 ай бұрын
what is your camera bro ?
@theKageEth
Ай бұрын
can you do gsap ones, framer is overratted
@user-yi3rq7jk2r
3 ай бұрын
now how can i do that in app router ?
@farhanbinamin
8 ай бұрын
Can you please explain briefly why page transition is not possible in app router?
@olivierlarose1
8 ай бұрын
There’s an open issue check it out here: github.com/vercel/next.js/issues/49279
@Jatin-gj4uf
Ай бұрын
bro i want the text animation help plz
@iuashrafi
8 ай бұрын
should we use gsap + react ? or framer motion + react ?
@victormustin2547
8 ай бұрын
framermotion is free and user friendly so i’d go with that
@olivierlarose1
8 ай бұрын
Gsap with React works fine, but personally I think Framer Motion with React fits better
@weirddev
8 ай бұрын
pages for small? I can't agree, pages is there for long time, and app is new
@olivierlarose1
8 ай бұрын
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
@eillioniscreating
8 ай бұрын
pls make framer motion tutorial
@olivierlarose1
8 ай бұрын
Noted!
@joaomaia9140
8 ай бұрын
Why can’t we use app router ?
@olivierlarose1
8 ай бұрын
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.
@XYZ-gu3rp
8 ай бұрын
Bro Your website is showing a internal server error ,can you check it.
@olivierlarose1
8 ай бұрын
I don't see it myself, you mind giving the failing url?
@Houseofstartup
8 ай бұрын
Why not app router???
@olivierlarose1
8 ай бұрын
Not officially supported as of today
@Ivan-Shyriaiev
8 ай бұрын
uh oh sorry is it works in app router ?
@olivierlarose1
8 ай бұрын
No it does not
@Ivan-Shyriaiev
8 ай бұрын
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
@olivierlarose1
8 ай бұрын
with the App router no you can't, it's not officially supported
Пікірлер: 163