How To Add A Bouncing Scroll Indicator In Squarespace

That scroll indicator is at the bottom

A Scroll Down Arrow By Any Other Name

Squarespace adds a nice touch to the Brine family of templates by including an optional scroll indicator for index pages on the first section, also known as a scroll down arrow. But as you may have noticed in your time cruising around the internet, lots of sites spice things up a bit by having their scroll indicators bounce. Squarespace doesn't offer that natively. But with a bit of CSS, we can get that little arrow moving.

Note that this only works for the Brine family of templates. You can play with the number of seconds to alter the effect of the bounce.

The CSS Animation

First, make sure to turn on the scroll indicator in the Style Editor. Then put this in Custom CSS for site-wide treatment:

.Index-page-scroll-indicator   {
    bottom: 2vh;   
    position: absolute;
    -webkit-animation:bounce 1s infinite;
    -moz-animation:bounce 1s infinite;
    -o-animation:bounce 1s infinite;
    animation:bounce 1s infinite;
    transform: translateX(0%);
  }
  @-webkit-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }
   @-moz-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }  
   @-o-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
}
   @keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

In this code the bounce lasts one second, but you could change it to whatever you wish. Just make sure you change the length for all four browsers. So "1s" would change to "1.5s" if you want a 1.5 second bounce.

Also, I've moved the indicator up a small amount ("2vh"). You can delete that line if you'd like. It does alter the stroke of the bounce. But I prefer to make it a bit more visible that way.

Please, Stop That Bouncing!

You may not want the bouncing to go on forever if you want to maximize your visitors' attention to the other elements of the page. The bounce can get tiresome after a while. If so, you can set the bounce to stop after a number of iterations. So replace this:

animation:bounce 1s infinite; 

With this:

animation:bounce 1s; 
animation-iteration-count: 15;

You can set the iteration count to whatever you want. I find 15 or so to be about right given how long the site takes to load. Remember, you can change the duration of the bounce to whatever you want. Of course, there's lots more you can do with the CSS animation property.

Want To See More Squarespace Hacks?

Check out custom CSS tricks and other code hacks that will help you design a better Squarespace website.