Smooth page transitions with Framer Motion and Next.js App Router

The challenge of App Router transitions

In the Next.js App Router, routing is handled on the server side, which means pages are replaced instantly without giving standard client-side libraries a chance to animate the entrance and exit of elements easily.

Framer Motion implementation

To implement smooth transitions, we wrap pages in a client-side layout that intercepts route events or leverages unique React keys to trigger exit and entrance animations.

// Template wrapper for route animations
'use client'
import { motion } from 'framer-motion'

export default function Template({ children }) {
  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: -20, opacity: 0 }}
      transition={{ ease: 'easeInOut', duration: 0.4 }}
    >
      {children}
    </motion.div>
  )
}

Best practices for web animation

Keep animations subtle. Use spring physics for interactive elements (like cards and buttons) and duration-based curves (like ease-out) for entry/exit page transitions to prevent UI lag.