AI can unlock massive potential, but the key lies in crafting powerful prompts. Something I was absolutely rubbish at when it all first launched - treating it like a search engine or asking it stupid questions, and as the saying goes: “Ask a stupid question. Get a stupid answer.“

1998/99 Formula 1 world champion Mika Hakkinen was in a class of his own for this. I remember watching his post-race interviews where journalists would ask him questions like “Are you ready to win a world championship?”, or “Was that the best overtake of your career?” to which he would simply reply “Yes”.

Sometimes he wouldn’t reply. Just give a sort of sarcastic smirk and you could see by the look on his face he was thinking “fucking idiot!”.

Those who asked credible in-depth questions though, got credible, well thought out, detailed, articulate responses.

Just like Mika, large language models don’t work well with vague input. They need specifics. Very, very specific specifics! The more info you can give them, the better the results you’re going to get back.

I realised this a while ago when I was asked to build a repayment calculator for a Webflow project. Knowing that it’d take a hefty bit of Javascript development, something I’ll admit is best left to Javascript developers, I started to reverse-engineer one that I’d found on another website.

Needless to say I couldn’t get it to work properly, so I turned to AI, in particular Google Gemini, or Bard as it was called then - which I think is a well better name.

“Build me a finance calculator with HTML, CSS and Javascript, please?”

I always say “please” when I’m asking AI a question, just in case one day it finds its way into Boston Dynamics hardware and goes mental and starts destroying people who didn’t use their manners. Imagine in the being hunted down for hours by Spot, the ‘Robot for safer, more predictable operations’, because 3 years earlier you’d finished a prompt to ChatGPT with the closing line “You’re shit!”

I had a mate whose older cousin dabbled with hallucinogenics in the 90’s and I remember him telling us a story about how he’d been chased around the streets of south Liverpool for 3 hours by a chip because he’d looked at a potato the wrong way when he walked into a chippy (takeaway for those who aren’t from northern England). As hilarious as it sounds, it also doesn’t sound like much fun. So AI tip number 1, always “please” and “thank you” just in case.

Anyway, manners aside, the result was ok. Gemini had given me HTML, CSS and Javascript that formed a very basic, but functioning finance calculator. Thinking that was all AI could offer, at least it’d given me something that could be used as a basis to build upon.

Luckily for me the project got pushed back and then eventually cancelled.

Then one day I stumbled across an awesome article by Michael Krantz at Notion, in which he talks about how to write effective prompts for generative AI models and explains how to write clear and specific prompts. Emphasising the importance of giving the model an identity, such as a “market analyst” (whatever one of them is?) and providing it with as much detailed information as possible. It’s a great read which you can see here.

Armed with this new knowledge I turned back to Gemini.

“You are a Webflow developer. Can you make a finance calculator to plug in to a Webflow website using HTML, CSS and Javascript (please)? The calculator should have an input box where a user enters the loan amount and it should only have 3 repayment terms, 6 months, 12 months and 24 months, all at 0% APR. Style-wise the calculator should have a background colour of #131314 and a text colour of #4F82EF. The outer edges of the parent element should have a border radius of 1.25 rem and it should have it’s overflow set to hidden”.

The result was miles better than my first attempt and while the prompt could have been tweaked to give me a slightly better response it had given me 90% of what I asked for.

This got me thinking. What else could I do with this?

A DeLorean, perhaps? Then I could travel back to ‘95 and learn Javascript while it’s in its infancy?

Nah, in all seriousness though, if someone asked me to add a function to their site that require a even a smattering of JS I would break out in a sweat, but since reading that article I’m not bothered, because, in Gemini, I’ve got the most knowledgable colleague in the world. Together we’ve built a breadcrumb navigation that updates automatically and grabs the link name from a page meta title. All kinds of complicated interactions. And complex form functionality.

This got me thinking about this old meme…

Doctor: Googling stuff online doesn’t make you a doctor.

Literally every developer:

Until next time ✌️

Subscribe now

