ScaleinImage

Hover Interaction

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

Hover Interaction