Shrink is an effect that reduces the size of an element to create emphasis, guide attention, or indicate interaction feedback. It mimics the way physical objects compress when pressed, giving digital elements a sense of tangibility and responsiveness. This subtle reduction in scale adds depth to the interface and reinforces the feeling of direct manipulation.
The animation for shrink should feel quick and precise, often scaling the element down slightly before returning it to its original size. Easing is important here, with a smooth curve that makes the motion feel natural instead of abrupt. Paired with shadows or opacity changes, the effect can enhance the illusion of depth.
Shrink is commonly used in button presses, interactive cards, and icons to signal that an action has been registered. By making the element feel like it is being pressed inward, users gain immediate confirmation that their input has been received. This makes the interface more tactile and engaging.
To elevate the effect, designers can combine shrink with haptic feedback or sound, reinforcing the physicality of the action. The key is subtlety, if the element shrinks too much or too slowly, the effect can feel clumsy rather than refined. Keeping it snappy and proportional maintains a sense of polish.
Variations of shrink include elements shrinking to disappear entirely, such as dismissible notifications, or shrinking slightly before transitioning into another state. These variations extend the usefulness of the effect while maintaining its role as a clear, tactile form of feedback.
<- Checkout all
Shrink
shots here