ScaleoutImage
The Scale Out Image effect is designed to showcase a minimal yet impactful animation behavior where images gradually reduce in size until they disappear. This creates a sense of fluidity and controlled motion rather than abrupt changes.
Built using Framer’s interaction system, the effect leverages transform properties like scaling to deliver smooth, performance-friendly animations.
A key characteristic of this interaction is its one-directional behavior—each hover triggers a scale-out animation, and the element does not scale back in when the hover ends. This creates a distinct, progressive interaction feel rather than a reversible one.
Key highlights:
Scale-based transition: Images animate from visible (scale: 1) to invisible (scale: 0)
One-directional interaction: Triggers on hover without reversing on hover out
Smooth motion feel: Creates a polished and modern UI experience
Minimal & clean: Focuses on a single interaction without visual clutter
Reusable component: Can be applied to galleries, cards, or hero sections
