View Transitions in Squarespace - Stand out from the crowd with this impressive effect

With the quality of Squarespace websites going up and up both visually and programmatically, it's getting harder to stand out. The technique I'm going to show you adds a level of finesse and class to your sites, and it's very straightforward to implement. Let's get started...

What are view transitions?

They allow us to animate between pages. In the example I will show, it will be a fade. It can be done solely in CSS, which has performance benefits over JavaScript. As they are handled in CSS, they are super smooth and work incredibly well.

The 30 second video above shows you what we are going to achieve with View Transitions.

First off, there are a few caveats, mainly being that this does not work in Firefox at the time of writing. However, it works in the usual suspects of Chrome, Edge and Safari. This technique will not be critical to the success of your websites; it's a flourish on top - although, I may add - a very nice flourish. As it isn't critical, and websites can look and perform differently in different browsers, it's perfectly acceptable to go down this route. As a freelance squarespace designer we have good experience with this technique. Technically, this is known as progressive enhancement, and if you are not aware of the method, I suggest you read up. It's a fancy name, but it's not hard to grasp, and it will increase your knowledge and skill in building websites.

There 2 places we need to insert the code we need to achieve the affect.

1. Navigate to Website > Pages > Website Tools > Code Injection > Header

Paste in (include the style tags):

<style>
 
@view-transition {
 navigation: auto;
}

</style>

2. Navigate to Website > Pages > Website Tools > Custom CSS

Paste in:

@keyframes move-out {
 from {
 opacity:1;
 }

 to {
 opacity:0; 
 }
}


@keyframes move-in {
 from {
 opacity:0;
 }

 to {
 opacity:1;
 }
}


::view-transition-old(root) {
 animation: .6s ease-in both move-out;
}

::view-transition-new(root) {
 animation: .6s ease-in both move-in;
}

And that's it. Now, all your pages smoothly transition to one another. Feel free to edit the timings and even edit the animation. There's a lot you can do, but in my testing, the simple fade shown above is one of the best animations you can do between pages with View Transitions in CSS. Keep It Simple Stupid (KISS).

If you have any questions at all, reach out on Twitter / X.

Happy coding.