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.

12 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
  2. Hi there! Thank you so much for this helpful tutorial. How would I edit the code to animate it only once and then the text stays on the page?

    I changed the js to anime.timeline({loop:false}) but it loops once and then everything disappears.

    Thank you

    Reply

Leave a Comment