I've been attempting to code a Figma design where the element starts at the middle of the screen height. As the user scrolls, the elements move upwards and stay visible until they are out of view, like in the example below.
https://i.sstatic.net/imEbD.gif
So far, I have only managed to achieve standard scrolling behavior where any overflow beyond the container is hidden
<div class="box">
This box has specified dimensions for its height and width. If too much content exceeds
the assigned height, it will lead to an overflow situation. Setting overflow to
hidden ensures that any overflow content is not visible.
</div>
.box {
margin-top: 50vh; /* or top: 50vh; */
width: 200px;
height: 100px;
overflow: scroll;
}
Do you think it's feasible to implement this?