How to Add Locomotive Scroll (SMOOTH SCROLL) To Squarespace
If you’re unfamiliar with locomotive scrolling it’s a cool effect where, when you stop scrolling, the page briefly carries on and then slowly comes to a stop.
It’s difficult to explain when you’re as sparse with words as I am, so here’s a demo.
It’s a nice effect and definitely one that has become more and more popular over the last few years.
So how do you add this effect to your Squarespace website? Well, luckily it’s really simple with a few lines of code.
So first of all you’re going to need to take a copy of this code 👇
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>
<script>
const locoScroll = new LocomotiveScroll({
el: document.querySelector("body"),
smooth: true,
multiplier: 1.0,
});
setTimeout(() => {
locoScroll.update();
}, 2000);
</script>Then head on over to your Advanced Code Injection (Settings > Advanced > Code Injection), paste the code into the footer and hit ‘Save’.
Voila! You’ve now got locomotive scroll installed on your website.
IMPLICATIONS OF USING LOCOMOTIVE SCROLL
If you're on Squarespace version 7 and you're using parallax scrolling, this can cause section background images not to load, so you would need to disable parallax in the Style panel.
If you’re using any of Squarespace’s built in animations in version 7.1 this will stop page items loading properly, so you’ll need to disable any animations for this to work.
If you have fixed header enabled on version 7.1 this will make the header become ...unfixed. Thanks to BRONZE AVERY for pointing that out over on YouTube.
Also to note that this doesn't work with the Wells template.
This was inspired by a Timothy Ricks video explaining how to do the same in Webflow.
Note: this is set to only work on desktop, after some issues were found on mobile.
