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


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:

Posted in