AnimationBeginner

Punch Scale

Popping an object's scale up for an instant, then settling it back with a bounce.

juicerewarduifeedback

Examples

Captured from this page's own interactive demo below.

Overview

Punch scale snaps an object noticeably bigger for a few frames the moment something happens to it — collecting a coin, ticking a counter, taking a hit — then eases it back to normal size with a slight overshoot.

It works because a sudden size change is the strongest attention cue an object can give without moving: the eye is drawn to the thing that just 'jumped', and the bounce-back frames it as a living reaction rather than a glitch.

It's the object-space sibling of camera zoom punch: the camera version punctuates the whole scene, punch scale marks exactly which thing reacted. Nearly every juicy UI counter, pickup, and icon uses some version of it.

Interactive Demo

Punch Scale1.35

Settle Duration250ms

Use Cases

UIPickups/LootMatch-3Hyper Casual

Best Practices

Do

✓Snap to the punched size near-instantly (one or two frames) — the pop reads from the snap, not from the growth.
✓Settle back with an overshoot ease (back/elastic) so the object lands with a bounce instead of deflating.
✓Scale the punch with the event's importance — a coin ticks at 1.15, a level-up can afford 1.6.

Don't

✕Don't punch layout-critical UI that reflows neighbors — scale visually (transform), never through layout size.
✕Don't queue punches on rapid repeat events — restart the current punch instead of stacking ever-bigger scales.
✕Don't punch everything on screen at once; simultaneous pops compete and nothing reads.

Common Mistakes

⚠Tweening up slowly instead of snapping, which reads as growth, not impact.
⚠Scaling from the wrong pivot (a corner instead of the center), making the pop look like a shift.
⚠Forgetting to reset scale when the object is reused from a pool, leaving it permanently large.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Punch Scale" game-feel effect to my project: Popping an object's scale up for an instant, then settling it back with a bounce.

How it works: Punch scale snaps an object noticeably bigger for a few frames the moment something happens to it — collecting a coin, ticking a counter, taking a hit — then eases it back to normal size with a slight overshoot.

Guidelines:
- Snap to the punched size near-instantly (one or two frames) — the pop reads from the snap, not from the growth.
- Settle back with an overshoot ease (back/elastic) so the object lands with a bounce instead of deflating.
- Scale the punch with the event's importance — a coin ticks at 1.15, a level-up can afford 1.6.

Avoid:
- Don't punch layout-critical UI that reflows neighbors — scale visually (transform), never through layout size.
- Don't queue punches on rapid repeat events — restart the current punch instead of stacking ever-bigger scales.
- Don't punch everything on screen at once; simultaneous pops compete and nothing reads.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.