Next.js Discord

Discord Forum

Page transitions in next.js using framer motion

Dareon posted this in #help-forum
Open in Discord
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?

1 Reply

The ORM Joker
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)