Overview
A staple of creative agency portfolios. Instead of standard crossfades or slide transitions, this component uses Framer Motion to animate CSS clip-path properties, creating a dramatic reveal for new content.
It uses AnimatePresence mode="wait" internally, meaning it waits for the current page to finish its exit animation before the new page's entrance animation begins.
Usage
You can wrap this around your page components, passing the route path or a unique ID to the triggerKey prop to trigger the transition when the route changes.
import { ClipPathTransition } from "@/components/creative/clip-path-transition"
import { usePathname } from "next/navigation"
export default function AppLayout({ children }) {
const pathname = usePathname()
return (
<ClipPathTransition triggerKey={pathname} variant="circle" duration={1.2}>
{children}
</ClipPathTransition>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ClipPathTransition } from "@/components/creative/clip-path-transition";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ClipPathTransition } from "@/components/creative/clip-path-transition";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ClipPathTransition
variant{/* value */}
duration{10}
triggerKey="example"
>
<div>Content goes here</div>
</ClipPathTransition>
</div>
);
}