Pendulum Effect

Should I name this post "CSS3 for a Physics class"?

TL;DR;

See the Pen Pendulum by Khanh Hua (@khanhhua) on CodePen.

Recipe

To simulate real a pendulum, we need to make the DOM elements have a ball shape attached to the ceiling.

Physics

  1. CSS Transform: rotate and transform-origin: DOM elements do not have a weight (lol), they cannot swing. We rotate them around a point at top to make them have the appearance of swinging the around a pivot at top of the container.
  2. CSS Animation:
    • animation-duration: Period of each pendulum varies depending on the string length. Simple pendulum model is used to calculate the specific duration for each DOM element. Notice that time is measure in seconds.
    • animation-direction: alternate is used to make the pendulum to fluctuate back and forth within the period.
    • animation-timing-function: ease-in-out is used to simulate the sine wave.
  3. CSS Keyframes: Two keyframes

    • from: rotate the DOM element by 15deg
    • to: then rotate the DOM element by -15deg

    make the DOM element swing left and right 30deg around the vertical axis.

With the help of SCSS, we can calculate the period of fluctuation of each of the ten pendulums using classical mechanics for small angle theta.

T = 2 * π * sqrt(L/g)

All value are measured using the metric system: meter and second.

@for $i from 1 through 10 {
  $length: $p-max-length - 16 * ($i - 1);
  $G: 9.8;
  $period: (2 * 3.1417 * sqrt(($length/100) / $G))/2;
  $animation-duration: $period/2;

  .pendulum-#{$i} { 
    ... 
    animation-duration: #{$animation-duration}s;
    ..
  }
}

You may notice $animation-duration is divided by 2 and yet there is a factor of 2 in $period. First, the factor of two is kept for the sake of consistency - that how the formula goes, so I keep it there. Animation duration is taken as half of the calculated because the difference in how CSS works and how physicists think.

Animation duration is the time to finish a CSS animation from from to to or 0% to 100%.

@keyframes swing {
  0% {
    transform: rotate($swing-magnitude);
  }

  100% {
    transform: rotate(-$swing-magnitude);
  }
}

Meanwhile, a period is defined to be the amount of time for an object (e.g. a pendulum) goes from point A back to point A again.

Periodampwave (credit: wikimedia.org)

As you can see, period is twice the amount of animation duration! If you can this wrong, the pendulums would appear to be swinging on the Moon (I guess).

Look and Feel

  1. The pendulum: The DOM elements have a square shape - we apply a border-radius of 50% to make a perfect circle.
  2. Glow: Apply a white box-shadow around the DOM element to make it glow in the black background.
  3. The string is a pseudo element :before with width of 1px and background-color white. margin-left is applied to shift the string a radius unit distance to the center of the DOM element.
  4. A second animation effect is applied to make the glow more appealing.

Tools

Unless you are a super HTML and CSS fanatic, I would recommend using SCSS and Jade to make this simulation. Enjoy!