Asaad Logo
UI/UX, Web Design, Web Development

Framer Motion for Smooth Transitions in App Router (Next.js 14+)

Author image

Author

Asaad Mohamed

Date Published

Boosting UX with Seamless Transitions in React Apps

Modern users expect fluid, responsive, and engaging web experiences. In 2025, combining Next.js App Router with Framer Motion (now accessible via the new motion package) is the go-to method to achieve smooth page transitions and micro-interactions in React apps.

In this tutorial, you'll learn how to:

- Integrate Framer Motion or the new motion package with Next.js App Router

- Animate layout transitions between pages

- Boost perceived performance and user experience

- Leverage open-source patterns for scalable animations

Why Framer Motion or Motion + App Router?

Next.js App Router (since v13) enables powerful layouts and nested routes. Framer Motion—or its modern subset motion—brings in animation magic with minimal config. Together, they:

- Enhance UX without bloating your bundle

- Keep routes dynamic and transitions fluid

- Make apps feel modern and premium

Step 1: Install Framer Motion or Motion

You can choose either package based on your needs:

Full Framer Motion (recommended for all features):

1npm install framer-motion

Lightweight Motion Package (if you only need animations):

1npm install motion

Step 2: Create a Layout Wrapper with AnimatePresence

AnimatePresence ensures exit animations run before the new component mounts.

1// app/layout.tsx
2import { ReactNode } from "react";
3import { AnimatePresence } from "framer-motion"; // or 'motion' if using the new package
4

5export default function RootLayout({ children }: { children: ReactNode }) {
6  return (
7    <html lang="en">
8      <body>
9        <AnimatePresence mode="wait">{children}</AnimatePresence>
10      </body>
11    </html>
12  );
13}

Step 3: Animate Page Transitions

In each route (e.g. app/about/page.tsx), use motion.div to animate entry/exit:

1'use client';
2

3import { motion } from "framer-motion"; // or 'motion' from 'motion' package
4

5export default function AboutPage() {
6  return (
7    <motion.div
8      initial={{ opacity: 0, y: 20 }}
9      animate={{ opacity: 1, y: 0 }}
10      exit={{ opacity: 0, y: -20 }}
11      transition={{ duration: 0.3, ease: 'easeInOut' }}
12    >
13      <h1>About Us</h1>
14    </motion.div>
15  );
16}

Bonus: Shared Layout Transitions

Framer Motion supports shared layout animations, like between cards and detail views:

1<motion.div layoutId="card-1">Card</motion.div>

This creates buttery-smooth transitions between views.

Final Thoughts

Framer Motion (or the new lightweight motion) and App Router are a perfect combo for building modern web apps with delightful UX. Whether you're creating a SaaS dashboard, personal portfolio, or eCommerce store — smooth transitions increase time-on-site and build credibility.

💬 Want to go deeper? Let me know and I’ll cover modal animations, SVG transitions, and shared layout best practices in the next post!

Comments0

No comments yet. Be the first to comment!

Leave a comment