Jump to content

Add growing roots to homepage

Recommended Posts

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);




Password: dothingsthatheal


Link to comment

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.


Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.