DEV Community

Cover image for Nextjs Page Transition With Framer-Motion

Nextjs Page Transition With Framer-Motion

Joseph42A on January 28, 2024

Creating seamless and visually engaging transitions between pages has become an integral aspect of enhancing user experience. Next.js, a popular Re...
Collapse
 
wuyasong profile image
wuyasong

nice

Collapse
 
joseph42a profile image
Joseph42A

My plesure,

Collapse
 
lansolo99 profile image
Stéphane CHANGARNIER

Exactly what I have done in my latest project, that is reassuring 👍
I had to rely on ugly hacks to make this working properly before the Next 14 release (animatePresence + mode attr.)

Collapse
 
joseph42a profile image
Joseph42A

Exactly, we had to deal with those kinds of weird hacks, but now have such a clean way to get the animation done, All Thanks to Nextjs Team

Collapse
 
abdulrahmanismailhaji profile image
Abdulrahman Ismail

well done and keep growing bro🙌🙌

Collapse
 
joseph42a profile image
Joseph42A

You're welcome!

Collapse
 
rid137 profile image
Ridwan Makinde

i have followed the tutorial closely but the transition only occur on initial page load, it does not persist on when i make subsequent navigation to different pages

Collapse
 
joseph42a profile image
Joseph42A

Did you use template.ts or layout.ts make sure to use template.ts otherwise the layout effect only appear once, for working example look at my source code here
github