gptAI
Home

Framer Motion Page Transitions: Next.js Examples & Tips

11 min read 11-15- 2024
Framer Motion Page Transitions: Next.js Examples & Tips

Table of Contents :

Framer Motion is a powerful library that provides sophisticated animations and transitions for React applications, allowing developers to create dynamic and engaging user experiences. When combined with Next.js, which offers server-side rendering and static site generation, Framer Motion can elevate the aesthetic of your web applications while ensuring optimal performance. In this article, we'll explore various Framer Motion page transitions in the context of Next.js, providing useful examples and tips to enhance your projects.

What is Framer Motion? 🎉

Framer Motion is a production-ready motion library for React that allows developers to create animations effortlessly. With its simple API and flexible nature, you can animate individual components, complex layouts, and page transitions seamlessly.

Key Features of Framer Motion:

  • Declarative Animations: Use props to define animations directly on components.
  • Shared Layout Transitions: Animate between different layouts with ease.
  • Variants: Define multiple states for your components and manage transitions between them.
  • Gesture Support: Incorporate drag, hover, and tap interactions.

Why Use Next.js with Framer Motion? 🚀

Next.js is a popular framework for building React applications due to its performance optimizations, routing capabilities, and built-in support for server-side rendering. When you pair Next.js with Framer Motion, you can take advantage of:

  • Automatic Code Splitting: Only load what’s necessary for the page.
  • Fast Navigation: Page transitions feel smooth and immediate.
  • SEO-Friendly: Server-side rendering improves visibility on search engines.

Setting Up Your Next.js Project with Framer Motion ⚙️

To get started, create a new Next.js project and install Framer Motion. Here’s a quick guide:

  1. Create a Next.js App:

    npx create-next-app@latest my-framer-motion-app
cd my-framer-motion-app

  2. Install Framer Motion:

    npm install framer-motion

  3. Set Up Your Pages: Create pages in the pages directory. For example, you can create index.js and about.js.

Implementing Page Transitions with Framer Motion 📖

Basic Page Transition Example

In this example, we'll create a simple fade-in and fade-out effect when navigating between pages.

Step 1: Create the Page Components

In your pages/index.js:

import { motion } from 'framer-motion';
import Link from 'next/link';

const HomePage = () => {
  return (
    
      
Home Page

      Go to About Page
    
  );
};

export default HomePage;

In your pages/about.js:

import { motion } from 'framer-motion';
import Link from 'next/link';

const AboutPage = () => {
  return (
    
      
About Page

      Go to Home Page
    
  );
};

export default AboutPage;

Step 2: Create a Custom _app.js Component

To handle the page transitions globally, update your pages/_app.js:

import { motion, AnimatePresence } from 'framer-motion';

const MyApp = ({ Component, pageProps, router }) => {
  return (
    
      
        
      
    
  );
};

export default MyApp;

Understanding the Code

  • motion.div: This component from Framer Motion allows you to apply animations.
  • initial, animate, exit: These props control the animation states.
  • AnimatePresence: This component ensures that exit animations are completed before the component is removed from the DOM.

Customizing Page Transitions with Variants 🎨

You can define variants for more complex animations. Here’s an example where we add slide transitions.

Step 1: Define Variants

Modify the MyApp component to include slide animations:

const pageVariants = {
  initial: {
    opacity: 0,
    x: '-100%', // Slide in from the left
  },
  in: {
    opacity: 1,
    x: 0,
  },
  out: {
    opacity: 0,
    x: '100%', // Slide out to the right
  },
};

const MyApp = ({ Component, pageProps, router }) => {
  return (
    
      
        
      
    
  );
};

Step 2: Adjust Page Components

Your page components remain the same as before. The variant definitions provide the desired animations without changing your page structure.

Advanced Page Transition Techniques 🌟

Staggered Animations

If you want to animate items in a list or grid with staggered timing, you can utilize the staggerChildren property. This is particularly effective for sections with multiple items.

Example of Staggered Animation

const staggerContainer = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.3,
    },
  },
};

const childVariant = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
};

const ListComponent = () => (
  
    {[...Array(5)].map((_, index) => (
      
        Item {index + 1}
      
    ))}
  
);

Layout Transitions

For more dynamic layouts, such as cards rearranging themselves, Framer Motion's layout feature provides automatic transitions between changing layouts.

Example of Layout Transition

In this example, we create a grid of cards that smoothly rearranges when clicked.

import { motion } from 'framer-motion';

const CardGrid = () => {
  const [selectedId, setSelectedId] = useState(null);
  
  return (
    
      {cards.map(card => (
         setSelectedId(card.id)}
          className="card"
        >
          {card.title}
        
      ))}
    
  );
};

Table of Common Animation Properties

Here is a table summarizing common Framer Motion properties and what they control:

<table> <tr> <th>Property</th> <th>Description</th> </tr> <tr> <td>initial</td> <td>The starting state of the component before animation.</td> </tr> <tr> <td>animate</td> <td>The state the component animates to after it mounts.</td> </tr> <tr> <td>exit</td> <td>The state of the component when it is being removed from the DOM.</td> </tr> <tr> <td>variants</td> <td>Used to define multiple states for a component.</td> </tr> <tr> <td>transition</td> <td>Controls the timing and ease of the animation.</td> </tr> </table>

Performance Considerations ⚖️

When implementing animations and transitions, keep performance in mind. Here are some tips to optimize your animations:

  1. Avoid Heavy Animations: Keep animations lightweight, especially for larger components.
  2. Use will-change: In CSS, use will-change to inform the browser which properties will change, allowing it to optimize rendering.
  3. Profile Performance: Use performance profiling tools in your browser’s developer tools to monitor and improve animation performance.

Conclusion 🏁

Integrating Framer Motion with Next.js allows for creating visually stunning and engaging web applications. Through the use of simple yet powerful animation APIs, you can enhance user experience and bring your pages to life with smooth transitions. By experimenting with variants, layout transitions, and performance optimizations, your Next.js projects will stand out in terms of both functionality and design.

In summary, Framer Motion's capabilities combined with Next.js’s structure open the door to creative possibilities. Leverage these tools to ensure your applications not only look great but also perform optimally. Happy animating! 🎨✨

Featured Posts