If you’re unfamiliar YPP, it’s basically how creators earn money from YouTube ads …for a channel like mine it’s worth a couple of grand a year. If I weren’t in the YPP, though, they’d still show ads but keep 100% of the ad revenue.

It’s been 8 months actually, since I last uploaded to YouTube, but a lot has been going on. The day I uploaded that video was the same day I got offered a full time Webflow developer/graphic design/general creative job.

It’s been full on, hence the quietness here on Substack and over on YouTube, but I managed to find the time to make a quick vid that’ll hopefully keep the algorithmic overlords happy and keep me in the YPP.

So here’s my first vid in 8 months.

You can use this trick in the likes of Squarespace too.

Just chuck a code block in your page and place this in the block:

<p class=”vertical-text”>
YOUR TEXT HERE
</p>

Then add this to your CSS Editor

.vertical-text {
writing-mode: tb-rl;
transform: rotate(-180deg);
}

Until the next one ✌️

Working in a creative industry requires some level of input back into your trade to give you the tools to be both productive and provide high-quality work. Think of it like an artist investing in some decent paint and canvas and stuff, or a darts player buying some proper good arrows and 10 pints of mid strength beer.

Since the dawn of time, or at least since the early 90’s Adobe has been just that - the high-quality tool you invest in to provide high-quality work.

I’d been a subscriber since 2015. Before that I had a **ahem** totally legit copy of Photoshop on an unmarked disk that I acquired from that dodgy bloke in the office who’s like a digital Dick Turpin.

When I went freelance though, I thought it best to invest at least in the single app subscription of Photoshop. Which soon became the full Adobe Creative Cloud subscription after the need for Illustrator and After Effects started to creep into my workflow.

Then I started a YouTube channel and with Premiere Pro and Audition being part of the CC suite it only seemed logical to use those apps too.

Hard drive all fattened up with gigabyte after gigabyte of Adobe data, I finally felt like I was getting value from my subscription, which as of writing is £56.98 a month if you commit to 12 months. Or £85.48 on a rolling month-to-month subscription 🤯

Things were going well. Then one day, after a particularly lengthy edit in Premiere I started getting random green flashes. The problem:

Adobe’s response:

So I was expected to extra steps to be able to edit in Premiere?

Needless to say I ditched it not long after and started using Final Cut Pro.

I found the quality of the voice-over recordings was slightly better in Final Cut too, so next to get sacked off was Adobe Audition.

I carried on with Photoshop, Illustrator and After Effects, for a few more years, but I eventually became reluctant to open any of them because they would literally throttle my Mac which, yes, was starting to show its age at this point.

If you saw the ‘How to attach objects to walls in After Effects‘ video that I put out, what you probably don’t realise is that it took about a week to record a, just short of three-minute video. It is just chopped-up bits of screen recordings that I managed to scrape together between software crashes and system hangs.

I’ve had similar experiences in the past too with Illustrator and Photoshop. I had a 5-minute task that brought about the need to jump between Illustrator, Photoshop and Acrobat. Honestly, it was one of the most frustrating few hours in front of a computer I’ve ever had.

The video was the final straw though. I looked at how much value I was actually getting from Adobe and as of January 2024, the answer was teetering around zero. £680 a year for something that you’re not really using is a massive outgoing.

Plus as impressive as it can be ‘sometimes’, I don’t like the rush to fill every bit of software with AI.

I’m not a fan of the subscription model either. And when I figured out that since I’d started my subscription, Adobe software had cost me around £5470 it brought a tear to my bank account.

So as my subscription came to an end I politely declined. Well, it was more like ‘F**k off! You’re not getting another penny out of me”.

I felt liberated but also a bit lost. As much as I was reluctant to open Illustrator, I did use it more than I thought.

Then there’s Adobe XD. I know it’s debatable, but I think XD is one of the best products Adobe makes. Clean, intuitive, easy to learn. I used it for wireframing, icons, designs, pdf’s …you name it.

A couple of days into this “experiment” and I was back on Adobe’s website hovering over the All Apps CC plan. Like an addict looking for a fix, it seemed that Adobe had me hooked, but somehow I managed to resist and instead started looking for legit alternatives.

