Start with what the motion should communicate
Animation gives a static mascot a sense of attention, energy and personality. A relaxed breath reads differently from a restless bounce. A slow blink can feel calm; a quick look toward an action can feel alert. The right motion should agree with the tone of the product.
Begin by choosing a neutral pose that works without movement. This is the fallback for slow connections, unavailable animation and reduced-motion preferences. The character should still communicate its purpose when the animation is absent.
Looping animation or real-time interaction?
A GIF or video plays a predetermined sequence. It can be a good fit when you need a specific visual story or a simple repeatable moment. It does not automatically follow a visitor or change expression after an event. File size depends on dimensions, frame rate, duration and compression.
A Rive character can combine animation with input-driven behavior. The same rig may idle while its eyes respond to pointer position, then transition into a click reaction. This requires runtime integration and an intentional state machine, but allows behavior a fixed sequence cannot provide.
Choose the format for the experience rather than assuming any one format is always smaller. A complex real-time file and its runtime can outweigh a short optimized loop. Test the complete page cost on representative devices.
Build a calm foundation
Natural idle movement is usually a collection of small decisions: breathing with a stable silhouette, blinking at a comfortable cadence and occasional glances that do not feel mechanical. The neutral state should be comfortable to watch while reading nearby content.
Avoid scaling, bouncing or sweeping movement simply to keep the character busy. Attention belongs to the user’s task. A restrained idle leaves room for a meaningful reaction to stand out when it happens. An explicit pause control gives visitors further control over continuous motion.
Make reactions feel connected
The start and end of a reaction are as important as its middle. A wave should emerge from the current pose without a hard jump. Once it ends, the character should settle back into its neutral behavior. Repeated clicks should not stack competing animations indefinitely.
Describe each reaction with a trigger, duration policy, interruption rule and return state. For example: one click starts a greeting; further clicks during the greeting are ignored; the greeting returns to idle. These simple decisions make the character predictable.
Prepare for delivery
A web-ready deliverable includes more than the animation file. Document how to load it, choose the correct state machine, resize the drawing surface and pause when it leaves the viewport. Reserve its dimensions before loading so nearby content does not shift.
If your main goal is a character that responds to people, explore the interactive mascot service. If you are still choosing an animation format, our format comparison explains the tradeoffs in more detail.
Questions, answered.
Can you animate a PNG?
A PNG can be reviewed as a starting point, but a flattened image may require rebuilding separate parts for eye, head and limb movement.
Does the mascot need to move constantly?
No. The idle can be subtle, paused when offscreen and replaced by a static image for reduced-motion visitors.