skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

page-transitions

Implement View Transitions API navigation animations with cross-fade and shared element morphs.

Updated Aug 23, 2026
Search Tags:#spa routing#reduced motion#page navigation#view transitions api#shared element transitions#mpa navigation
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill page-transitions-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-transitions
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/page-transitions
Command: npx skills add https://github.com/andersoncollab/design-agent --skill page-transitions-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents jarring route changes by adding smooth, native-feeling transitions between page states without relying on heavy animation libraries.

Core Features & Use Cases

  • View Transitions API Cross-Fade/Slide: Applies consistent animation to MPA navigations via the @view-transition CSS at-rule and to SPA navigations via document.startViewTransition().
  • Shared Element Morphing: Creates card-to-detail “shared hero” morphs using view-transition-name so matching elements smoothly transition across pages.
  • Framework Integration & Safety: Supports Next.js, Astro, and vanilla MPA patterns, includes prefers-reduced-motion handling, and provides fallback behavior for browsers without startViewTransition.
  • Example: Animate an e-commerce product image morphing from the product list to the product detail page while surrounding content fades appropriately.

Quick Start

Use the page-transitions skill to implement View Transitions API animations for navigation in your app, using cross-fade for generic routes and shared-element morphs for matching elements.

Frequently Asked Questions about page-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add smooth page transitions to a multi-page app without using JavaScript animation libraries?▼

Smooth page transitions in a multi-page app can be achieved using the native View Transitions API via the @view-transition CSS at-rule, applying consistent cross-fade animations during MPA navigation without heavy dependencies.

What is the View Transitions API and how does it handle SPA routing?▼

The View Transitions API handles SPA routing by calling document.startViewTransition(), which captures DOM state changes and applies native cross-fade or slide animations seamlessly during page navigation.

Can I create shared element morphing for e-commerce card-to-detail navigation?▼

Yes, you can create shared element morphing for e-commerce card-to-detail navigation by assigning matching view-transition-name properties to elements, enabling smooth hero image transitions across pages.

Does the View Transitions API work with Next.js and Astro frameworks?▼

The View Transitions API works with Next.js, Astro, and vanilla HTML, supporting both SPA and MPA architectures for framework-integrated navigation transitions and shared element morphing.

How do I handle prefers-reduced-motion when implementing page navigation transitions?▼

Implementing page navigation transitions requires prefers-reduced-motion handling to disable animations for accessibility, while also providing an instant-navigation fallback for browsers lacking startViewTransition capability.

Related Skills

Explore More Software Engineering Skills→
shiro123444shiro123444
1

vercel-react-view-transitions

Implement View Transition API transitions in React and Next.js apps.

Community
Advanced
shaharKeisarAppsshaharKeisarApps

Shared Element Transitions Skill

Morph shared UI components across Jetpack Compose screens with SharedTransitionLayout.

Community
Advanced
beardcoderbeardcoder

css-animate

Create composited CSS animations with scroll-driven effects and reduced-motion fallbacks.

Community
Advanced
Lev-itLev-it

vercel-react-view-transitions

Implement View Transition API animations in React applications.

Official
Advanced