Add growing roots to homepage

I am trying to add an animation of roots that grow as you scroll down the homepage. I want them in the color #33443C and probably 15% opacity.

I used this code in the css customization area but I can't get it to work. Does anyone know if what I'm thinking is possible?

body {
  margin: 0;
  padding: 0;
  background-color: #E8E8E8;
}

.root {
  position: absolute;
  width: 2px;
  background-color: #33443C;
  opacity: 0.15; /* Set opacity to 15% */
  animation: growRoot 2s linear infinite;
}

@keyframes growRoot {
  0% {
    height: 0;
    transform-origin: bottom;
    transform: scaleY(0);
  }
  100% {
    height: 100vh;
    transform-origin: bottom;
    transform: scaleY(1);
  }
}
 

site: 

https://ladybug-accordion-x3wy.squarespace.com/

Password: dothingsthatheal

I'm not sure what is going on here but I can say that you can't create a scroll based effect with CSS only. CSS has no mechanism to monitor scroll position. You need JavaScript to monitor scroll position.

CSS can do an animation over time.

I don't have a solution to what I think what you might be asking for.