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
