Animation is more than just moving things from point A to point B. It's about conveying weight, energy, and intent. By applying lightweight physics simulations, we can create animations that feel "correct" to the human eye because they mimic the rules of the physical world.
Here are 9 fundamental principles demonstrated with a custom JavaScript physics engine.
1. The Bouncing Ball
Gravity accelerates the ball downward; energy is lost on each collision with the floor.
2. Coming to a Stop
A ball enters from the left and gradually loses velocity due to friction until it halts.
3. Squash and Stretch
Simulating mass conservation by deforming the shape upon impact without losing volume.
4. Pendulum Swing
Gravity-driven oscillation around a fixed pivot point with slight damping.
5. Spring Tension
A mass attached to a spring oscillates back and forth, seeking its resting equilibrium.
6. Projectile Launch
Combining horizontal velocity with vertical gravitational acceleration to form a curve.
7. Drag and Terminal Velocity
Comparing two objects falling: one with high drag and one with zero drag.
8. Momentum Transfer
An active ball strikes a stationary one, transferring its kinetic energy upon impact.
9. Fluid Viscosity
Movement through a thick medium (like honey) vs a thin one (like air).
Why Physics-Based Animation?
Traditional "tweening" (moving between fixed keyframes) often results in robotic, lifeless motion. By implementing a basic Euler Integration loop, we allow the system to calculate the next state based on forces rather than just time.
// Simple Euler Integration
velocity += acceleration * deltaTime;
position += velocity * deltaTime;
This approach allows for emergent behavior. When you add a collision, the ball doesn't just stop at a specific Y-coordinate; it reacts to the impact, loses a percentage of its kinetic energy (restitution), and continues its simulation.
Key Takeaways
- Weight is communicated through acceleration, not speed.
- Friction gives a sense of surface texture.
- Squash and Stretch preserves the illusion of organic mass.
- Drag defines the medium the object is moving through.
Check out the source code to see how these lightweight simulations are implemented in vanilla JavaScript.