How to Code Page Transitions With Next.js Using Framer Motion | Tutorial

[@Francois3k]

Broooo you're killing KZbin with this content. This is the punch I needed for my portfolio I was looking for. Man I'm glad I found ur channel keep up the dope content. Still your 1# fan on KZbin for code an design!!!

[@WrongAkram]

Day 1 💪🏽

[@sykowhite9465]

such an underrated web design channel .. you are killing it bro!

[@WrongAkram]

Thank ya :)

[@wixnarara]

This explains almost everything on framer motion in 30 minutes. I am amazed. I go back to this video everytime I pick up framer motion for a project.

[@WrongAkram]

Thats awesome to hear!

[@CrashDSInc]

I like your teaching style. Instead of just saying "We need animate presence", you went into what it was and what it did. So many other tuts out there just say 'what' to do, and neglect the 'why'.

[@yunusemrealpak6118]

You really made me love to make a site. You show us that animations aren't as hard as they seem. Don't let it end. We need you!

[@WrongAkram]

Thanks man 🙏🏽 So much more coming!

[@yunusemrealpak6118]

@@WrongAkram I'm currently writing my own blog site using what I've learned from you. I'd like to share with you when I'm finished. Then let's coding

[@mostafaesmaiel1143]

maybe this is the first time I commented in youtube, wanted to let you know you're really good! keep it up!

[@junog5552]

What's wrong, Akram? :D No videos for the past 1+ years? The way you teach is incredible. It was so easy to grasp all the details that now I'm subbed and added all of your videos to queue to watch one by one. Amazingly put together. Appreciate the effort. I hope you are well and safe. Hope to see more content soon. Best of luck with your life.

[@dadabranding3537]

facts. one of the best

[@junog5552]

Indeed

[@berakoc8556]

That helped me a lot. You are awesome. I was struggling lately with Motion and this video is my remedy.

[@skanda_myil]

Best Tutorial ......I watched many videos on Framer Motion but your explanation is very easy to understand easily

[@arthurprather6720]

Never knew about this library, Liked it. This look much closer to Pose but a lot simpler. Thank for sharing.

[@growie000]

Wow such a good video! I am getting used to Framer now for designing and prototyping, but I didn't know it could be used for real web project! I'm happy to watch your video. It showed me how awesome framer motion could be , Thanks!

An amazing tutorial with just the necessary information and without any distractions. You just gained a subscriber :D Keep up this good work, bravo!

[@WrongAkram]

Awesome, thank you! Thanks for the sub :)

[@IDroidDude]

MY MAN! This was AWESOME. FINALLY some great content on YT. Definitely second more Awwwards series of Framer Motion + NextJS or CRA. Btw, it would be even better if you could come up with a video on the thought process of how you actually replicate a site! Great content as usual LOVE IT!

[@WrongAkram]

Thanks! Will do!

[@pranav854]

Absolutely incredible tutorial mate!

[@iUmerFarooq]

Killing one. Do another tutorial on React js + Framer motion. And please increase the font size because your monitor is to big. Thank you

[@jaredbrown6178]

This is my first KZbin comment I've felt compelled to leave ... ever. But honestly, if you turned this content into full courses with more robust sites, this s*** is something I would totally pay for. I'm a very comfortable react dev (I use Gatsby in an medium sized agency setting, and in my creative studio for side projects with smaller brands), but using animation libraries for animations/page transtions, etc., aren't as intuitive as the docs make them out to be. And this is insanely helpful.

[@WrongAkram]

Wow thank you so much for the kinds words. I am planning to make a course this year which will be super affordable, so keep an eye out :)

[@pashapear-who]

Great tutorial! Very clear explanation and super useful

[@jeeves251]

Fantastic. Thank you! I learned a ton and now I'm going to start animating everything with Framer Motion :)

[@WrongAkram]

It's pretty awesome!

[@rtnjo6936]

woooooooooooooooooooooooooooooooooooooooow, REAL CONTENT HERE. i'vebenn wodering about this topic, ty bro

[@WrongAkram]

Glad you found me!

[@amirhaddad5985]

Great bro...you must have 100k subscribers...❤