As I mentioned I’ve already been using Final Cut for a few years and I did buy Affinity Photo for a very reasonable price a while back, but I’d never used it.

Luckily though, my leaving Adobe coincided with a deal that Affinity were running. All V2 apps (Photo, Designer & Publisher), a lifetime licence, which Affinity always does, for a one-off payment of £71.99. Even if it’s not on offer it’s £159.99. You’d spend that in 3 months on an Adobe subscription.

As it turns out it is the best 70-odd quid I’ve spent. I use Photo and Designer every single day.

The void left by XD was filled by Figma, which I’ll stubbornly admit is actually better than XD, and again much cheaper. I’m just glad that Adobe didn’t get to acquire Figma like nearly happened in 2023. Freeform is also a good app for getting ideas down.

Instead of After Effects, motion graphics and animations are now done with Apple Motion and Lottie Creator.

I also sprinkle in a bit of Canva and Blender.

If you’d asked me 12 months ago to give up my Adobe CC subscription I would have told you where to go, but this experiment has made me get off my bum and find decent alternatives that quite often run a lot better than Adobe, give you the same results and don’t break the bank.

I'll never go back. Now, I'm not saying you have to ditch Adobe completely. But do yourself a favour – stop giving them money for a minute and see what else is out there. I bet you have some pleasant surprises waiting. And if not, well, at least you had a break from the spinning beachball of death.

Quick update:

You haven’t heard much from me lately because I’ve literally been busy being a Webflow Developer. I also got lost in Primark, but that’s a story for another day.

So like every other developer my days are now spent in Slack and Asana and Notion and every other productivity app that charges the same amount, integrates with each other and does the exact same job.

Then when we’re all finished being productive I get do my shizzle in Webflow.

And do you know what? I’m loving it!

Main image by Emily Bernal on Unsplash

As I sit at my computer to write this I still haven’t got a clue what this post is going to be about, but I was watching a video by Ali Abdaal in which he said:

Write about whatever you want - whatever interests you!

He said a lot more in the video, but, y’know, that was like the takeaway quote for me.

I do like writing. Back in the day I used to write for a car website here in the UK. It wasn’t a paid gig but I loved it - not because I had the opportunity to throw a brand new car around Millbrook Proving Ground a couple of times a year (although that was kind of cool). No, I liked it because I do have a genuine passion for cars.

I guess in current times, though, I’ve been writing about and making videos about Squarespace for so long, the inspiration to come up with new ideas has been wearing thin - there’s only so much you can do with Squarespace after all.

Same over on YouTube. When I started my channel I wanted it to be sort of like a Sara Dietschy, Tyler Stalman or BYOL kind of thing - a little bit of this and a little bit of that, but I fell into the Rabbit hole of just making Squarespace content because it was getting views, and I started to feel uncomfortable about trying something different.

Plus, at that time I was subscribed to one of these platforms (that I won’t name) which looks at your channel and tries to predict how your next video will perform based on your video research. All of the signs were telling me to carry on making Squarespace videos because that was my ‘niche’, and anything other than that would bomb. But ideas were becoming harder to come by.

Then one day I had a “F**k it!” moment. I made a Final Cut Pro tutorial (which did ok) followed by a few After Effects tutorials which was liberating. I didn’t care how they performed I just wanted to try something different, but just for the record the After Effects videos have outperformed nearly everything else on the channel.

It’s not about the figures though, it’s about what I enjoy making. I love bringing things to life in After Effects. I could happily spend all day editing vids in Final Cut and I like picking apart different software to see how good it is, or isn’t.

But I guess what I’m getting at is, and going back to Ali Abdaal’s quote, I’m going to start using this platform to write about what I want, and use my YouTube channel to make videos about what I want.

It’s something I feel like I need to do to balance work and creativity, but it’s also a scary feeling. I know a lot of you have subscribed purely for Squarespace content and I totally respect that. My love of Squarespace slightly diminished over the past year or so, so I think mixing up my content will give me the break to start enjoying the platform again.

