How to create a sticky scrolling effect on Squarespace (using the pin feature)
Squarespace recently introduced a new Pin feature, allowing you to "stick" elements to specific positions on the screen. Here's a quick guide on how to use it and make your designs stand out with a sticky scrolling effect.
How the pin feature works
Pin to Top: The element stays stuck to the top of the screen within the same section as you scroll.
Pin to Middle: The element remains pinned to the middle of the screen within the same section while you scroll.
Pin to Bottom: The element sticks to the bottom of the screen within the same section as you scroll up or down.
Creating a sticky scrolling effect
Split Screen layout using the Sticky Scrolling effect (& Squarespace PIN feature) on Desktop — the text is stuck on the left side of the screen and the content is scrolling by on the right side.
A great use case for the Pin feature is to create a split-screen layout.
Here's how you can achieve it on a desktop design
Design Layout:
On the left-hand side, place an image or visual that represents your offering.
On the right-hand side, add all the text and content you want to scroll through.
Pin the Image:
Pin the image (or any visual element) to the center (or top) of the screen so it stays fixed as users scroll down the page.
Content Scrolling:
Instead of creating multiple sections, place all the text, accordion items, and other content blocks into one section on the right side. As users scroll, the image remains stationary on the left.
Split Screen effect on mobile
On mobile, you can pin items to the top for a sticky effect, ensuring a smooth and responsive experience.
For a more dynamic effect, you can move an element forward and have your text or content scroll behind the pinned image, creating a layered visual effect.
Why use the pin feature?
The Pin feature allows you to achieve a modern, sticky scrolling effect that keeps key visuals or information in view.
Helps to enhance user experience, especially for storytelling or showcasing product/service details in a compelling way.
Give the new pin feature a try and see how it can elevate your design. Let me know if this was helpful and if you use the pinning feature in your next Squarespace project!
