Wiggle is a playful animation effect where an element moves back and forth in small, quick motions. It creates a sense of energy and draws attention, often used to signal interactivity or to highlight something that requires the user’s focus. The charm of wiggle lies in its exaggerated liveliness, making even static elements feel active and dynamic.
The motion of wiggle typically involves rotation or slight positional shifts, combined with easing curves that prevent the animation from feeling mechanical. Smooth deceleration and acceleration at each end of the motion give the effect a natural bounce, much like a real-world object that has been nudged. Without these details, wiggle can feel stiff or distracting rather than engaging.
Wiggle is commonly used to indicate errors, such as an incorrect password input, or to suggest that something can be moved or deleted. It is also used in playful contexts, such as icons or characters in a game or app that respond when tapped. The effect works best when used sparingly, so it feels special rather than overwhelming.
A good wiggle animation often balances timing and amplitude to avoid becoming annoying. Short cycles with subtle but noticeable movement tend to feel polished. Adding small scale changes or blending with other effects like color shifts can make the wiggle more expressive and memorable. Careful restraint ensures it enhances interaction rather than distracting from it.
Variations include wiggle-to-highlight for errors, wiggle-to-signal edit mode (such as apps with icons that shake when rearranging), and wiggle-to-entertain, where elements animate simply to delight users with character and personality.
<- Checkout all
Wiggle
shots here