Categories
Squarespace Plugin

Squarespace Plugin: Side-by-Side sticky section

Side-by-side sticky section is an interesting feature that I wanted to bring into my website

Squarespace’s Designers crew is the best, when I am run out of idea, I usually visit their homepage to learn something new. One of the most catchy design there is a side-by-side sticky version where one side of section is sticked to top of screen while the other side is scrollable, like so: https://www.squarespace.com/websites/create-a-portfolio

Unfortunately, this feature is not supported natively on Squarespace by default, so I decided to create my own version of the feature so use it on my client’s website.

The feature, just like other custom plugin, will lean on summary-block, where user create a collection page (like blog) and display the summary-block as a page element, the injected code will then modify the default behavior to replicate the animation

What is needed to create similar feature
  • I created a blog collection with Image, Title and Excerpt
  • Css3 ‘sticky’ position will be used
  • In the page section, I place a summary-block in one side and a custom html block in the other site to trigger the script
  • Css and JS dependencies will be included in Custom Injection header
Create a collection with these details

After the collection and the custom code is injected correct way, I tested it on my own website, which was Feed Template (Brine Family)

The sticky effect really impressed me, and I decided to create variants out of it in a series of plugins which use the same mechanism, I will call it #storytelling type of plugin and will update this post accordingly when there is updates

Do you want similar effect on your site?

Leave a Reply

Your email address will not be published. Required fields are marked *