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