Border Image Demo

This is a demo of using the CSS Paint API in conjunction with scroll-driven animations.

Unlike the Starfield demo, a scroll event listener is used to update a single CSS variable called --progress. The paint worklets for each border include this variable in inputProperties, which means that they re-render each time a scroll event is triggered.

Since it may not be super obvious, the thing driving these animations are CSS Variables which can be seen in the inspector:

CSS Variables in Inspector

The extra space and repetition below are just to give the page enough length to really see the effect.

References