You’ll still get Squarespace tips and tutorials when I stumble across something that both excites me, and gives value back to you. Same with Webflow and Adobe, but there will be other stuff thrown in the mix too …bit of tech, maybe some reviews, a bit of general nonsense. Who knows? Stick around to find out.

Anyway, until the next post 👋

Share

Leave a comment

Some elements of Squarespace are so distinctive I can recognise them as quickly as I can identify my own children in a schoolyard full of …other children.

The default cookie notice is one thing that’s a big give away. You enable it in the settings and you move on, annoyed that you’ve just pissed off 99% of your users with a worthless obligation to click an ‘Accept’ button.

Then there’s the favicon! No one ever changes it from that little cube thing.

I know you’re probably reading this now thinking “haha! I changed the favicon on my clien …shit! I forgot about the cookie thing”.

Another thing that’s a big Squarespace giveaway are the buttons. They always look the same. Always! I don’t know what it is, but again, they stand out like one of my kids in one of those horrible Norovirus-ridden adventure playgrounds.

I think my biggest gripe with Squarespace’s buttons, though, lies with the lack of customisation. Want a gradient background? An icon in the button? A cool hover effect? Well you can forget about it! Natively at least anyway.

So, I was messing around in Webflow the other day and I built this button:

In Webflow it’s not a big deal - link block with a couple of divs inside, a bit of styling applied and a hover interaction. It all takes a couple of minutes.

But in Squarespace, you couldn’t make something like this without writing lines and lines of code.

Luckily, Webflow allows you to export code to use elsewhere. I’ve done it in the past to quickly make complex layouts and interaction to use in Squarespace…

…so that’s what I did with this button. So if you want to use it in your Squarespace project, first you’ll need to add a Code Block to your page and in the Code Block add the following HTML:

<center>
<a href="YOURURL" class="button-wrapper"> 
<img src="https://raw.githubusercontent.com/MrJohnoCP/images/39501e7b4792d83354bd0015be7cfc775f34f95d/arrow.svg" class="button-icon">  
<div class="button-text">Learn More</div>
<div class="button-bg">
</div>
</a>
</center>

You can change “YOURURL“ to point to the page you want the button to link to. You can also change the Learn More text to something else.

Then you need to add the CSS to your site-wide code injection (header), which Squarespace has recently moved to ‘Setting > Developer Tools > Code Injection’

<style>
.button-wrapper {
 width: 165px;
 text-transform: uppercase;
 border: 1px solid #fff;
 border-radius: 100px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
 font-weight: 600;
 line-height: 1;
 text-decoration: none;
 position: relative;
 overflow: hidden;
 transition: .5s ease;
}
.button-icon {
 z-index: 1;
 position: relative;
 transform: rotate(-360deg);
 transition: .5s ease; 
}
.button-text {
 z-index: 1;
 color: #fff;
 margin-right: 10px;
 position: relative;
}
.button-bg {
 width: 29%;
 height: 100%;
 background-image: linear-gradient(#ed7321, #d15f23);
 border-radius: 100px;
 position: absolute;
 left: 0;
 transition: .5s ease;
}
.button-wrapper:hover .button-bg {
 width: 100%;
 transition: .5s ease;
}
.button-wrapper:hover .button-icon {
  transform: rotate(360deg);
  transition: .5s ease; 
}
</style>

And that’s it!

Feel free to mess around with the hex colours, transition speed, width etc.

Poll

It’s been a while since Squarespace launched Fluid Engine and I’m intrigued what people think of it.

Update

It’s been a busy couple of months, so I haven’t had much chance to put out any videos over on YouTube, but I’ve got some planned soon.

As always, I’d love to know if there are any videos you like me to put out. You can comment on this post, DM me on Twitter or send me an email.

If you missed the last video you can see it here👇

Show your support 🤜🤛

Buy me a coffee

Share

In 7.1, though, with that slider gone, so is the option to easily achieve this.

Luckily it can be done with a little bit of code.

So first you’re going to need to head to your CSS Editor in Squarespace (Design > Custom CSS)

Then take a copy of this CSS 👇

.header-nav {
    display: none;
}
.header-actions {
    display: none;
}
.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}

