D
D
Dennis Nightingale2018-03-20 16:15:58
css
Dennis Nightingale, 2018-03-20 16:15:58

How to correctly implement block transformation during scrolling?

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
5ab105e1c4a70812603479.jpeg

2
5ab1061596374815338395.jpeg

3
5ab1062f99702177254972.jpeg


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?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question