[@WrongAkram]

Lol, 1 day. I’ll come back to this comment when we get there 😊

[@sukritsaha5632]

Hey, exitBeforeEnter is deprecated now so can you make another video with the updated features. I really want to learn page transitions.

[@ZEESHANJUNAID2222]

great tutorial again..... really appreciate what you're doing, just a humble suggestion, next time when you do tutorial with one of these (react/next/gatsby), kindly explain a bit verbally how we can do it the same with other two (gatsby), i think gatsby and next both are growing with very little resources, we need more people like you to share more knowledge with react, next and gatsby. thumbs up!

[@WrongAkram]

Thanks! I’ll keep that in mind. Hoping to make more react tutorials whether it be cra, next or gatsby.

[@FilipeFreire]

Explained perfectly! Thanks a bunch :)

[@backendfyi]

Lovely tutorial ❤️👊🏼

[@WrongAkram]

Thanks man!

[@seanhuggins5382]

Fantastic video dude, genuinely

[@winoffrg]

More videos please. Really enjoying your channel ❤️❤️❤️🥰 Especially Awwwards Rebuild . Thanks a lot for ur great work

[@amirnoorani5017]

You are Awesome just like NextJs!

[@gerardsegismundo8931]

Please do an awward series of this. Using Next with Framer Motion or GSAP. BTW, I really like your awward series, it was very helpful.. I also recommeded your channel to my friends, and they're very glad with it.. I'm glad to found your channel. Thanks!

[@WrongAkram]

Wow. Thanks for sharing! I’ll be working on my next awwwards series soon!

[@rofazayn]

Hi Akram, first of all thank you so much for these awesome tutorials, I really appreciate you taking the time and effort to provide such quality videos. and maaan do you recommend any certain resources to learn these stuffs from (Links, people, articles books... anything really), I am eager to learn and super curious and I really want to get better at this, and the way you do it seems like the right path, your designs look clean, beautiful and straight forwrard, and also there are plenty of trash content out there (turns out everyone nowadays knows what looks "good" and what doesn't uploads tutorials about designing websites and coding them.. bluh!). Thanks again man you are awesome!!!

[@WrongAkram]

Hey man, I really appreciate the comment! It all depends on what you want to be good at. I always recommend front end developers to learn design because that skill makes you stand out as a developer. For design I recommend going through dribbble and picking what you think looks good and write down why that is. Copying high quality work for the sake of practicing is a great way to increase your skill set. Medium articles are awesome also. For react videos one of my favorite KZbinrs is benawad. I want to make entire courses but it will take some more time.

[@jessejburton]

Great tutorial! Super helpful :) Thanks.

[@LordBoltagon]

This is really cool. Thank you

[@frostkhan2629]

Keep going, it seems you are not making videos anymore ...

[@warodomlertthaweedech9059]

nice work wait for next animation

[@danieldante8341]

Amazing bro! thank you! 👏🤘

[@sikfreeze]

This is really useful. Thank you for making all these great contents. Can't believe it took me this long to find your channel. Wondering if you can make tutorials on canvas Drag and Drops. For example, drag a thumbnail from the toolbar and drop in the middle of the screen to become a fully interactive widget that can be dragged around or something like that. It's so hard to find decent tutorials on the topic. Hope you consider, looking forward to it.

[@sai_charan]

Thank you, Akram!

[@RizwanAhmed-pe2qq]

AWESOME! Please do react-spring next.

[@WrongAkram]

Thanks! On my radar!

[@tradelikemo4771]

I'm sponsored by ghost. This is dope

[@WrongAkram]

LOL

[@alexlytle089]

Excellent tutorial

[@ogulcankarayel5625]

Tutorial about react and next js would be perfect.

[@WrongAkram]

Keep an eye out!

[@ramin9134]

that was amazing dude

[@PaulGrieselhuber]

That typing effect in your terminal is amazing. How did you pull that off?

[@sugamthapa8616]

It's using hyper terminal. It's a plugin called hyperpower

[@nguyenminhtuan2632]

@@sugamthapa8616 thank you so much, waiting for an answer so long 🥰

[@dimak7745]

