View Transitions Generator

What problem does it solve?

This Skill enhances user experience by implementing the View Transitions API, providing smooth and visually appealing animations between page navigations and state changes, eliminating jarring jumps and improving perceived performance.

Core Features & Use Cases

• Cross-Page Transitions: Animates elements between different pages during navigation, creating a seamless flow.
• State Change Animations: Applies transitions to UI elements when their state changes on the same page.
• CSS-Driven Customization: Allows defining custom animations and styles using standard CSS for fine-grained control over transitions.
• Use Case: When navigating from a list of club cards to a detailed club page, animate the specific club card to expand into the full page view, making the transition feel fluid and intuitive.

Quick Start

To add a view transition, wrap your navigation logic in startViewTransition(() => router.push(path)); and apply style={{ viewTransitionName: 'my-element' }} to the elements you want to animate.