How to make the mouse scrolling sequence frame animation implemented by canvas smooth and flexible?

for example, you can see that some websites use canvas to animate sequence frames of pictures, and some are bound with mouse wheel events, such as http://www.clearmotion.com/te.

.

I tried it myself and found that the scrolling was not smooth. The mouse stopped immediately
https://jsfiddle.net/Deryckxi.

.

how to deal with this in order to achieve the effect on the station


an idea (we don't know if we actually do this): every time we scroll and play a certain number of frames, if there is continuous scrolling, we should do anti-dithering treatment, and play the frames according to the scrolling distance. The effect of looking at the website also seems to use a slow function, because scrolling once is not very smooth from start to stop.

Menu