Squarespace: Moving Letters

In this post, we will learn how to create Moving Letters (Animation Effect), in Squarespace. View 16 demo effect here

Step 1. Choose Effect

First, you access this link and choose the effect which you like.

There are 16 effects, created by Tobias Ahlin, use CSS & Javascript.

Step 2. Get Source Code

Hover on effect > Click Source

You will see HTML & JavaScript Code

and CSS

and JavaScript

Step 3. Add to Your Site

First, insert HTML code with Markdown Block

Next, insert CSS & JavaScript code with Code Block

Wrap CSS in <style> and </style> tag

Wrap JavaScript in <script> and </script> tag

You can also insert to Page > Advanced > Header

Final, insert this code with Code Block or Page > Advanced > Header

Save!

Step 4. Done. Check your site

Log out your account and open the page. Or open the page in a new window to check (JavaScript code will not work if you are logged in, or edit mode).

If you have any questions, just comment below.

Share this post:

2 thoughts on “Squarespace: Moving Letters”

  1. Hello, I had a question on how I would execute this script with multiple moving lines. For example, doing all the days of the week instead of just THURSDAY in your code. Also below my text on my website, there is code showing that I want to be hidden , but can’t figure it out. Any advice would be great, thanks.

    Reply

Leave a Comment