Tweening and Easing: Making UI and Animations Feel Alive

Open any game engine, create two objects, and move one toward the other using linear interpolation. Watch it move. There is something subtly wrong with it - mechanical, robotic, dead. Now apply an ease-out curve to the same movement. Suddenly the object feels like it has momentum. It feels like something physical is happening. The rules of the game world have not changed. Only the interpolation curve has.

Easing is the single cheapest improvement available to a game feel designer. It costs almost nothing to implement, requires no new assets, and requires no changes to gameplay systems. Yet it has an outsized effect on perceived quality. Games that use linear interpolation everywhere feel cheap. Games with well-tuned easing feel polished - even when everything else is identical.

Why Linear Movement Fails

Nothing in the physical world moves at constant velocity without an external force maintaining it. Objects accelerate from rest under applied force and decelerate from friction or resistance. When the brain sees linear motion - constant velocity from start to finish - it flags it as artificial. The signal is: this does not belong to the physical world I understand.

This is not merely aesthetic. Linear motion in a UI element makes the interface feel unresponsive. Linear motion in a character makes them feel weightless. Linear motion in a camera makes the game feel like a spreadsheet. Each instance is a small erosion of the player's belief that the game world is real. Easing restores that belief by making digital objects behave like physical ones.

The Easing Function Reference

Ease-in starts slow and accelerates toward the end. This communicates an object gathering momentum - launching, accelerating, charging up. Use it for: projectiles leaving a weapon, characters beginning a run, objects falling under gravity, UI elements leaving the screen. Ease-in feels like effort and build-up.

Ease-out starts fast and decelerates toward the end. This communicates an object losing momentum - arriving, settling, landing. Use it for: projectiles arriving at a target, UI panels popping onto the screen, objects coming to rest, camera arriving at a destination. Ease-out feels like arrival and resolution. It is the most commonly useful easing type for UI work because most UI interactions are about things arriving into view.

Ease-in-out is slow at both ends and fast in the middle. It communicates smooth, deliberate motion - not urgent, not lazy, just controlled. Use it for: camera panning between positions, UI transitions between states, character repositioning. This is the default for anything that needs to feel smooth and professional without communicating urgency or arrival.

Elastic easing overshoots the target and bounces back to settle. It communicates springiness, energy, and personality. Use it for: UI button press and release animations, cartoon character impacts, playful UI notifications, any context where you want a sense of physical spring and energy. Elastic easing is the most characterful of the easing types - it gives objects personality. Use it deliberately, not universally.

Bounce easing simulates the object hitting a surface and bouncing several times before settling. It is more physical and less springy than elastic. Use it for: objects landing on surfaces, reward items dropping into the UI, confirmations that feel like something has definitively arrived. Bounce communicates finality - whatever just moved is now definitely there.

Back easing pulls back slightly before moving forward (ease-in-back) or overshoots slightly before settling (ease-out-back). It communicates anticipation and follow-through - two of the Disney animation principles encoded as an easing function. Use it for: characters stopping after a run, UI elements that settle with a slight overshoot, any animation where you want to suggest physical momentum without the full bounce of elastic.

Frame-Independent Lerp: The Pattern Every Developer Should Know

The most commonly used real-time interpolation technique in games is the frame-independent lerp, sometimes called spring lerp or exponential smoothing. Rather than tweening between two fixed values over a fixed duration, you continuously interpolate toward a target each frame. This produces a characteristic feel: fast initial movement that slows as it approaches the target, settling asymptotically.

This pattern is useful for any value that needs to smoothly track a target that may itself be moving: camera following a player, a health bar chasing the actual health value, a floating UI element tracking a world position. The smoothing factor controls the feel - high values produce fast, snappy tracking; low values produce slow, floaty tracking.

The critical implementation detail: never use `lerp(current, target, smoothFactor * deltaTime)` directly. This formula breaks at low frame rates because the lerp factor becomes unpredictably large. The correct frame-independent form uses the exponential decay: `lerp(current, target, 1 - pow(1 - smoothFactor * deltaTime, 1))`. This version produces identical visual results at 30fps, 60fps, and 144fps.

Squash and Stretch via Scale Tweening

One of the most practical applications of tweening for game juice is implementing squash and stretch as a scale animation triggered on events. No physics engine required, no complex rig - just a coroutine or tween sequence that manipulates the object's local scale on specific frames.

The pattern for a landing squash: at the moment of landing, rapidly tween to a squashed scale (Y reduced to 0.7, X increased to 1.3 to maintain volume), then tween back to the original scale over slightly longer. The squash phase is fast (40% of the total duration), the recovery phase is slower (60%). The asymmetry is important - a fast squash followed by a slower recovery communicates the absorption of impact energy, which is physically accurate.

The volume conservation rule applies here exactly as it does in animation: if you reduce Y scale to 0.7, increase X and Z scale by the reciprocal. In 2D: if height becomes 0.7, width must become approximately 1.43 (1 / 0.7) to conserve area. Violation of this rule makes squash and stretch look wrong even to players with no animation knowledge - the brain detects the volume change automatically.

Where to Apply Easing

The answer to 'where should I apply easing?' is: everywhere something moves. This is not hyperbole. Every interpolation in your game that currently uses linear movement is an opportunity for a cheap quality improvement. UI panels sliding in and out. Health bars updating. Camera transitions. Character stopping and starting. Projectiles launching. Damage numbers floating upward.

The appropriate easing type depends on what the movement is communicating. Arrivals use ease-out. Departures use ease-in. Smooth traversals use ease-in-out. Playful or springy objects use elastic. Impacts and landings use bounce or back. The choice is not arbitrary - it is informed by the physics the movement is simulating and the emotion the moment is serving.

One caution: do not apply elastic or bounce easing to objects that are supposed to feel heavy and solid. A boulder landing with a cartoonish elastic bounce communicates the wrong material. Easing choices must be consistent with the physical properties the object is supposed to have. Hard, rigid, massive objects ease-out on arrival and ease-in on departure. Soft, springy, light objects use elastic and bounce. Matching the easing to the material is as important as applying easing at all.

Easing as the Foundation of Animation Quality

Professional animators spend years developing intuition for timing and easing. Game developers often skip this entirely, using whatever default interpolation the engine provides. The gap in quality between a game with carefully tuned easing and one with default linear interpolation is immediately perceptible - even to players who have never thought about animation in their lives.

The good news is that easing does not require animation expertise to improve. It requires only awareness and iteration. Take any linearly interpolated movement in your game. Apply ease-out. Play it. Compare. The improvement is almost always immediate and obvious. That comparison - linear vs. eased, side by side - is the fastest way to build intuition for why easing matters and develop judgment for which easing serves each specific case.