Kfridge

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 having this same issue with a client. Not sure how ti fix it yet.

RPReplay_Final1695131370.mov Above is the example of what I am looking to do on my own site. This is Blooming Co Designs. I have a background with text images in inline but want them to be seen better on mobile without changing my desktop design. Open to different ideas or help with code to do the above idea!