Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Animated page transitions in Next.js v1.0.0

Use this resource to animate the move from one page to the next on a Next.js site

New

  • 463 downloads
  • 183 likes
  • 222 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install page-transition-nextjs

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent explains why the animated exit does not play in the App Router, then sets up one of two solutions: template.tsx with AnimatePresence and FrozenRouter, or the View Transitions API. It follows a debug checklist to find why an exit does not fire. You get smooth transitions, with a clean fallback when the browser does not support them.

Mostly picked by

Updated November 2, 2026

Two pages crossfading with a slight vertical slide

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Next.js (App Router)
  • Framer Motion or next-view-transitions
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: the cause of the problem, two solutions, a debug checklist, gotchas
  • references/full-examples.md: slide transitions, shared elements, crossfade, loading state
  • A method to validate the transition curve in an HTML file before touching the router
  • README.md: overview of the skill

Good fit for

  • Your Next.js site changes page with no animation at all
  • The Framer Motion exit prop does nothing on route change
  • You are torn between Framer Motion and the View Transitions API

Not for

  • A site without Next.js or a client-side router
  • Animations inside a single page (scroll, hover)
  • A project that must avoid any dependency on a Next.js internal API

Tags

  • nextjs
  • page transition
  • framer motion
  • view transitions
  • animation

About

You say

"Add a fade with a slight slide between the pages of my Next.js App Router site, and make the old page animate out."

Two pages crossfading with a slight vertical slide

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
A Next.js App Router project and The transition effect you want
Dependencies
Next.js (App Router) and Framer Motion or next-view-transitions

How to use it

  1. State your Next.js version and the effect you want (fade, slide, shared element)
  2. The agent picks the solution and writes the template, transition and frozen router files
  3. Test the navigation, tune the durations and check reduced motion

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0 KB
  • references/full-examples.md5.4 KB
  • SKILL.md12.1 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/page-transition-animation
Licence
MIT

Notice

Version modifiée de « page-transition-animation » (iart-ai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Is the Framer Motion solution stable across Next.js versions?

Not entirely: FrozenRouter imports an internal Next.js context whose path can change. It is the first thing to check after an upgrade.

The file mentions helper scripts, are they included?

No, they are not shipped. The standalone HTML check uses the `npx playwright screenshot` command given in the file.