OSC . CSS

CSS properties to animate numeric values where they are needed using oscillators and envelopes. Source available on GitHub

Basics

An oscillator is a function that returns a value between -1 and 1 over time. Or in different words: it oscillates between -1 and 1. You are likely already familar with the most common oscillator: sin.

While oscillators are usually associated with audio synthesis, they are also great for animations. Combining oscillators with envelopes can create complex and organic looking animations with very few lines of CSS.

Another benefit is, that instead of defining a several keyframes manually, you can use an oscillator to animate any numeric value right in place:

Different kinds of oscillators

There are 4 oscillators: sin, cos, saw and tri. And there are two versions of each:

sin cos saw tri SIN COS SAW TRI

Using an envelope

Envelopes are used to control the amplitude of an oscillator. In audio synthesis, one common use is to control the volume of a sound. Here we can use it to control the amplitude of an animation.

The builtin envelope is a so called DAHD envelope generator. It has 4 stages:

Note how a simple setup with 2 oscillators, the envelope and a single element can already create a complex animation.

Visualising the waveform

Useful to visualise a calculation. But since ther are many elements, this gets rather heavy on the browser. This site uses a Web Component with IntersectionObserver to set --osc-state to running when the element is in view.

Adjust the different parameters to see how the waveform changes. Envelope parameters are durations in seconds, frequency is in Hz.

Get creative!

So far we have only used the translate property to animate an element. But you can use any property that accepts a numeric value! And you can use multiple oscillators and envelopes in a single animation, and of course nest them.

And don't forget all the math functions that CSS supports! Like pow, sqrt, log, round and many more.

As usual MDN has a list of all advanced CSS math functions. Make sure to check them out, don't worry about understanding all the math; just try things out! This approach is prone to happy accidents.

Here I threw var(--env-amp) into log() not sure what it would do. But I like what it does!

Combining min() and --osc-sin? Sure, why not! Looks like a ball doing a stomp attack to me.

Don't forget about colors and gradients and make trippy visuals for your next big gig.

More examples

More examples are added over the next weeks and months. Meanwhile, there are a few more in this codepen collection.

If you create something cool with it, make sure to tag it with osc-css or share it with me on bsky.