ScaleinImage

The Scale In Image effect showcases a clean animation where images grow from a smaller size to their full scale, creating a smooth and engaging entrance effect.

Built using Framer’s interaction system, this effect uses transform scaling to ensure fluid, performance-friendly motion.

A key characteristic of this interaction is its one-directional behavior—each hover triggers a scale-in animation, and the element does not scale back out when the hover ends. This creates a progressive reveal rather than a reversible interaction.

Key highlights:

• Scale-based transition: Images animate from smaller size to full size (scale: 0 → 1)

• 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: Perfect for galleries, cards, and hero sections