How to create a sliding page animation in Squarespace
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
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
}
👋 Grab the 5 codes I use on every site: insidethesquare.co/five
👽 Get the template used in the video: hellodownthere.com
🔲 Learn how to create your own border codes