Super Plugin Info

• Works with Squarespace 7.0 (Brine)

• Uses Scroll Indicator (Brine Feature)

• Requires Personal Plan or Higher

• Uses CSS Editor

Step 1. Enable Scroll Indicator in Squarespace 7.0 (Brine Template)

Enable the Index Scroll Indicator in site styles and set the color’s opacity to 0 – show me this setting. Keep in mind that Squarespace only shows the scroll indicator on index pages.

Step 2. Add this code to Custom CSS

Step 3. Customizable Options

These options are available in Custom CSS.

Desktop Style

• background: url = replace with your own image or keep the Ghost default

• height: 300px; = adjust the height of the scroll circle

• width: 300px; = adjust the width of the scroll circle

• filter:invert(1); = inverts the file if you need it white or black

• margin-bottom: 50px; = spacing below the scroll circle

• animation: circle 15s; = the speed of the rotating animation

Mobile Style

• height: 200px; = adjust the height of the scroll circle

• width: 200px; = adjust the width of the scroll circle

• margin-left: 80px; = spacing to the left of the scroll circle

• margin-bottom: 50px; = spacing below the scroll circle

• animation: circle 15s; = the speed of the rotating animation

Animation Keyframes

• Do not change any of the keyframe values – this gives the scroll down indicator circle its rotating animation.

Troubleshooting (Plugin Not Working)

• Disabling AJAX loading in site styles is recommended.

• If you can’t see the indicator, ensure it’s enabled in site styles.