How to create Star Wars style text animation in Squarespace

May 4

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Important Legal Info: The term Star Wars is a trademark owned by Disney. This content is not affiliated with Disney or The Walt Disney Company.

In this tutorial I am going to show you how to animate a text block so it scrolls off into the distance and fades away, like the opening credits to Star Wars!

This code animates all the content inside a Markdown Block, which means anything inside the markdown block will get this animation, including images.

This code uses a markdown block, so I STRONGLY recommend installing it on a single page and not site wide. Here is a link to the tutorial on how to install this code on a single page in your Squarespace site.

The code to create this animation is below.

Be sure to watch the step-by-step indstrucitons in the video so you can see how to add it to your site and what part you’ll want to change to make it uniquely yours!

Here is the code from the video:

You can add it to your custom CSS by navigating to your Design menu, and selecting Custom CSS at the bottom.

#page{overflow-x:hidden}
.sqs-block-markdown {height:3rem!important; transform: perspective(250px) rotateX(35deg);}
.sqs-block-markdown *{
-webkit-animation: fadeaway 15s linear forwards!important;
  -moz-animation: fadeaway 15s linear forwards!important;
  animation: fadeaway 15s linear forwards!important;}
@-webkit-keyframes fadeaway {
  0% { top: 120%; }
  90% {top: -900%; opacity:.80 }
  100% { top: -1000%; opacity:0 }
}
@-moz-keyframes fadeaway {
  0% { top: 120%; }
  90% {top: -900%; opacity:.80 }
  100% { top: -1000%; opacity:0 }
}
@keyframes fadeaway {
  0% { top: 120%; }
  90% {top: -900%; opacity:.80 }
  100% { top: -1000%; opacity:0 }
}