this is gold, thank you

[@WrongAkram]

Appreciate it!

[@acloudonthebluestsky9687]

BRO, LOVE U MAN

[@amirThePiper]

In 2022 what animation library would you use with react/next? Thanks for the tutorial.

[@Ayush_1908]

Undoubtedly premium content mahn!

[@WrongAkram]

Wow thanks!

[@MashaoleMogale]

Do you have a video on Nextjs and gsap page transitions ?

[@abe10]

Don't forget to add key to the Component inside _app. The animations won't work otherwise.

[@salmankr2d2]

Man thanks so so so much, i have been hitting my head for the past 4 hours trying to make the animations work, and this was the solution👍

[@ibeeliot]

Dudee..... a nextjs portfolio tutorial with a headless CMS & deployment...!? ooooooof make that please?

[@ade-joshe]

Good job bro...

[@WrongAkram]

Thank you so much! 🙏🏽

[@duckhorse2563]

Thank you so much.

[@benfrese3573]

Thanks, subbed.

[@philsecure.comadmin1678]

Automatic sub! Great content!

[@WrongAkram]

Much appreciated!

[@OdotJdot]

THANK. YOU.

[@Rom_Over]

Thank you very much for bringing this kind of tutorial! it is very difficult to find elsewhere ... even paying! Very good job, man. I have a question, Is it possible to use Gsap with Next? Is it the samle way as React? I don't know if we can use timeline with only Framer ..

[@WrongAkram]

Yay! Glad you enjoyed it. GSAP should plug in to next.js similarly to how it does with create-react-app.

[@husainahmmed9025]

Awesome tutorial

[@WrongAkram]

Thanks 😊

[@reactivicky]

The first image is missing in starter files.Other than that, Amazing tutorial. Thank you

[@fsr_bu]

Wooowww this is sooo dope!

[@WrongAkram]

Glad you think so!

[@codawong]

Dear Akram, as your this project. Can use "+ - stepper" to change the money value in Framer?

[@ks-op8pe]

👏👏👏

[@Laughatyouhaha]

Could you provide a bit of information about how you setup _app.js? I am confused about where was the router imported from.

[@svampefett]

What is that terminal writing effect? Looks awesome :D

[@WrongAkram]

The terminal is hyper and the plugin for the effect it hyperpower.

[@thymarques]

it is possible to create an API in the nextjs, a dummy API (in the project) just to fetch the dummy data.

[@jeresalem]

Thanks for this! However, when using dynamic routes the `router.route` is not unique to the URL's, which is necessary in `_app.js`. Using `router.asPath` should do the trick.

[@ruuman4]

the stagger property is not working with the latest version of framer motion. I've fixed a few bugs but I can't figure out why its not working.

[@yossiyun]

Danke🙏🏽

[@dgzv8360]

What about not scrolling to the top of the page while changing the route? Now if click previous arrow, it scroll a page to the top during transitioning out.

[@acloudonthebluestsky9687]

so basically u need to style each page right ?

[@TheNomanAhmed]

Hello bro, Can you share what kind of Microphone and screen capture you are using to create your videos and for editing?

[@WrongAkram]

I use obs to screen record and a blue yeti for my mic. I edit in adobe premiere.

[@code3144]

thanks!

[@samydjemai927]

Hi ! Can't get the exit working... Even with . Some help ?

[@FrancescoBaldan]

Same problem, did you find a solution?

[@vrtech473]

@Thiago Lima You are a life saver!

[@PivotThom]

@Thiago Lima Thanks brother

[@charbouy]

this include react? can integrate with it?

[@mehedihassan5184]

❤️

[@yousefa6091]

you can include the json file with the project and import it as js object no need for http requests

[@rofazayn]

Hi Akram, thank you for the video, I am wondering if there is possible way to use Barba.js with Next.js?

[@WrongAkram]

Mhmm... Maybe but I think barbra is really meant for vanilla js.

[@_danisson]

Great tutorial. But im having problem with the motion.div classNames and style jsx. If a put a motion before a div with a className it breaks my style. So im not able to put style in those motion.divs

[@ThomasBurleson]

