Squarespace Loading Animations & Page Transitions — Ultimate Guide 2022
Want to add a Loading Animation to Squarespace? I'll list multiple methods for adding Squarespace Page Transitions using beautiful loading screen & anmated preloader . Loading animation is the best Squarespace animation ever.
In this tutorial I will be covering everything about Squarespace loading animations, or “page transitions” as they’re often called.
What are Squarespace loading animations?
First, let’s go through what a Squarespace loading animation (or page transition) is.
Loading animation is quite simply, a kind of Squarespace animation. It’s a animated transition that creates a smooth change when navigating from a page within Squarespace to another page.
Squarespace loading animations video demo
Here’s a little video that shows Squarespace page transitions in action.
We’re using fade animation, zoom-out animation, and a little rotate animation – isn’t that smooth?
What triggers a Squarespace loading animation?
Because we want to show the loading animation when switching pages, the load-out animation will be triggered by a link click.
And the load-in animation is triggered by a page load.
If you’re using Squarespace 7.0 Brine template family which has Ajax Loading -feature, it has a different method to make animated page transitions, as with ajax loading there is no refreshing the whole page. I’ll share a Squarespace 7.0 loading animation below.
How to add page transition loading animations to Squarespace?
There are a few ways. You can use a paid page transition plugin. There are a few options. Or you can follow a tutorial online to custom code the loading animation yourself. I’ll list all the relevant options below and share my own Squarespace loading animation tutorials and code snippets here as well.
What are page transitions?
An animation when clicking a page link and going to another page.
What is a loading animation?
Basically the same thing. Although a loading animation could refer to the animation that happens when you load the page. Page transitions refer to having 2 animations, for loading in, and loading out. When clicking a link to leave, and another animation when loading a new page. They work together seamlessly.
What is a loading screen in Squarespace?
A loading screen is a part of the loading animation. It could refer to any animation that’s shown when page is being loaded. Or it could specifically refer to an overlay type of loading screen or page transition. Here’s a demo of a Squarepace loading screen
What is a Squarespace preloader?
Preloader would be an animation or a screen that’s shown while you’re waiting for the page to be loaded. Any kind of of page transition loading animation, but usually it’s a loading spinner or animated logo that’s shown before smoothly animating loading of the page.
My Animated Page Transitions for Squarespace has the feature.
The problem with Squarespace preloaders
I don’t recommend buying a Squarespace preloader. The problem with preloaders is, it usually will not show at all. Why? Because Squarespace loads so fast there simply isn’t time needed to wait while Squarespace loads.
A preloader is a nice idea – having your logo be animated when page is loading. It would look nice. But in my testing Squarespace 7.1 was so fast that a Squarespace preloader was shown for under 0.1 seconds. Sometimes it wasn’t shown at all.
So I recommend having page transitions, and possibly a loading screen which is animated instantly. But a preloader will probably not have enough time to be shown because Squarespace uses a “lazy loading” technology which loads pages very fast.
Plugins for Squarespace page transitions
1) Animated Page Transitions for Squarespace
The perfect Squarespace page transition plugin is here! Animated Page Transitions for Squarespace is super easy to use. One quick copy-paste being all you need.
Works on all Squarespace 7.1 templates, and most Squarespace 7.0 templates.
It has 58 beautiful loading animations, including fade, zoom, rotate, flip.
You can adjust the animation speed. If you want a squarespace preloader look, you can have a loading spinner or an animated overlay. It’s instant and animation happens immediately when you click.
2) Animated Page Transitions
The second paid Squarespace page transitions plugin for loading animations is the Animated Page Transitions by SquareStudio. In their own words it ”lets you create a more engaging and seamless transition between pages on your website”.
You can choose from 3 transitions to suit your styling (all 3 included in purchase).
Drag and drop code and step-by-step installation guide included with download.
It works for all templates, so this might be good option if you use Squarespace 7.0 template like York with ajax loading that can’t be turned off. They rate the difficulty being 1/3, so it should be easy to install.
3) Page Transition by Squarerefresh
Squarerefresh, like their name suggest, makes Squarespace websites more fresh. I love their products and their aesthetic. The Page Transitions plugin works for Squarespace 7.0 and Squarespace 7.1, and I really like the combination of the site slightly moving and the animated overlay sweeping across the page.
The only thing did not like is the delay. You have to wait after clicking a before the animation happens.
Because of this, I designed my Animated Page Transitions for Squarespace to immediately start the animation when clicking.
4) Custom Loading Screen by Rebecca Grace Designs
Rebecca Grace Designs has a preloader type of loading animation, which adds an image with pulsating animation. You can also use an animated a gif to the page while waiting for the page to load.
Custom Loading Screen by Rebecca Grace Designs describes their plugin like this: ”For any business wanting to add a little flair to their website with a custom loading screen using their own pulsing logo. In order to properly install this code you will need to have a Squarespace Business Plan or higher.”
Free tutorials for Squarespace page transitions
1) Squarespace Loading Animation & Page Transitions · Tutorial (2022)
Free Squarespace animation tutorial. It’s basically a 25 minute step-by-step guide for making your own version of my Animated Page Transitions for Squarespace -plugin.
It teached you how to use Animsition – a simple and easy jQuery plugin for CSS animated page transitions, and integrate that into Squarespace. Page transitions and loading animations for code nerds and DIY Squarespace fanatics.
As the description says, we'll be making Squarespace loading animation, animated page transitions in Squarespace 7.1. You can think of it as a beautiful Squarespace preloader. Loading animation makes your Squarespace pop out and the page transitions make everything feel classy and smooth. It's the best Squarespace animation if you ask me. We'll be using a Squarespace animation plugin to create custom animations like fade animation, zoom animation, rotate animation, spin animation etc.
2) Squarespace Animated Page Loading Transition for 7.0 Brine family - Tutorial
This tutorial is for the Brine family. It uses the built in loading bar to make a sweeping animation for the ajax loading. This tutorial was inspired by this question in the Squarespace forums.
In Squarespace 7.0 Brine Templatess – Add to Custom CSS
3) Squarespace 7.0 York template
If still on 7.0 you can also use York template which has page transitions effect built-in. Doesn’t get any easier than that. However, ajax loading can be tricky for analytics though so watch out. I’d go for 7.1 if starting a new site
4) How to Make an Animated Splash Screen in Squarespace by Carl Johnson
Carl has amazing taste when it comes to design and aestethics. He has shared an awesome tutorial using Lottie animations and a splash page. Carl has also made another similar tutorial calles Turn Your Logo Into an Animated Preloader
5) Loading Animation in Squarespace by Will Myers
Will has created a different type of loading animation for Squarespace which uses the favicon shown for each page. Check out the tutorial here
Squarespace page transitions – discussions at Squarespace Forum
There is a lot of interesting discussion and ideas about loading screens and page transitions being shared in the Squarespace Forum. Here are some of them for further reading: