I'm so pissed off of youtube, why youtube isn't placing your videos in recommendation! This channel deserves much more subscriber, Akram always delivers quality materials thank you so much. I have learned so much from him - I am always coming for animation and expecting more...
Dope as hell! Love framer motion, do you know if they have any built in method to create multiple transitions on 1 component? Like go home, use this exit animation, go on a link, use a different exit animation on the same component.
Mista Ed! I don’t believe so, sounds like an awesome feature though. You will most likely have to create a custom function and use variants to achieve that. I would say this video was published before Framer Motion 2 which includes layout id, so I would recommend everyone to use Layout ID over this solution.
This is just incredible content, best I've seen animations wise. I just wished you never stopped doing these page transitions/awwwards rebuilds, they are just fire. Great job, you are awesome, keep it up!
Akram, I was waiting for this tutorial after I saw your tweet and I'm not disappointed at all ! Really good one, I started few days ago watching all your tutorials, it's all really interesting ! Thanks for sharing with us :)
Attending your tutorial was always like taking a deep dive into an ocean full of knowledge. You are the best instructor ever on TH-cam! Thank you! so much for providing quality content love from pakistan
WOW! Brother, i really like your content. Its unique, very detailed and beautifully explained. Thanks for everything. Just a request: Can you in future make next.js and framer motion specific series or something where we can create a whole personal blog or e-commerce like structure. Thanks again for your wonderful content and best of luck for the future. I can't wait for what you will be coming up with in future videos.
Wow thanks for the kind words. Really glad you are enjoying the content. Entire sites take a very long time especially amazing ones. Its something ill consider for the future though.
Dear Akram, i recently discovered your Channel on YT via a tweet on Twitter and i got hooked with all the things u have on your channel here the fact that u even put the time and energy to create these "web-transition based animations" blows my mind. I couldn't keep up with the videos because I would like u ask u a couple of questions - what kinda basic knowledge do I need to understand the things you do in general I'm learning HTML + CSS again since I'm a traditional Graphic designer I really want to expand my skillset with your expertise to make things even more exciting! Thank you so much! Stay safe! :)
Great video. As a tip about the node_modules folder, in VS Code settings you can exclude it from your workspace to prevent it expanding. You can still ctrl+click into dependencies from their import statements if you need to read some library source.
@@WrongAkram just been in the my bat cave lol. But I glad u back I hope in the future u can do a tutorial on three.js (🙏🙏🙏) that would fire. But again I'm glad ur back with ur amazing content😁😁😁😁
In case you haven't solved it yet, the issue with node_modules opening is because you're accidentally clicking to go to the definition of div, which expands the folder in the sidebar to show the file you just opened. You could either disable the feature that highlights the active file in the sidebar, or you could hide the node_modules folder from your sidebar all together and use an extension like "Search node_modules" if you actually need to explore that. Hope that helps! 😅 😊
How would you animate back? Between page 1 and page 2, page 2 has the initial state that looks like page 1. But if you wanted to reverse the animation going from page 2 > page 1 wouldn't page 1 also require an intitial state that looks like page 2? And I think that breaks right?
Another great vid, love it! :) Would you have a suggestion on how to best disable animations on mobile devices? Also, it seems like many people are struggling to implement such effect in Gatsby (me included), so a vid on that would be great in the future. But we really appreciate anything you share with us, all is gold. :D Thank you!!!
Hey! Yea I'll need to create a gatsby page transition video soon. For mobile I would use a hook to handle browser resize. I'd use a ternary operator to render motion components or non motion components dependent on the browser size. Or maybe we can pass a prop disabling animations for mobile...
@@WrongAkram yes please a gatsby page transition tutorial would be so much appreciated! Also do you know how to transition from the model page back to the homepage? because if I follow the tutorial I should start the homepage animation with the model page design but that for a new visitor seeing the homepage for the first time would be strange... any suggestion? thanks a lot!
What if you were going to scroll a bit? How would you deal with it at that point, getting the same position of the image on the new route and transitioning from that to he final state?
Dude this is so awesome, just what I needed. Thanks bro. How would you go about creating animation variations across handheld and desktop devices or disabling on handheld. Creating different variants and dynamically loading them onto components based on viewport width?
Can’t believe this was playing with framer motion and I thought “wouldn’t be cool if Akram jumped on this and showed us some page transition on react and Gatsby” then what do u know 😁. 🙏🏾 bless u chief. And it does kinda fill good to be first😏
Hey congrats !! That's dope !!! I just have one issue on the {scrollYProgress} = useViewportScroll(); part. I made everything as you did, re check on your GH repo, and same thing... That's not scaling on scroll, or at all... I don't understand, I have no errors on console, i Import well useTransform and useViewportScroll... But nope. any idea? -- Edit : and it does not works with the opacity too
I was trying find a solution but no one is addressing this issue. Is there any way to put conditions like, when you enter the page it should come from right (). but if you click on something which will go to subpage then it should go like (
Really great video, would try to implement this on a few projects. Personally wasn't a fan of how react-transition-group handled route changes. Curious to know why you used Switch tho rather than just the Router parent and Route children. Thanks again, great content
Thank you so much! Also a Switch looks through all its children Route elements and renders the first one whose path matches the current URL. Use a Switch any time you have multiple routes, but you want only one of them to render at a time.
@@WrongAkram Sounds good, thank you. The syntax is a bit more complex than gsap. Are there any alternatives to this? I found barba and highway don't work with react
Could you do something similar when routing in NextJS? in which you've only got the useRouter hook and can only do this in an imperative way vs declaritive
I was wondering can you explain how to do the same with like asyncronous libs like barba.js for html/css and js (i'm struggling with react i do mainly wordpress with my company and i'm looking to do this on my projects but that hard to transform this react on wordpress)
If you have a flexbox grid, how would you determine the initial x and y ? In this exemple, y was -50%, but in a gallery for exemple, what would it be? Thanks alot for the video by the way!
Could you have used animate-shared-layout for the image transition ? Wondering if that would play well with using next-js or any server side/ static rendring
What an amazing tutorial, thank you! Been working with framer-motion for a year now and never realized that you can animate individual child elements with exit prop instead of a single wrapper when you switch pages. This is awesome. I also got a question: is it often the case with SPA websites that elements that appear to be the same (just like this image) are not actually the same?
Great video man, what do you think is a good way to make transition page on scroll using framer motion? for example you're on homepage with h-screen and then when user scrolls it transfers to different 'screen' or page?
Great tutorial! Think its a little dated now you can use layoutId and reduce the complexity. Would you consider redoing it using the latest framer motion?
hey buddy big fan of ur vids..! could u do like a vid where u create a full fledged website like with all pages like contact, home, work ...etc. with a real kickass design with all animations nd stuff..?
Thanks! If you want to learn react I suggest taking a crashcourse to understand the idea and the checkout thenetninja and to get more advanced look at ben awad
Hi! Your channel is awesome, and this vid is too. I was wondering how you would go about having a page transition that would only start when your page is loaded ? Some websites even have a spinner or something and when the page is loaded you would have the animation that reveals the page. Anyway, if had time to make a video about that, it would be great ^^
Awesome video Akram. I’m loving your content. By the way, I see that when transition finishes to the second page the scrollbar mess the animation a little bit, like it pushes the image to the left causing an ugly effect, is there something to do about it? And why your browser doesn’t seem to be affected by this. Greetings
As always, good video, good explanation, keep it up plis there is no chanel like yours in the entire internet
I agree 😅
Wow thank you so much! 😊
I Totally Agree on That.
Pls keep it up bro
I'm so pissed off of youtube, why youtube isn't placing your videos in recommendation! This channel deserves much more subscriber, Akram always delivers quality materials thank you so much. I have learned so much from him - I am always coming for animation and expecting more...
This man is legit and cool, for DEV ED to comment, no lit. Keep it up man.
Dope as hell! Love framer motion, do you know if they have any built in method to create multiple transitions on 1 component? Like go home, use this exit animation, go on a link, use a different exit animation on the same component.
Mista Ed! I don’t believe so, sounds like an awesome feature though. You will most likely have to create a custom function and use variants to achieve that. I would say this video was published before Framer Motion 2 which includes layout id, so I would recommend everyone to use Layout ID over this solution.
@@WrongAkram cheers for the update! Your content is amazing, will be big one day ;)
😊
@@WrongAkram Agree with Ed your content is great dude! Have learned so much from watching you
My two favourite frontend developers in one comment is mindblowing 🥰
I love devs with a good eye for visual design
this solve the mystery.. I always wonder how this kind of effect was made keep this kind of videos up!
This is, for sure, the best framer motion tutorial I saw on youtube. Thank you.
This is just incredible content, best I've seen animations wise. I just wished you never stopped doing these page transitions/awwwards rebuilds, they are just fire. Great job, you are awesome, keep it up!
This was exactly what I needed
I always thought framer-motion was weird, but this has made me come around. May be my default motion library, even. Good stuff, Akram!
So awesome! great job!
Man you deserve way more subscribers, I think this is the best React channel I've seen so far
This channel is growing day by day and I'm so happy that we will get some quality content !
Thank you so much
Thank YOU so much!
Akram, I was waiting for this tutorial after I saw your tweet and I'm not disappointed at all !
Really good one, I started few days ago watching all your tutorials, it's all really interesting ! Thanks for sharing with us :)
Thanks man! really glad you have been enjoying them :))))
Attending your tutorial was always like taking a deep dive into an ocean full of knowledge. You are the best instructor ever on TH-cam! Thank you! so much for providing quality content love from pakistan
LMFAO when Node Modules folder opens 😂😂😂. Great stuff like always 💪🏻
WOW! Brother, i really like your content.
Its unique, very detailed and beautifully explained.
Thanks for everything.
Just a request: Can you in future make next.js and framer motion specific series or something where we can create a whole personal blog or e-commerce like structure.
Thanks again for your wonderful content and best of luck for the future.
I can't wait for what you will be coming up with in future videos.
Wow thanks for the kind words. Really glad you are enjoying the content. Entire sites take a very long time especially amazing ones. Its something ill consider for the future though.
Thanks a lot for your tutorial, it's awesome ! I wasn't know what's it Framer Motion, and now I love it ! Thank you Wrong, you're the best 👏
Glad you liked it!
Dope! thanks ❤
Awesome, bro! It is really cool and high quality video. After this I will go to watch other your videos
The only channel I have notifications on. GOOD SHIT BRO!
Dear Akram,
i recently discovered your Channel on YT via a tweet on Twitter and i got hooked with all the things u have on your channel here the fact that u even put the time and energy to create these "web-transition based animations" blows my mind. I couldn't keep up with the videos because I would like u ask u a couple of questions - what kinda basic knowledge do I need to understand the things you do in general I'm learning HTML + CSS again since I'm a traditional Graphic designer I really want to expand my skillset with your expertise to make things even more exciting!
Thank you so much! Stay safe! :)
Great video. As a tip about the node_modules folder, in VS Code settings you can exclude it from your workspace to prevent it expanding. You can still ctrl+click into dependencies from their import statements if you need to read some library source.
Not necessarily a good idea but hey!, thanks anyway.
your channel is exactly what i was looking for, God bless you !
wow page transitions rocks!!!
Super informative, Akram. Just a little advice, I think people would appreciate if VS code is bit more zoomed in.
Keep going brother
I just keep looking into her eyes when the transition comes in haha. Great video though. Gonna use it for my next project :)
Awesome tutorial man. Who needs a whole course when I got Akram. Plus what is that awesome font you used?
Holy crap! I was just Googling how to do this last night. You're a hero.
Thank you! I pay google for your data, clear your history it’s not pretty lol
@@WrongAkram ahh man, sorry about that "Akram Khalid nudes" search.
@@MiserableDuck95 0_0'
@@MiserableDuck95 😂😂😂😂😂
You are the fucking best, bro.
I'm a web developer from Colombia, and I want to learn to be the best, and your videos are very help for me
Did it. Looks really cool. Thank you :)
you can click on vscode button to reduce all folder, thus easier for when node modules are expended, just a tip if you didnt knew
Amazing tutorial man, learned a lot of thanks to it.
Thanks!
Incredible video. Very clear.
Love these tutorials! Thank you Akram!!
My pleasure!
Yooo ur back, I so glad u made this tutorial. Keep up with the spicy content 😄😄😄 still ur #1 fan
My man! Where you been? How are things?
@@WrongAkram just been in the my bat cave lol. But I glad u back I hope in the future u can do a tutorial on three.js (🙏🙏🙏) that would fire. But again I'm glad ur back with ur amazing content😁😁😁😁
ive always wondered how to do this! thanks!
Great content Akram!
In case you haven't solved it yet, the issue with node_modules opening is because you're accidentally clicking to go to the definition of div, which expands the folder in the sidebar to show the file you just opened. You could either disable the feature that highlights the active file in the sidebar, or you could hide the node_modules folder from your sidebar all together and use an extension like "Search node_modules" if you actually need to explore that. Hope that helps! 😅 😊
Yea I figured lol, thanks for telling me how to disable it!!
19:16 in case you're still wondering....mua is sugercane in swahili :) Otherwise really great stuff.
Such a great and advanced content, thank you!
Hello, at 21:48 we didn't specify any variant in that motion.div , where exactly initial and animate values coming from ?
Finallyyyyyyyyyy it’s here 🤗
Nice Content Bro
Keep it up.
U are the Next
I liked this content. Great explaining!
Finally it's here
Yes!
Uhhhh too cool this tutorial... You are the best! Thank you! I hope you will do some other stuff like this!
Thank you! Absolutely I will :)
How would you animate back? Between page 1 and page 2, page 2 has the initial state that looks like page 1. But if you wanted to reverse the animation going from page 2 > page 1 wouldn't page 1 also require an intitial state that looks like page 2? And I think that breaks right?
hope you start making videos again
Another great vid, love it! :) Would you have a suggestion on how to best disable animations on mobile devices? Also, it seems like many people are struggling to implement such effect in Gatsby (me included), so a vid on that would be great in the future. But we really appreciate anything you share with us, all is gold. :D Thank you!!!
Hey! Yea I'll need to create a gatsby page transition video soon. For mobile I would use a hook to handle browser resize. I'd use a ternary operator to render motion components or non motion components dependent on the browser size. Or maybe we can pass a prop disabling animations for mobile...
@@WrongAkram yes please a gatsby page transition tutorial would be so much appreciated! Also do you know how to transition from the model page back to the homepage? because if I follow the tutorial I should start the homepage animation with the model page design but that for a new visitor seeing the homepage for the first time would be strange... any suggestion? thanks a lot!
What if you were going to scroll a bit? How would you deal with it at that point, getting the same position of the image on the new route and transitioning from that to he final state?
Dope as hell! Do you thing is possilble to upload a video about how to do the same effect using only some js library like GSAP ? with out React ?
102 likes and 0 dislikes. Woww.. Keep it up!
:) Thanks!
Assalam O Alaikum brother, thanks for this amazing tutorial, peace be with you 🇵🇰❤️
Great video ... Any thoughts on making a video to show how similar effects can be achieved in vue/nuxt ?
Dude this is so awesome, just what I needed. Thanks bro. How would you go about creating animation variations across handheld and desktop devices or disabling on handheld. Creating different variants and dynamically loading them onto components based on viewport width?
Dope. you always Hit us with fire. Thank you
You know how I be
Can’t believe this was playing with framer motion and I thought “wouldn’t be cool if Akram jumped on this and showed us some page transition on react and Gatsby” then what do u know 😁. 🙏🏾 bless u chief. And it does kinda fill good to be first😏
Lol, glad to hear that!
GOD bless you Akram!
Thank you :) Right back at ya.
Banger!!
Came here for the awwwards remake, stayed for the content ! GG BRO
Appreciate you!
How would you get the x and y coords if this was in a gallery of images?
Hey congrats !! That's dope !!!
I just have one issue on the {scrollYProgress} = useViewportScroll(); part. I made everything as you did, re check on your GH repo, and same thing... That's not scaling on scroll, or at all... I don't understand, I have no errors on console, i Import well useTransform and useViewportScroll... But nope.
any idea?
-- Edit : and it does not works with the opacity too
Hello! Thanks for your video. But maybe you know how i can made this transition without framer motion or using analog for vue?
Can you please do a tutorial where the page transition is some svg animation that covers the entire page and moves out to reveal the new page?
Hey bro do you prefer using framer motion over GSAP?? Love the video been learning a ton from you
So cool! Thank you ❤️
You are very welcome 🙏🏽
I was trying find a solution but no one is addressing this issue.
Is there any way to put conditions like, when you enter the page it should come from right (). but if you click on something which will go to subpage then it should go like (
Really great video, would try to implement this on a few projects. Personally wasn't a fan of how react-transition-group handled route changes. Curious to know why you used Switch tho rather than just the Router parent and Route children. Thanks again, great content
Thank you so much! Also a Switch looks through all its children Route elements and renders the first one whose path matches the current URL. Use a Switch any time you have multiple routes, but you want only one of them to render at a time.
@@WrongAkram Sounds good, thank you. The syntax is a bit more complex than gsap. Are there any alternatives to this? I found barba and highway don't work with react
@@WrongAkram Oh alright, I guess that's what it does differently from using just the exact prop
Could you do something similar when routing in NextJS? in which you've only got the useRouter hook and can only do this in an imperative way vs declaritive
Is there a way to debug AnimatePresence? I am trying something similar with RR v6 and its not performing the exit animation :/
Mhmmm... Could you share a codesandbox?
@@WrongAkram thanks for your reply, here is the github repo, let me know if you need a codesandbox instead github.com/kshivanku/plantlady
I was wondering can you explain how to do the same with like asyncronous libs like barba.js for html/css and js (i'm struggling with react i do mainly wordpress with my company and i'm looking to do this on my projects but that hard to transform this react on wordpress)
Is this possible with nextjs and its file based routing?
What software name is you edit image animation type
If you have a flexbox grid, how would you determine the initial x and y ? In this exemple, y was -50%, but in a gallery for exemple, what would it be? Thanks alot for the video by the way!
bro image is sliding to left by very very little bcuz of scrollbar not a big problem but still how to solve it
37:42
For those watching in 2023, you need to specify the initial and animate state on the firstName tag.
Else, the animation won't run
Awesome bro have you ever used Barbara js or highway js. Those frameworks make page transition super easy with only about 25 lines of code
I've used it in the past and I plan on making videos on them for sure.
Could you have used animate-shared-layout for the image transition ? Wondering if that would play well with using next-js or any server side/ static rendring
yes
What an amazing tutorial, thank you! Been working with framer-motion for a year now and never realized that you can animate individual child elements with exit prop instead of a single wrapper when you switch pages. This is awesome.
I also got a question: is it often the case with SPA websites that elements that appear to be the same (just like this image) are not actually the same?
Great video man, what do you think is a good way to make transition page on scroll using framer motion? for example you're on homepage with h-screen and then when user scrolls it transfers to different 'screen' or page?
I'd check gsap, lately they add a plugin to handle scrolling, or go with Intersection Observer API
Hey 👋🏻 this is really cool , but now with NextJS update 2024 we can't really replicate this- is there any way to do it now?
Great tutorial! Think its a little dated now you can use layoutId and reduce the complexity. Would you consider redoing it using the latest framer motion?
Awesome content!! But I am having the issue on "exit" props in motion. Transition is not happening on exit. Did anyone had the same issue?
Shout out to IHateTomatoes!
I loved your content, keep it up
Can i do it with animatedshared layout ?
What is the different between creating page transitions with js library and js framework ?
Thanks .
No difference at all.
can this be achieved using barbaJs ?
brother this is awesome, thank you. I hope you are well. Any chance of making this into a responsive version by any chance?
hey buddy big fan of ur vids..! could u do like a vid where u create a full fledged website like with all pages like contact, home, work ...etc. with a real kickass design with all animations nd stuff..?
Maybe sometime in the future. I get really tired of long series so it might be hard
This is really cool, definitely one of my fave effect on the internet lmao, but I don't know where to learn React 😥
Thanks! If you want to learn react I suggest taking a crashcourse to understand the idea and the checkout thenetninja and to get more advanced look at ben awad
Is it possible to create using pure html css js
LOL "FUCK SAKES!" Great video Akram so dope!
Thank you so much 😍🙏
You are welcome!!
React is really a awesome frame work
Some might say its a library. And yes it is awesome.
Hi! Your channel is awesome, and this vid is too. I was wondering how you would go about having a page transition that would only start when your page is loaded ? Some websites even have a spinner or something and when the page is loaded you would have the animation that reveals the page. Anyway, if had time to make a video about that, it would be great ^^
Question, isn’t react overkill if we aren’t working with dynamic data?
React is never an overkill ;)
@@WrongAkram lol haha
Thank you, this was super helpful! Was there a react router tut you were going to link to?
Oh thats right! Just added it, here is the link th-cam.com/video/4NpGzBEySvI/w-d-xo.html. Tell Leigh I said hi
Awesome video Akram. I’m loving your content. By the way, I see that when transition finishes to the second page the scrollbar mess the animation a little bit, like it pushes the image to the left causing an ugly effect, is there something to do about it? And why your browser doesn’t seem to be affected by this.
Greetings
Hey! Have you found out since this time? I have the same issue there