@flightdev/transitions

View transition utilities for Flight Framework. Smooth page transitions with the View Transitions API.

Installation

npm install @flightdev/transitions

Quick Start

import { createTransition } from '@flightdev/transitions';

const transition = createTransition();

// Wrap navigation with transition
await transition.navigate('/new-page', async () => {
    await router.push('/new-page');
});

React Integration

import { TransitionProvider, useTransition } from '@flightdev/transitions/react';

function App() {
    return (
        <TransitionProvider>
            <Routes />
        </TransitionProvider>
    );
}

function Navigation() {
    const { navigate, isPending } = useTransition();
    
    return (
        <nav>
            <button 
                onClick={() => navigate('/about')}
                disabled={isPending}
            >
                About
            </button>
        </nav>
    );
}

Named Transitions

/* Shared element transitions */
.hero-image {
    view-transition-name: hero;
}

<img 
    src="/hero.jpg" 
    style={{ viewTransitionName: 'hero' }}
/>

Configuration

createTransition({
    // Fallback for browsers without View Transitions
    fallback: 'fade',
    
    // Transition duration
    duration: 300,
    
    // Easing function
    easing: 'ease-out',
});

License

MIT