Page transitions in next.js using framer motion
Unanswered
Dareon posted this in #help-forum
DareonOP
Hey everyone, I'm looking to implement page transitions in Next.js with Framer Motion (or any other library that would make sense, but I already use framer motion for other animations).
It's a dashboard design and im just looking to add a slight animation when navigating between pages, like the content comes in from below to its final spot (just a few pixels, it should not be annoying). So the new page content, is what should be animated.
I read some guides online but they put use client on the pages. this feels weird, since woiuldnt this make the whole page client side rendered, jst because some small animation?
Can anyone share their experiences or tips on this?
It's a dashboard design and im just looking to add a slight animation when navigating between pages, like the content comes in from below to its final spot (just a few pixels, it should not be annoying). So the new page content, is what should be animated.
I read some guides online but they put use client on the pages. this feels weird, since woiuldnt this make the whole page client side rendered, jst because some small animation?
Can anyone share their experiences or tips on this?
1 Reply
Yi Lon Ma
create a whole new component which accepts
children and renders them inside a motion.div with animations. Use that in root layout and no that won't make your whole page client side(iirc)