Here are instructions on how to easily make controls that look like this
You need a PNG file where each value of the control has a frame of a unique image, all stacked on top of each other.
These can be made with webknobman
https://www.g200kg.com/en/webknobman/index.html
or there are a couple of hundred in this download:
Cockos Incorporated Forums - View Single Post - LBX Stripper - create custom channel strips
(all the images we need are in the controls folder, put that whole controls folder where your O-S-C json's reside)
A bit of CSS can animate between frames. For a knob, add this to the CSS field: (replacing the filename)
background: url("controls\Timb_ExpoBloo96128.png")
no-repeat 0 #{-@{this.steps}*@{this.value}*@{this.height}}px;
background-size: auto #{@{this.height}*(@{this.steps}+1)}px;
Set the decimals field to 5 or higher
and set the steps field to the number of frames in the image (often 128).
Here is the CSS for a button:
background: url("controls\Timb_2018_BUTTONEXIT64-02.png")
no-repeat 0 #{-@{this.value}*@{this.height}}px;
background-size: auto #{@{this.height}*2}px;
Hide the original design by setting lineWidth and both alphaFill's to 0
