Physics and Animation

Jun 6, 2026

Most of the animation and load-in motion that you see on the internet can be credited to the discovery of damped oscillations. Damped oscillations are part of the basic fundamentals in oscillating physics and they are used in many real world scenarios. From bridges to pendulums to web design, I have used these principles to make exceptional number scrollwheel animations. Here is an example below.

Number Slider Test

1

1 / 1000

Animated Timer

1
:
0
5

Every digit animates independently when the timer updates.

Variables...

Jun 6, 2026

In damped oscillation physics, The damped angular frequency is often what controls how much an element "bounces". The equation can be described as:

ωd=ωn2−ζ2\omega_d = \sqrt{\omega_n^2 - \zeta^2}

This equation describes how much energy a system is losing over time

  • ωd\omega_d = damped angular frequency
  • ωn\omega_n = natural angular frequency
  • ζ\zeta = damping parameter

The damping parameter ζ=(b/2m)2\zeta=(b/2m)^2 is what controls how much the element "bounces". Since UI elements have no physical mass, I just set the value to 1.