How to create a sliding page animation in Squarespace

Feb 13

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Squarespace released a new website template on Superbowl Sunday, and the Instagram ad showed a website border and a sliding page animation. But that ad was too good to be true; those design options aren't currently available in Squarespace. 😭

But there is good news - we can create those effects with a little custom CSS! 🙌

In this tutorial, you'll learn how to use code to recreate that eye-catching magic on your website.

👋 Grab the 5 codes I use on every site: insidethesquare.co/five

👽 Get the template used in the video: hellodownthere.com

Video tutorial

Custom Code

Here are the codes from this tutorial.

Be sure to change the colors and adjust the border & animation so it's perfect for your unique website:

@keyframes SlideIn {
0% {
transform: translateX(+100%);
}
100% {
transform: translateX(0);
}
}
body {
border: 5px solid #CFFF81
}
#page{
animation: 1s ease-out SlideIn!important;
border-left: 1px solid #CFFF81
}