Animated Elements on Collection Pages
Look, I know you’re curious about what’s possible when you outsource development, especially in Squarespace. I also know that reading about development specs is about as exciting as … well, it’s boring. So, to make this as riveting as possible, I’m giving you the highlights here, without getting too in the weeds.
In this post I’m discussing the absolutely enthralling world of animations (that’s sarcasm, depending on who you ask). BUT, what makes this little bit of CSS different, is that it’s applied to the Squarespace blog collection page - which isn’t exactly known for it’s flexibility.
So, I mean, buckle up is all I’m saying.
I focus on one example in this post, because at the nexus of my client’s idea and my undying passion for CSS-based animation lies this feature idea, aka the Floating Nimishas. There are tons of ways to use the techniques discussed below for your own very cool blog collection page design. So, let your design mind go wild - and then gimme a call.
This post is part of a Feature Spotlight collection. It’s here to give you, dear web designer, a deeper look into what’s possible when teaming up with a Squarespace developer (like me!). Be sure to sign up for the newsletter to get the latest dev insights & book a DEV SESSION for your next project.
Animations on Collection Pages
This feature refers to animated elements on collection pages within Squarespace. Due to the built-in structures and limitations of collection pages in Squarespace, they are notoriously difficult to customize or make pop in a way that separates you from the pack. For those outside-the-box designers, this feature might be exactly what you’re looking for.
Blogging and Squarespace
Blogging on Squarespace is a great way to showcase your POV as a brand and to attract new leads with long-game SEO practices. Blog posts are generated from Squarsepace collection pages. These collection pages have the capability to house a virtually endless number of blog posts per collection. However, they lack the customization of other Squarespace pages - especially in Fluid Engine. There is simply no way to add blocks to the collection page sections. So, in order to make a Collection Page really stand out, you will most likely rely on CSS-based codes and a clever Squarespace development techniques.
CSS and Collection Pages
Because you’re not able to add blocks to Collection pages, you’ll need to add elements via CSS using pseudo elements. This technique attaches your custom element to a built-in structure on the Collection page. In the above example, the Floating Nimishas are attached to the blog post item using this technique. CSS is used to place the element (usually an image) and later to animate it. Pseudo elements require a fairly advanced grasp on CSS syntax, as you’ll need to manually make it responsive.
Scope and Squarespace Development
The coolest part of this feature, in my nerdy developer opinion, is the fact that as more blogs are published, more Nimishas (or the element of your choice) will pop up and float automatically. This is because I used scoping techniques that tells the site to produce more Nimishas when more blog posts get published. Essentially, via CSS, I’m saying “every 3rd blog post gets this element and behaves like this”. This means that once this effect is installed, it will respond and grow with the client automatically.
Spinning Not Required
These elements can be added without spinning or any animations at all. This feature can be utilized to add elements that draw attention to different blog posts. For instance you can have a “New Blog Post” badge attached to the latest blog post. This is the exact stuff that I live for as a Squarespace developer. Tell me your wildest ideas, and let’s make them happen.
Scroll-based Animations
The Floating Nimishas in this example are actually animated using a CSS-only scroll-based animation. This means that the movement responds to the user scrolling through the page. It’s important to note that this scroll-based animation is only supported by Google Chrome browser. Updates happen all the time, but, for now, if you’re viewing the site on Safari (or other browser), the element animation will occur, but will not be scroll-based.
The animated element feature is so fun and can be utilized in many ways. Designers come to me all the time with frustration because the Squarespace collection page is so hard to customize with any sort of oomph. This feature is perfect to unlock that little something extra to make your brand stand out from the pack.
When you’re ready to implement this feature onto your Squarespace 7.1 site, book an Office Hour with me.
Feature Spotlight
Discover what’s possible
in Squarespace
(with a lil help from your dev bestie)
