im a designer trying to prototype a unique scroll behavior. Please bear with me.

Here's a GIF animation

Context:

• Basically, i want a div to change height (up or down to an arbitrary height) based on its position in a parent.

• Specifically, a div should decrease in height, down to 0, as it leaves the parent's view and increase, from 0, otherwise.

• When you combine this with rounded corners, it gives a unique effect.

• I have mostly been experimenting with getBoundingClientRect in the context of a parent div, and using different math to change the style/height of the div.

So far, the effect doesn't work so smoothly.

Here's a working demo (the pink rectangle is the one that should change, i have not figured out how to apply the effect to all of them, but that's a seperate q :)