Great video EXCEPT your description of the `animate="animate'" initial="initial"` usages... that part was completely confusing.

[@JmDelaCruzMusic1]

Bro can you make a tutorial like this for gatsby

[@permanar_]

This is really awesome dude. Thanks for your efforts. We really appreciate it! Anyway, how do we wrap a tag that built-in on Next.js such as next/image (usually ) Because on your example, if there's an img or div tag, we could simply renamed it as or But what happen with above?

[@wanjohi]

You should probably wrap it with an empty div with (layout="fill"). At least that's what I'd do

[@maciejka1]

remember about key prop in _app!!!!

[@frankand100]

how to animate only viewed elements in a one page site ?

[@keduslejiyared8701]

How do that cool effect thing in ur terminal when u type?

[@bernatpericas9746]

The terminal is hyper and the plugin for the effect it hyperpower.

[@hamed4451]

Hey dude, it was greate , But i have a question, after i use framer, my pages, load data very slow , however after page load i go to pages , if i go back, thr prev page load data again very slow , if i go back to the page it will be slow( however data has been fetched in first time) Why?

[@andreacappuccio58]

Does this happen in production too? If it only happens in your local enviroment with NextJS don't worry, it's because it's rebuilding pages in real time.

[@naynyamish270]

Instead of rewriting each element (div, h1, p) , you could wrap all the elements in a div

[@WrongAkram]

That’s true but that wouldn’t give it that stagger effect. It would just be a single fadeInUp effect on the entire div.

[@naynyamish270]

@@WrongAkram i see it now, thank you, have a good day to you

[@dgzv8360]

cool, but is there option that if we click on link to transition to other page, we dont want to scroll up previous page. Like if i click "Privacy policy" on Home I dont want Home to be scrolled up and then transitioned to Privacy policy

[@WrongAkram]

I know with CSR you can easily preserve your scroll on page transitions but I never tried it with SSR :(

[@ahmedmaher1482]

so something i dont get it why you set initial='initial' and animate='animate' when you dont want to use them? cant u just remove them?

[@WrongAkram]

Oh I do use them but for the children, the dom node that use the variants. You can name them what ever you want in our case we kept them the same name. If you remove them then it would break.

[@ahmedmaher1482]

@@WrongAkram oh I got it now hahaha thanks

[@tanny3080]

I cloned your project but after typing npm run dev it said 'next' is not recognized as an internal or external command, operable program or batch file.' I'm a beginner T-T

[@Manu9325066048]

look up nextjs

[@SH-lt2iv]

16:32

[@itsonlyher]

Hello I had issues with `npm run dev` the starter files. I got a "sh: next: command not found". Instead I had to create a blank nextjs project and move what I can of the starter code into the blank project. Did anyone encounter something similar please? Also tried `npm install` just in case. I'm on node v14.16.0 .

[@tuanauduong]

How to avoid unexpected scroll-to-top when exit using AnimatePresence, I'm using GatsbyJs and framer-motion :'(

[@arako4988]

same issue. Did you find a way to fix this?

[@oscar_cornejo]

Hi, can I follow this tutorial without applying Next.js?

[@WrongAkram]

Yep! You would just have to change a few things depending on how your routes are set up. You can do it with react router with ease or even gatsby link. The AnimatePresence allows for exit animations for when your components unmounts.

[@SowedCastelli]

Did anyone notice that *exitBeforeEnter* breaks routing with IDs in the page?

[@WrongAkram]

Mhmmm.... What happens exactly?

[@SowedCastelli]

@@WrongAkram Navigating to an item from another page say on the home page and clicking on a link to href="/about#the-team", the page couldn't go to the element with id="team". However I fixed it using *onExitComplete* and passed it a callback to that gets the hash from the url and scrolls to it

[@bags534]

I love your videos; you hit a very unique market gap and do it with great quality. But you got to be more concise man. The first 3 minutes of this video for example, Could’ve been said in 20 seconds. I think you lose viewers especially because 10-20 Minute videos look way less intimidating, so one is more likely to click. Otherwise keep em coming !!

[@kadekeqw23]

TBH functionality is just like GSAP but with updated syntax and structure LOL