Tweening

Tweening, short for in-betweening, is a computer graphics and animation technique used to generate intermediate frames between two keyframes to create the illusion of smooth motion. By determining the values of various properties at in-between times, a tweening system can produce frames that transition from the starting state to the ending state without manual drawing of every frame.

In practice, tweening relies on interpolation: position, rotation, scale, color, opacity, and other attributes are interpolated along a timeline. Linear interpolation produces uniform changes, while easing functions modify the rate of change to mimic natural motion, with programs often offering ease-in, ease-out, and ease-in-out options. More complex methods use cubic curves or splines (Bezier, Hermite) to control acceleration and jerk, and rotation can use spherical linear interpolation (slerp) for smoothness.

Common types of tweening include linear, bezier-based easing, and spline-based approaches. Some systems interpolate hierarchical properties, so a parent object’s motion influences its children. In 3D contexts, quaternion-based rotation may use slerp to avoid gimbal issues.

Applications span 2D animation, 3D animation, motion graphics, user interface transitions, and game development. Web and software tools implement tweening to interpolate CSS properties, canvas attributes, or object transforms, reducing manual frame-by-frame work.

Historically, traditional animation relied on in-between artists to draw frames; digital tweening automates this step once key poses are defined. Limitations include potential unnatural timing if curves are misused, and the need for artist oversight when multiple properties or constraints interact. See also: interpolation, easing function, keyframe.