AnimationsSVG Path Page Transition

SVG Path Page Transition

A vertical page transition powered by GSAP and an animated SVG path. Click Open to sweep into the second view, then Back to return.

Inspired by Codrops Sketch 021: SVG Path Page Transition (Vertical) from the Codrops Sketches collection.

Credits

This component is a TypeScript/React port of the original demo, adapted for use in this library while keeping the same GSAP path animation and two-view interaction.

Installation

$ npm install gsap

Preview

SVG Path Page Transition (Vertical)

Usage

import { SvgPathPageTransition } from "@/components/ui/svg-path-page-transition";

export default function Page() {
  return (
    <SvgPathPageTransition
      title="My App"
      openLabel="Open"
      backLabel="Back"
    />
  );
}