Animate Text

What does this code do?

These code snippets will allow you to animate specific blocks on text on your Squarespace Website.

Choose Your Animation

You first need to determine which animation you would like your text to have. My favourite resource for this is Justin Aguilar’s CSS Animation Cheat Sheet. Feel free to also use another animation you have found from other coders.

Whichever animation you choose, you can follow the following steps to apply it to your Squarespace Website.

Code Snippets

Code Block

Copy and paste this code into a Code Block on your Squarespace Website where you would like the code to appear.

<p class="animateText">Insert Text Here</p>

Or if you would only like part of the sentence to animate you can use the following code.

<p>Insert <span class="animateText">Text</span> Here</p>

CSS

Add the following code to Design > Custom CSS. This will hide the text until the animation runs.

.animateText {
  visibility: hidden;
}

If using Justin Aguilar’s CSS Animation Cheat Sheet click on Download. Scroll until you find the animation you would like to use. Copy it from the name of the animation to the last bracket and paste it into Design > Custom CSS. For example, if you are using the animation .slideDown you would paste the following code into Design > Custom CSS.

.slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;    

    visibility: visible !important;                     
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }           
    100% {
        transform: translateY(0%);
    }       
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }
    50%{
        -webkit-transform: translateY(8%);
    }
    65%{
        -webkit-transform: translateY(-4%);
    }
    80%{
        -webkit-transform: translateY(4%);
    }
    95%{
        -webkit-transform: translateY(-2%);
    }           
    100% {
        -webkit-transform: translateY(0%);
    }   
}

Javascript

Copy and paste the following code into Settings > Advanced > Code Injection > Header

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

Copy and paste the following code into Settings > Advanced > Code Injection > Footer. This code will make sure the animation doesn’t trigger until it is scrolled to.

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

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

Then change NAMEOFANIMATION to the name of the class you used above. For example, if I was using .slidedown, then I would use the following code. Notice that I do not use a “ . ” in front of the class name.

<script>
  $(document).ready(function() {
    $('.animateText').each(function() {
      var imagePos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      if (imagePos < topOfWindow + 400) {
        $(this).addClass("slideDown");
      }
    });
  });

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

How To Use It

1. Copy and paste the code snippets as indicated above.

2. Change NAMEOFANIMATION to an appropriate name. Make sure you spell it the same every time you use it and do not add a “ . “ before the class name.

3. If you decided to add the animation to headings or body text, change the p to match your selection.

   1. h1 = Heading 1

   2. h2 = Heading 2

   3. h3 = Heading 3

   4. h4 = Heading 4

   5. p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   6. a = Links