Web Animations

Glides the seek line on the GPU, and breathes the filament where there is no signal.

A post with its tracks listed, and the player bar along the bottom of the screen — The seek line glides under the bar, and on an iPhone its filament breathes on a loop.

How Riff uses it

While a track plays, each moving layer of the seek line (the played part, the wire, its heart, the bloom and the knob) runs one linear element.animate() from where the time is to the end of the track, at the playback rate. They are aimed again when the time jumps (a seek, a pause, a stall, a new rate or track, or drift past 150 ms), and the bloom is animated through pseudoElement: '::after'. Where there is no analyser (on iOS, for a cross-origin file, or through the video element) the filament's heart also breathes on an infinite 2.6 second opacity loop.

Why

Transform animations run on the compositor, so the line glides even while the page's own script is busy, and nothing is written each frame.

Without it

Without the API the line rests where timeupdate puts it, four times a second.

Where

plugins/riff/assets/player/media.js, line 120

glides.push( node.animate( frames, { ...timing, ...extra } ) );

plugins/riff/assets/player/filament.js, line 336
```
breath = heart.animate(
```

Links open the source at the commit this page was published from.

Specification: Web Animations. Reference: Web Animations on MDN.