How to Create a Section Reveal Effect on Scroll in Squarespace
Want to add depth and visual intrigue to your Squarespace website? Section reveal effects transform the scrolling experience by unveiling content layer by layer as visitors move down your page. This dynamic animation technique keeps users engaged and creates a premium, polished feel that makes your site stand out from the crowd.
With SquareKicker's Sticky Sections tool, you can create stunning section reveals without writing a single line of code. In this tutorial, you'll learn how to use the sticky bottom feature combined with section layers to craft this eye-catching effect. Whether you want to apply it to a single section or across your entire page, this guide will walk you through every step.
Understanding How Section Layers Work
Before diving into the tutorial, it's helpful to understand how Squarespace handles section layers. Think of your website sections like a deck of cards. The section at the top of your page is actually on the bottom of the deck, while the section at the bottom of your page sits on top of the deck.
By default, all sections have a layer value of zero, meaning they're all on the same level. As you scroll down, sections naturally flow over each other in their default order. When you introduce sticky positioning and adjust layer values, you can control which sections appear on top and create that revealing effect.
The Difference Between Sticky Top and Sticky Bottom
SquareKicker offers two sticky section options, and understanding the difference is key to creating section reveals.
Sticky Top makes a section stick to the top of your screen as you scroll down. Other sections will flow on top of the sticky section as you continue scrolling.
Sticky Bottom works differently. It makes a section stick to the bottom of your screen until it comes into view at its natural position, then it scrolls away normally. This behavior is what creates the reveal effect, allowing sections above to peel away and unveil content below.
Creating a Single Section Reveal
Let's start by creating a reveal effect between two sections.
Step 1: Apply Sticky Bottom to Your Middle Section
Navigate to the section you want to reveal (typically the one in the middle or lower on your page). Click on the SquareKicker Extension tools for that section, select Advanced, then click on Sticky Section. Choose Sticky Bottom and set the value to zero, which means it will stay sticky at the bottom of the screen.
Step 2: Use the Hide Feature to See All Sections
Here's where things get interesting. When you apply sticky bottom, you might notice your first section disappears. This happens because the second section is now layered on top of it. To see all your sections while you work, you can use SquareKicker's Hide SK Customizations feature.
Click on the top SK menu, select Support, then click Hide SK Customizations. This temporarily hides all your SquareKicker styling so you can see your Squarespace site in its default state.
Pro tip: Hold down Option+H (Alt+H on PC) to quickly toggle this feature on and off. This keyboard shortcut is a game-changer for efficient design work.
Step 3: Adjust Section Layers
Now that you can see all your sections, it's time to bring your first section forward. Navigate to that top section, go to Layout in the SquareKicker tools, and find Section Layer. Increase the layer value to 1.
Since all other sections are at layer zero, setting this to 1 brings it to the front. Now when you scroll down, you'll see your top section peel away to reveal the section underneath. Beautiful, isn't it?
Creating Section Reveals Across Your Entire Page
Ready to take it further? You can apply this effect to every section on your page for a cascading reveal experience.
Step 1: Apply Sticky Bottom to All Sections
Starting from the top of your page, apply Sticky Bottom (set to zero) to each section. Work your way down the page, applying the same setting to every section you want to include in the reveal effect.
Step 2: Set Your Section Layer Order
This is where the deck of cards analogy really comes into play. You need to flip the section order so the top section is always visible. Use Option+H to reveal all your sections, then adjust the layers from top to bottom:
First section (top): Set to layer 3
Second section (middle): Set to layer 2
Third section (bottom): Set to layer 1
This creates a hierarchy where the top section is always in front, the middle section is behind it, and the bottom section is at the back of the deck.
Step 3: Test Your Section Reveals
Scroll back to the top of your page and watch the magic happen. As you scroll down, each section smoothly reveals the one below, creating a sophisticated, layered scrolling experience.
Adding Borders for Extra Polish
Want to make your section reveals even more defined? Adding a subtle border between sections creates a crisp line that emphasizes the reveal effect.
Navigate to each section's SquareKicker tools and select Border. Choose to add the border only to the bottom of the section by deselecting the other sides. Set the border width to 1 pixel and choose a color that complements your design. A dark green or contrasting color works beautifully to create that clean separation.
Apply this border treatment to all sections in your reveal sequence. Now as you scroll, you'll see a refined line traveling up the screen, adding an extra layer of visual interest to your design.
Key Takeaways
Creating section reveal effects is all about understanding three core concepts:
Sticky bottom positioning keeps sections stuck to the bottom of the screen until they reach their natural position
Section layers control which content appears on top, with higher numbers appearing in front
The deck of cards principle reminds you that the top section is on the bottom of the deck, and the bottom section is on the top
With these tools at your disposal, you can create dynamic scrolling experiences that captivate visitors and showcase your content in an engaging, memorable way.
Next Steps
Section reveals add a premium, interactive quality to your Squarespace website that keeps visitors engaged and exploring your content. Whether you choose to highlight a single important section or create a full-page cascading effect, this technique demonstrates the power of combining sticky positioning with layer control.
Ready to create stunning section reveals on your own site? Start your 14-day free trial of SquareKicker today and unlock the Sticky Sections tool along with dozens of other powerful design features. No credit card required, and you'll keep all your customizations when you choose the plan that's right for you.
Explore more tutorials and design inspiration at squarekicker.com/tutorials.
