DEV Community

Cover image for Animating Next.js page transitions with Framer Motion

Animating Next.js page transitions with Framer Motion

James Wallis on July 05, 2021

A few months ago I rebuilt my Dev.to powered Next.js website from scratch. While building it, I decided adding animations would bring its simple de...
Collapse
 
valentinhervieu profile image
Valentin Hervieu

Thanks for this post, this was super helpful to me to start using framer-motion for page transitions. This library is amazing!

Collapse
 
ugglr profile image
Carl-W

Thanks for adding the part of the no scrolling prop to the Link element. It was just what I was looking for, great post.

Collapse
 
raycaballero profile image
Ray Caballero

Thank you!

Collapse
 
jameswallis profile image
James Wallis

🙌

Collapse
 
imcorfitz profile image
Corfitz

Great post! One quick Q though - how would you come about triggering transitions between routes on the same page? Imagine between two posts both located on /blog/[slug].tsx. In my case, I have a headless CMS, fetching all pages in a [[...params]].tsx route, which means that majority of route changes all happen within the same page file. It works fine when going from the static 404.tsx page, but not between pages using the same [[...params]].tsx route. Any great ideas?

Collapse
 
jameswallis profile image
James Wallis

Don't forget to add the key value to your Next.js Component tag inside _app.js. It needs to be unique for every page (you can just use the page url).

github.com/james-wallis/wallis.dev...

I'll update the post with this information at some point.

Collapse
 
beazer profile image
Dave • Edited

Great timing on this post! I've spent so long today struggling to get my animation to work between pages... I was using an <a tag instead of the <Link tag! Thanks for pointing that out in this post, it steered me back from the edge!

Collapse
 
jameswallis profile image
James Wallis

Ha amazing, took me ages to get around to writing it so the timing is very lucky!

Collapse
 
heybett profile image
Luiz Bett

You didn't import your Layout to app.tsx. How you get to animate the entrance this way? In my case, it only animates on full refresh and when putting the components on app.tsx inside a after import it from /components.

Collapse
 
jameswallis profile image
James Wallis

Hi Luiz, I didn't add it to _app.tsx because the elements are animated when they enter and leave the DOM.
Adding them into _app.tsx would make them only animate on a refresh like you've described.

Collapse
 
heybett profile image
Luiz Bett

inside a Layout*

Collapse
 
jrrio profile image
João Rodrigues • Edited

Congratulations for your work and for sharing all this with the community. However, I've discovered the hard way that AnimatePresence makes the app messy in production (npm run build && npm run start) if the pages / components utilise CSS Modules. I think your site is performing okay because you're using Tailwind CSS.
Bug: github.com/framer/motion/issues/948

Collapse
 
cannon303 profile image
cannon303 • Edited

Hi I noticed with your website that the page transitions work great but I wanted to ask if this is achievable: When you go to your home page and scroll down to, for example: Featured Projects section, if you then click the Portfolio link in the top navigation the transition to that page works fine but if you then click the back button on the browser what I would expect to see is the home page scrolled down to the Featured Projects section where I last left the page but instead you end up back at the top of the home page with another transition. I probably wouldn't even expect to see the transition again either but the more important task is to be able to go back to the point you last scrolled the page when you click the browser back / forward buttons. Is that achievable with Framer Motion?

Collapse
 
ex3cut3 profile image
exe.cute

Hi, how to achieve animation of switching bottom border in navigation? Tried with new v5, but it only somehow snaps, not smooth and predictable as on your site, even tried copypaste from git