Skip to main content

quarticInOut: Symmetric Fourth-Power Motion

Mirrored quartic curves creating extreme bidirectional acceleration​

The quarticInOut function combines fourth-power acceleration and deceleration through scaled piecewise curves. The first half creates dramatic acceleration while the second half mirrors this with equally dramatic deceleration.

f(t)={8t4if t<0.5−8(t−1)4+1if t≥0.5f(t) = \begin{cases} 8t^4 & \text{if } t < 0.5 \\ -8(t-1)^4 + 1 & \text{if } t \geq 0.5 \end{cases}

The scaling factor of 8 ensures continuity at the midpoint while maintaining the extreme acceleration characteristics of quartic polynomials throughout both motion phases.

Live Editor
const fragment = () => {
  const w = 0.01
  const t = iTime.fract()
  const y = quarticInOut(t)
  const Y = quarticInOut(uv.x)
  const a = vec3(0.8, 0.1, 0.6)
  const b = vec3(0.2, 0.9, 0.4)
  const c = a.mix(b, y).mul(uv.x.step(t))
  const lines = mmin2(smoothstep(0, w, uv.mod(0.1).min(uv.sub(vec2(t, y)).abs())))
  const curve = stroke(uv.y.sub(Y), 0, w).mul(c)
  const color = lines.oneMinus().mul(0.2).add(curve)
  return vec4(color, 1)
}