Then paste it into the CSS editor and hit ‘Save’.

And that’s it!

Show support

Buy me a coffee

Share

I often get asked what I’m using for a certain things. Website design, animation, video editing, etc. I was even asked what courier I use to deliver websites. It was my dad asking me that question. He thought that I send a 3 1/2 floppy to a client containing the website …either that or he was taking the piss - he’s so out of touch with tech that I’m not sure which it was.

Anyway, here’s a list of all of the things I use every day. Some of these are affiliates, meaning I get a few ££’s if you sign up using the link, but that doesn’t mean I recommend them because of that. These are genuinely tools that I use every day.

Webflow

Website Development

My main website development tool these days.

Another cool release, if you design in Figma is the Figma to Webflow plugin.

Sign up for a FREE (Affiliate)

Affinity

Graphics, Design

I did a trial last year to see if I could I could work without using Adobe products. At the time I couldn’t, but roll on to late 2023 and Adobe Creative Cloud is now just on £700 for the year! And the software has become bloated with generative AI so I decided to try again. I got a good deal on the full Affinity software, so Affinity Photo 2, Designer 2 and Publisher 2 for desktop and iPad. All for a one-off payment of £71.99 (usually £159), and I’m loving it.

If you’re coming from Photoshop or Illustrator then everything will be familiar, just with a few things done a little differently.

Check Affinity out! (not an affiliate)

Arc Browser

Arc is a browser for Mac and Windows that “aims to provide a cleaner, more organised, and private browsing experience”. I really like it.

Download Arc

Final Cut Pro X

Video Editing

I couldn’t imagine editing video in anything else.

Get FCPX

CleanShot X

Screen Recording and Capture

CleanShot X is a neat little screen recording and capture app for Mac.

Find out more

Envato Elements

Creative Digital Assets

Envato Elements has a massive library of digital assets from video templates to fonts and product mockups. You’ll quite often find something from Envato in my video intros, like this 👇

Get a 7 Day Trial (Affiliate)

Updated 28/3/2021

I put out a video a couple of weeks back (yep, the one above) and a few people have reached out about problems with the video not auto playing. This is my fault for not explaining the video player and autoplaying policies in the video. Hopefully, this post will explain a bit more.For those who are having problems with the video not auto playing either on the live site, or in Incognito mode (and thanks again to everyone who's reached out in the comments on YouTube) a couple of things can be causing this:First of all, if you are on a version 7 template and Ajax Loading is disabled, this can stop the video from auto playing. Try enabling Ajax Loading by going to 'Design > Site Styles > Site Loading | Enable Ajax Loading'.

However, if your site is quite heavy with custom CSS enabling Ajax Loading can cause more problems than it fixes ...as I pointed out in this Tweet:

Hmmm, maybe not in this case.

Another possible cause is if your video has audio. Chromium browsers will auto automatically pause the video in order to 'improve the user experience, minimise incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks'.

In this case you will need to either remove the audio from the source video, or add ‘muted’ to the video player.

Adding muted to your video player is as simple as placing 'muted' after the width controls in the video player opening tag, like so:

<video autoplay="autoplay" loop="true" width="100%" muted> 
<source src="YOURVIDEOURL" type="video/mp4"/> 
</video>

If audio is essential it has to be muted to start auto playing. In this case you might want to add controls to the video to allow the user to unmute the video. This, again, can be done by adding 'controls' to the video player opening tag:

<video autoplay="autoplay" loop="true" width="100%" muted controls> 
<source src="YOURVIDEOURL" type="video/mp4"/> 
</video>

More info about auto playing videos can be seen here

Show support

Buy me a coffee

If you've come over from YouTube to grab the code for this video, then sorry. I had to revert back to sending it through the post.

If you've got no idea what I'm talking about then you SHOULD rewatch the video :)

Nah, just kidding. Here is the CSS to make the glassmorphism effect:

