How to correctly implement block transformation during scrolling?

Question

css

Good day!
Tell me, please, how to correctly implement a smooth transformation of the block, as on this site? The first block turns into a sidebar during scrolling down (it transforms into a polygon), and when scrolling back, it returns to its original shape.

Path of transformation

one

2

3

I tried to implement this effect using clip-path. This is how https://jsfiddle.net/denisyao/Le49ez9x/3/
But it turned out clumsily.
1. How to make the transformation stop when the scrolling stops? During scrolling, my block immediately passes from the initial state to the final state, but it is necessary that there be an intermediate state, as indicated in the picture "2". Or rather, how to implement a pause for transformation when scrolling is stopped?
2. While scrolling up, the block, before returning to its original state, turns into a rectangle. And it is necessary that it retains the shape of a polygon throughout the entire transformation path. How to do it right?