How to Animate Text on Your Squarespace Website

Squarespace has given you the option to animate images on your website. However, there is not a built in option to animate blocks of text.

In this video I show you how to use Justin Aguilar’s CSS Animation Cheat Sheet to animate text on your Squarespace Website. The code used in the video is provided below.

Step 1: Add Your Text Using a Code Block

Add a code block to your website and copy and paste the following code. Insert the text you want to animate between the <p></p> tags.

<p class="animated-text">Insert Text Here</p>

If you would like the text to be centered, use the following code instead.

<p class="animated-text" style= "text-align: center;">Insert Text Here</p>

Step 2: Choose Your Animation

Go to Justin Aguilar’s CSS Animation Cheat Sheet and choose the animation you would like to use on your website. Then choose the class name below that matches the animation you want to use.

slideDown

slideUp

slideLeft

slideRight

slideExpandUp

expandUp

fadeIn

expandOpen

bigEntrance

hatch

bounce

pulse

floating

tossing

pullUp

pullDown

stretchLeft

stretchRight

Step 3: Add CSS

Go to Design > Custom CSS and copy and paste the following code. This code hides the text until the animation starts.

.animated-text {
  visibility: hidden;
}

Then, copy and paste the CSS code for your chosen animation from the Justin Aguilar’s CSS Animation Cheat Sheet.

Step 4: Inject Code Into Your Header and Footer

Go to Settings > Advanced > Code Injection and copy and past the following code into the header.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The copy and paste the following code into the footer.

<script>
$(window).scroll(function() {
$('.animated-text').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();if (imagePos < topOfWindow+400) {
$(this).addClass("NAMEOFANIMATION");
}
});
});
</script>

Then change NAMEOFANIMATION to match the class name you choose in Step 2.

Note: Animations At the Top of the Page

To have the animations at the top of the page start without having to scroll first, use the following code in your footer instead of the code above.

<script>
$(document).ready(function() {
  $('.animated-text').each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+400) {
      $(this).addClass("NAMEOFANIMATION");
    }
  });
});
  
$(window).scroll(function() {
  $('.animated-text').each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+400) {
      $(this).addClass("NAMEOFANIMATION");
    }
  });
});
</script>

Then change NAMEOFANIMATION to match the class name you choose in Step 2.

Important Note

This CSS Trick requires some customization to work for the animation that you have chosen. Be careful of the following.

1. Make sure you use the correct animation name. If you do not use the name as it appears in Step 1, the animation will not work.

2. Capitalization matters. If the animation name uses a capitol, then you must use it too.

Here are some other posts you may like:

• How to Only Display the Cart Icon Once an Item Has Been Added

• How to Add a Multi-Layer Dropdown Box to Your Squarespace Website

• How To Add A Clickable Phone Number On Your Squarespace Website