Creating Layout Animations with Next.js and Framer Motion #73047

artemavrin · 2024-11-21T13:49:42Z

artemavrin
Nov 21, 2024

Here's a step-by-step guide to implement layout animations with modal transitions:

or just check out my example artemavrin/animation-layout

1. Setup Project Structure

First, create the necessary folder structure:

app/
├── page.tsx
├── layout.tsx
├── @modal
│   ├── default.tsx
│   └── (.)planets
│       └── [name]
│           ├── modal.tsx
│           └── page.tsx
└── planets
    └── [name]
        └── page.tsx

2. Install Dependencies

npm install framer-motion zustand
# or
yarn add framer-motion zustand
# or
pnpm add framer-motion zustand

3. Create Layout Store

Create a Zustand store to manage animation states:

import { create } from "zustand";

interface LayoutState {
  isOpen: boolean;
  shouldClose: boolean;
  setIsOpen: (isOpen: boolean) => void;
  setShouldClose: (shouldClose: boolean) => void;
}

export const useLayoutStore = create<LayoutState>((set) => ({
  isOpen: false,
  shouldClose: false,
  setIsOpen: (isOpen) => set({ isOpen }),
  setShouldClose: (shouldClose) => set({ shouldClose }),
}));

4. Create Navigation Hook

import { useRouter } from "next/navigation";
import { useLayoutStore } from "@/store/layout-store";

const NAVIGATION_DURATION = 300;

export const useLayoutNavigation = () => {
  const router = useRouter();
  const { isOpen, setIsOpen, setShouldClose, shouldClose } = useLayoutStore();

  const push = (name: string) => {
    router.push(`/planets/${name}`);
  };

  const open = () => {
    setIsOpen(true);
    setShouldClose(true);
  };

  const close = () => {
    if (shouldClose) {
      setIsOpen(false);
      setTimeout(() => {
        router.back();
      }, NAVIGATION_DURATION);
    }
  };

  return { isOpen, open, close, push, setIsOpen, shouldClose };
};

5. Create List Component

The list component should use layoutId for animations:

"use client";

import { motion } from "framer-motion";
import { useLayoutNavigation } from "@/hooks/use-layout-navigation";
import Image from "next/image";

const PlanetList = ({ planets }) => {
  const { push } = useLayoutNavigation();

  return (
    <div className="grid gap-3 grid-cols-2">
      {planets.map((planet) => (
        <motion.div layoutId={`planet-${planet.name}`} key={planet.name}>
          <motion.div
            layoutId={`planet-image-${planet.name}`}
            onClick={() => push(planet.name)}
          >
            <Image src={planet.image} alt={planet.name} />
            <motion.h2 layoutId={`planet-title-${planet.name}`}>
              {planet.name}
            </motion.h2>
          </motion.div>
        </motion.div>
      ))}
    </div>
  );
};

6. Create Modal Component

"use client";

import { AnimatePresence, motion } from "framer-motion";
import { useLayoutNavigation } from "@/hooks/use-layout-navigation";

const Modal = ({ children }) => {
  const { isOpen, open, setIsOpen } = useLayoutNavigation();

  useEffect(() => {
    open();
    return () => setIsOpen(false);
  }, []);

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-50">
          <motion.div className="bg-background">
            {children}
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
};

7. Setup Root Layout

export default function RootLayout({
  children,
  modal
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}

Key Points to Remember:

Use the same layoutId for elements that should animate between views
The modal route should be prefixed with (.) for intercepting routes
Use AnimatePresence for handling exit animations
Manage modal state with Zustand for better control
Use the useLayoutNavigation hook for consistent navigation behavior

Usage Example:

When a user clicks on a planet in the list:

The route is intercepted by the modal route
Elements with matching layoutId animate to their new positions
The modal background fades in
Closing the modal reverses the animation

This creates a smooth transition between the list and detail views while maintaining the context of the original layout.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Creating Layout Animations with Next.js and Framer Motion #73047

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Creating Layout Animations with Next.js and Framer Motion #73047

Uh oh!

artemavrin Nov 21, 2024

1. Setup Project Structure

2. Install Dependencies

3. Create Layout Store

4. Create Navigation Hook

5. Create List Component

6. Create Modal Component

7. Setup Root Layout

Key Points to Remember:

Usage Example:

Replies: 0 comments

artemavrin
Nov 21, 2024