.glass-card-left {  
background: rgba( 255, 255, 255, 0.25 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 50px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
text-align: center;
padding: 50px; 
position: absolute; 
transform: rotate(0deg) translate(-50%);  left: 50%;
margin-top: 0% !important;
z-index: 0; 
}

As I mentioned in the video you'll need to style the mobile blocks independently from the desktop version. You can use magic, but I always find media queries work better ...and are magic in their own right.

Grab the CSS below and stick it in your CSS to sort the mobile side of things out.

.glass-card-left {  
background: rgba( 255, 255, 255, 0.25 );  
backdrop-filter: blur( 4px );  
-webkit-backdrop-filter: blur( 4px );  
border-radius: 50px;  
border: 1px solid rgba( 255, 255, 255, 0.18 );  
text-align: center; 
padding: 50px;  
position: absolute;  transform: rotate(0deg) translate(-50%);  
left: 50%;  
margin-top: 0% !important;  
z-index: 0; 
}

Show support

Buy me a coffee

You’re getting this email because at some point over the last few years, months, weeks or whatever you’ve subscribed to my mailing list via my website (which is no longer online), through a link on my YouTube channel, or directly here on Substack.

It’s been a while since I’ve sent anything to anyone on my list, so you may not even remember subscribing.

The reason I haven’t sent anything for a while is that when I started my YouTube channel, and subsequently my mailing list I wanted to build a community around Squarespace.

MailChimp, where you would’ve originally signed up if you subscribed a while ago, gave me the tools to capture your email address and send out emails to everyone on my list, but it all felt a bit too much like marketing and not community, and for a while I’ve been looking for a better way to communicate with my subscribers.

Enter Substack

A mindless scrolling session through Twitter one day led me to stumble upon a local news publication that does proper investigative journalism and writes well put together news pieces - unlike most local news outlets in the UK.

Every week I was getting an email from them with a button in the footer - “Publish on Substack”.

As a web developer of course I’m going to click that button, not before I right-click and inspect the element though. Or is that just a thing that I do?

A bit of rooting through Substack and I’d found a new means of communication which is not your usual marketing bollocks. Somewhere I can communicate with you as a person, from the heart, not as a statistic in an analytics dashboard.

I set up my publication, SquareStuff, and started moving some blog posts over. So this is just the beginning.

What you can expect from SquareStuff

• Written Squarespace guides

• Code accompanying my videos

• Code snippets

• Cool stuff

• Business insights

• A bit of everything! (To quote my YouTube channel banner)

I also want to have somewhere we can chat and you can have YOUR input on the videos that I make in the future. Whether that be discord or a thread here on Substack, I haven’t decided yet, but I’ll let you know as soon as I do.

Take it easy ✌️

Subscribe now

Share

Here is the script you'll need:

This one goes in the site wide code injection (footer) - 'Settings > Advanced > Code Injection > Footer'

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {  
this.classList.toggle("active");  
var panel = this.nextElementSibling;  
if (panel.style.display === "block") {    
panel.style.display = "none";  
} else {   
panel.style.display = "block";  }});}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {  
this.classList.toggle("active");  
var panel = this.nextElementSibling;  
if (panel.style.maxHeight) {    
panel.style.maxHeight = null;  
} else {    
panel.style.maxHeight = panel.scrollHeight + "px";  }});}
</script>

Then you'll need to add this in a Code Block on the page where you would like your FAQ accordion to appear:

<button class="accordion">QUESTION HERE</button>
<div class="panel">
<p>ANSWER HERE</p>
</div>

Lastly place the CSS in the Custom CSS section 'Design > Custom CSS'

.accordion { 
background-color: #525252; 
color: #fff; 
border: solid 1px #fff; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
text-align: left; 
transition: 0.4s;
}

.accordion:hover { 
background-color: #ccc;
}

.panel { 
padding: 0 20px; 
background-color: #fff; 
max-height: 0; 
overflow: hidden; 
transition: max-height 0.4s ease-out;
}

Try changing the font weight, colour and sizing, you'll find more info on CSS and text at w3 Schools

Subscribe on YouTube for more Squarespace tips & tricks!

Show support

Buy me a coffee

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.

Show support

Buy me a coffee

Share