Slow in and slow out — more frames near key poses and fewer in the middle — creates natural easing

Slow in and slow out (also called ease in/ease out) describes the acceleration curve of natural motion: objects rarely change velocity instantaneously. Instead, they accelerate gradually from rest (slow out of the starting pose) and decelerate gradually before coming to rest (slow into the ending pose). In drawn animation, this is achieved by placing more drawings near each key pose (making that region slower) and fewer drawings in the middle (making the middle faster). In digital animation this is an easing function: ease-in-out curves in CSS, Bezier handles in keyframe editors, or lerp with damping. Linear interpolation between two states looks mechanical; easing makes the same transition feel physical and intentional.

Examples

CSS animation: animation-timing-function: ease-in-out. In p5.js: x = lerp(x, targetX, 0.1) — the lerp factor creates exponential approach (fast then slow). Compare lerp(x, target, 0.5) (fast, snappy) with lerp(x, target, 0.05) (slow, floaty).

Assessment

Explain slow-in/slow-out using the ‘number of drawings’ frame of reference. Then implement it in one line of p5.js or GLSL and describe its visual effect.