I've always been a sucker for basic physics. You know, the stuff introduced in elementary school, teaching us how physical objects can react and interact with the world around it. Recreating some of these physical phenomena in a digital environment is quite often done, e.g. in the world of gaming, but can it be done in a browser using fairly traditional tools?

It's all about delay

I'd say that the only thing not accurately represented in the above example is the perpetual motion of the pendula — they will never stop swinging. Other than this fact, this demonstration shows a little phenomena called a "pendulum wave". The pendulum wave consists of a series of pendula with increasing swing periods, so that when simultaneously released, produce the effect of a changing transverse wave that cycles back to the beginning conditions. This wave diminishes in wavelength, then looks very chaotic, then comes back to the straight line from which it started. The lengths of each pendula is related to the one next to it in a way that after a certain number of swings, they are back in phase with each other.

In case you're wondering — no, I am not refering to the animation-delay property in CSS. I'm simply talking about the slight delay caused by the increasing lengths of each individual pendula. Consider the following:

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

    .pendulum-#{$i} {
        bottom: 16px * ($i - 1);
        transform-origin: center -#{$length}px;
        animation-duration: #{$animation-duration}s;
        z-index: -#{$i};

        &:before {
            animation-duration: #{$animation-duration}s;
        &:after {
            height: #{$length}px;
            margin-top: calc(-#{$length}px + -#{$p-radius});

In this particular demonstration, $p-max-length and $p-radius is set to 512 and 32, respectively. Hence, we can quickly see that we decrease the length for each iteration, causing the first pendula to be the longest. The $period equation represents a very rough take on the formula T = 2π √L/g, or:


The shading effect created by the lamp (hold down shift to see it in effect) is used by simply applying a gradient with the same exact animation timing, rotating it from minimum swing degree to maximum.

A simplified example

Phew, that was quite a deep dive, wasn't it? If you'd like an example with things a bit simplified, have a look at the following:

For each increment in this example, we increase the width and height by 2em, decrease the top position by -1vmax, center each pendulum with calc(50% - size/2), and increase the animation duration with .01 seconds. The slight increase in duration, together with the larger sizes, creates basically the same pendulum wave effect as we had in the first example.

Share your own!

Have any creations in the same spirit as these laying around? I'd love it if you'd share them, and for that matter, feel free to fork and have a go at the demonstrations I've included. Also, make sure to let me know if you think I've done anything weird or plain wrong, or how I could improve the aforementioned examples — I'm here to learn as well!

1,671 0 12