Big-to-Small Logo Scroll Effect in Squarespace (CSS Only)

Want a sleek logo effect on scroll in Squarespace 7.1? In this tutorial, I’ll show you how to build one using only CSS.

We’ll start by setting up the header, then move into positioning and scaling the logo using transform properties. From there, I'll show you how to take advantage of the native .shrink class that Squarespace gives the Fixed header layout, to trigger the animation. Finally, we’ll smooth everything out with a quick transition so the movement feels less "blunt".

Keep in mind that this approach IS NOT meant to be pixel-perfect, and that you may need to make adjustments based on your existing hero section layout.

That being said, once you see the way the .shrink class can be used to enable the scrolling effect, you can modify the animation to fit your specific client project!

01 | CHAPTERS
00:00 - Effect Caveat
00:30 - Header Setup
01:06 - Targeting the Logo
01:37 - Positioning the Logo
02:03 - Scaling the Logo
02:30 - Scroll Trigger with .shrink
03:41 - Removing the Transform on Scroll
04:04 - Adding A Smooth Transition

02 | BLOG POST + CODE
https://beatrizcaraballo.com/blog/logo-resize-on-scroll-animation-css-squarespace

03 | WORK WITH ME
If you’d rather not figure this out alone, there are a few ways I can help.
From ongoing guidance to full hands-on work, you can choose what fits your project best.
https://beatrizcaraballo.com/services

04 | SUPPORT + INQUIRIES
If you’re working on a project and need help, you can reach out here:
https://beatrizcaraballo.com/contact
I prioritize client inquiries. For quick questions, I may not always be able to respond directly, but I do use them to guide future content!

05 | RESOURCES
Some of the approaches and code I use in my videos come from my project coding toolkit – The Snippet Directory. It's now available inside the Club, alongside ongoing personalized support.
Explore access here:
https://beatrizcaraballo.com/snippet-directory

06 | STAY IN THE LOOP
Receive weekly customization tutorials and troubleshooting tips, based on real-life project challenges.
https://beatrizcaraballo.com/notes

07 | NOTE
The code shown in this video is provided as is and it's not a one-size-fits-all solution. Your implementation may vary depending on your project and settings. There is no guarantee that the code, instructions, or method shown will work or be error-free.

08 | KEYWORDS
logo resize on scroll squarespace, logo effect scroll squarespace, shrink logo on scroll squarespace, squarespace header css, squarespace css tutorial, squarespace 7.1, custom css squarespace, squarespace web design, squarespace custom code, squarespace web development, squarespace design tutorial, squarespace site customization, squarespace code implementation, squarespace css tricks

Видео Big-to-Small Logo Scroll Effect in Squarespace (CSS Only) канала Beatriz • Squarespace Customization Expert