UPDATE: This project is now archived. We recommend using a new template with AJAX if you're looking for smooth page transitiongs within the Squarespace CMS. If you have questions about making custom scripts work feel free to email us at [email protected] and we'll help if we can. Please note that not all custom scripts are guaranteed to work with AJAX so there is a possibility that we can't help. Thank you! - Nathan, White Wolf Websites
Easy to add fading page transitions using LESS and jQuery. Specifically targeted to work with Squarespace templates in both the Consumer and Developer Platforms.
v.1.0.1
IMPORTANT NOTE: It is recommended to use AJAX loading if your template has it for the best user experience. This solution is designed for templates that don't currently have AJAX Loading.
To get started, click the + icon next to any navigation heading like you would to add a new page and click the 'Link' option (See Figure 1). Then Click the 'Click to add URL...' and then click 'Files'. You should see what's depicted in Figure 2. Add the two files from the scripts folder of this repo here. Remember the URL that each file receives as we'll use this later (See Figure 3).
If you don't change the filenames, the URL's should be as follows
- /s/jquery-3-1-1-min.js
- /s/page-trans.js
Go to the Design > Custom CSS Panel. Copy the code from styles/page-trans.less into the panel and click Save. (See Figure 4 & 5)
Go to Settings > Advanced > Code Injection and add the following to the Footer injection area (See Figure 6).*
<script src="/s/jquery-3-1-1-min.js"></script>
<script src="/s/page-trans.js"></script>
Click save and everything should be working!
*If you changed the filenames for the javascript files, be sure to use those in the src=""
 |
 |
 |
|---|---|---|
| Figure 1 | Figure 2 | Figure 3 |
 |
 |
 |
|---|---|---|
| Figure 4 | Figure 5 | Figure 6 |
To get started, turn on Developer Mode and use Git or SFTP to access your files. If you've never used Dev Mode before, I recommend going through the Squarespace Tutorial.
Once you have access to your files, copy the .js files from this repositories scripts folder to your templates script folder. Similarily, copy the .LESS file from this styles folder to your templates style folder.
To add the styling to your template, open your template.conf. Under the array named stylesheets, add the page-trans.less file as in Figure 7 and save the file.
To add the scripts, open the appropriate .region file. Some templates only have one .region file but others will have a separate file for the header, main content and footer sections. We'll want to add our scripts to the footer so, if you only have site.region, open that file. If you have multiple .region files, find the footer.region file and open that.
Scroll until you see the {squarespace-footers} tag. We'll add our custom scripts after the main site scripts (e.g. In Bedford that looks like this: <squarespace:script src="site-bundle.js" combo="false" />) but before the {squarespace-footers}. (See Figure 8)
Enter the two new scripts in the following format: <squarespace:script src="jquery-3-1-1-min.js" combo="false" /> and <squarespace:script src="page-trans.js" combo="false" />. (See Figure 9)
If you're using SFTP, please make sure you save after each change. If you're using Git, you can now commit the changes and push the update.
 |
 |
 |
|---|---|---|
| Figure 7 | Figure 8 | Figure 9 |
If you'd like to adjust the timing of the fade, simply edit @pageTransitionTime: 800ms to be any millisecond (ms) or second (s) timing in the Custom CSS Panel [For Consumer Platform] or the page-trans.less file [For Developer Mode].
You may also need to adjust the delay before the link is followed in the page-trans.js file. To do this, simply edit the number for var $delayTime = 1200 into any millisecond value.
If you find any issues with any template, please create an issue stating whether you're using the consumer platform or developer platform. Please also include which template you're using or, if you're using a custom template, your site URL.
This code is provided to you via the MIT License*. You may use, replicate or distribute however you choose and I am not obligated to help with any issue, however as expressed above, I will attempt to help to the best of my ability. If you're using the Developer Platform, please be sure you read and follow the Squarespace Developer Terms of Use.
*Nathan Paynter reserves the right to update the license and terms without warning so please check these terms before updating or downloading. Any changes in terms will result in a version change and each version will retain its associated licensing terms.