Both boxes below show the exact same object under the exact same rotation, at rest. The left one is driven directly by roll, pitch, and yaw angles. The right one is driven by a quaternion built from those same angles — a mathematically different way of encoding the identical orientation. Drag pitch toward ±90° and watch the warning light up on the left: you've hit gimbal lock, where roll and yaw stop being independent. Then hit "Animate A → B" to watch the two representations disagree about how to get from one orientation to another, even though they agree on the endpoints.

Why Euler Angles Fail: Gimbal Lock

An Euler-angle rotation is applied as three separate rotations in sequence — here, yaw around $z$, then pitch around $y$, then roll around $x$: $R = R_z(\psi) R_y(\theta) R_x(\phi)$. Each of the three axes you rotate around is defined relative to the result of the previous rotation. When pitch reaches $\pm90°$, the roll axis and the yaw axis rotate into physical alignment — they become the same axis in space. At that instant you've lost a degree of freedom: turning the "roll" knob and turning the "yaw" knob do the same thing. This is gimbal lock, and it's not a bug in any particular implementation — it's a structural problem with using three sequential angles to describe orientation.

How Quaternions Avoid It

A quaternion represents a rotation as a single object $q = w + xi + yj + zk$, unit-length, encoding an axis and an angle directly: $q = \left(\cos\frac{\alpha}{2},\ \hat{n}\sin\frac{\alpha}{2}\right)$ for a rotation of angle $\alpha$ about unit axis $\hat{n}$. There's no sequence of dependent rotations, so there's no configuration where two axes collapse into one — the representation has no singularity. The tradeoff is that quaternions are less intuitive to read off directly (nobody thinks in $w,x,y,z$), which is why interfaces still expose roll/pitch/yaw sliders — but the rotation is stored and interpolated as a quaternion underneath.

The Other Problem: Interpolation

Gimbal lock is the dramatic failure, but there's a subtler one that matters just as much in animation and robotics: interpolating between two orientations. Linearly interpolating Euler angles component-wise (roll, pitch, and yaw each eased independently from A to B) does not produce constant angular velocity, and can take a visibly wrong-looking path — the object appears to wobble or overshoot, because three independently-eased angles don't correspond to a single smooth rotation.

Quaternions interpolate correctly via SLERP (spherical linear interpolation):

$$\mathrm{slerp}(q_0, q_1, t) = \frac{\sin[(1-t)\Omega]}{\sin\Omega}q_0 + \frac{\sin[t\Omega]}{\sin\Omega}q_1, \qquad \cos\Omega = q_0 \cdot q_1$$

This traces the shortest arc on the 4D unit sphere between the two orientations, at constant angular velocity — the rotational equivalent of walking in a straight line instead of a wobbly one. Click "Animate A → B" above to see both paths run side by side between the same two orientations.

What to Try

• Find gimbal lock: drag pitch to 90°. The indicator turns red. Now move roll and yaw — on the Euler side, they visibly do the same thing.
• Compare interpolation: click "Animate A → B" from the identity orientation. Watch the left cube's path versus the right cube's — the quaternion side moves at a constant, even rate; the Euler side does not.
• Reset and repeat from a different starting orientation to see the same story play out differently each time.