PageTransition

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { PageTransition } from "@hua-labs/ui/advanced";

Select a transition type and click replay

Pro

FADE

Page transition effect

Different easing functions

smooth

bounce

elastic

ease-out

Pre-configured transition components

FadePageTransition

SlidePageTransition

ScalePageTransition

FlipPageTransition


`children*`	`React.ReactNode`	-	Content to animate
`type`	`"fade" \| "slide" \| "slide-up" \| "slide-down" \| "slide-left" \| "slide-right" \| "scale" \| "flip" \| "morph" \| "cube" \| "zoom"`	`"fade"`	Transition type
`duration`	`number`	`500`	Duration in milliseconds
`easing`	`"linear" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "bounce" \| "elastic" \| "smooth"`	`"smooth"`	Easing function
`delay`	`number`	`0`	Delay before animation starts (ms)
`autoStart`	`boolean`	`true`	Auto-start animation on mount
`showProgress`	`boolean`	`false`	Show progress indicator
`onStart`	`() => void`	-	Callback when animation starts
`onComplete`	`() => void`	-	Callback when animation completes
`variant`	`"fade" \| "slide" \| "scale" \| "flip"`	`"fade"`	Simple transition variant
`loadingVariant`	`"default" \| "dots" \| "bars" \| "ring" \| "ripple"`	`"default"`	Loading indicator style
`loadingText`	`string`	-	Loading text message
`showLoading`	`boolean`	`false`	Show loading indicator

docs:common.basicUsagetsx

import { AdvancedPageTransition } from '@hua-labs/ui/advanced';

<AdvancedPageTransition type="fade" duration={500}>
  <div>Your page content</div>
</AdvancedPageTransition>

docs:components.pageTransition.examples.slideUptsx

<AdvancedPageTransition
  type="slide-up"
  duration={600}
  easing="smooth"
>
  <section className="p-8">
    <h1>Welcome</h1>
    <p>Content slides up into view</p>
  </section>
</AdvancedPageTransition>

docs:components.pageTransition.examples.conveniencetsx

import {
  FadePageTransition,
  SlidePageTransition,
  ScalePageTransition,
  FlipPageTransition,
} from '@hua-labs/ui/advanced';

// Convenience components
<FadePageTransition duration={400}>
  <Content />
</FadePageTransition>

<SlidePageTransition duration={500} easing="bounce">
  <Content />
</SlidePageTransition>

docs:components.pageTransition.examples.withProgresstsx

<AdvancedPageTransition
  type="scale"
  duration={800}
  showProgress
  onComplete={() => console.log('Done!')}
>
  <div>Loading content...</div>
</AdvancedPageTransition>

•Reduced Motion: Respects prefers-reduced-motion user setting
•Content Accessible: Content is always accessible during and after animation

TextRevealPro CarouselPro