Installation
npx kinetic-ui-cli@latest add zoom-to-fill-transition
Anatomy
This component relies entirely on the magic of Framer Motion's layoutId prop.
By applying the same layoutId string to two entirely different elements in the React tree (in this case, the small thumbnail div and the large full-screen modal div), Framer Motion automatically calculates the bounding boxes of both and animates the scale, position, and border-radius smoothly between them.
The transition seamlessly handles swapping out the child contents, allowing an image to stretch into a hero banner while text fades in underneath.
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ZoomToFillTransition } from "@/components/creative/zoom-to-fill-transition";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ZoomToFillTransition } from "@/components/creative/zoom-to-fill-transition";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ZoomToFillTransition
thumbnailContent{/* value */}
fullContent{/* value */}
layoutId="example"
/>
</div>
);
}