@lemoncloud/page-transition-core

Framework-agnostic page transition core using the View Transitions API.

Installation

npm install @lemoncloud/page-transition-core

Usage

CSS Only (Angular, Vanilla JS)

import '@lemoncloud/page-transition-core/styles.css';

Angular 17+ example:

import { provideRouter, withViewTransitions } from '@angular/router';

bootstrapApplication(AppComponent, {
    providers: [provideRouter(routes, withViewTransitions())]
});

Programmatic API

import {
    executePageTransition,
    isViewTransitionSupported,
    detectPlatform
} from '@lemoncloud/page-transition-core';

// Check support
if (isViewTransitionSupported()) {
    // Execute with transition
    await executePageTransition(
        () => router.navigate('/next'),
        {
            direction: 'forward',
            animation: 'slide',
            config: { platform: 'ios' }
        }
    );
}

// Detect platform
const platform = detectPlatform(); // 'ios' | 'android' | undefined

API

executePageTransition(navigationFn, options?)

Wraps a navigation function with View Transitions API.

interface TransitionOptions {
    direction?: 'forward' | 'back';
    animation?: 'slide' | 'lift' | 'fade' | 'zoom' | 'none';
    config?: {
        platform?: 'ios' | 'android' | 'auto';
        detectPlatform?: () => 'ios' | 'android' | undefined;
    };
}

isViewTransitionSupported()

Returns true if View Transitions API is available.

detectPlatform()

Detects platform from user agent. Returns 'ios', 'android', or undefined.

Animation Styles

| Type | Duration | Description | |------|----------|-------------| | slide | 350ms | iOS horizontal slide | | lift | 450ms | Android vertical lift (MD3 SharedAxis Y) | | fade | 350ms | iOS CrossDissolve | | zoom | 350ms | iOS scale with fade |

Framework Packages

For React/Vue, use the framework-specific packages:

• @lemoncloud/react-page-transition
• @lemoncloud/vue-page-transition

License

MIT © LemonCloud