How to animate a strip while scrolling?

Question

css

There are two blocks. Initially, there is nothing between them, an empty space.

The task is to make a normal stripe that, when scrolling, will stretch from the blue block to the gray one. (when the screen with blocks appears in the field of view).

Answer 1

You need to add a stripe block, zero height add a height to the transition. When scrolling in js, add a class with the desired height to it, and remove it after a while setTimeout. You will also need to add a label so that several consecutive scrolls do not crash.