The aim is to get text blocks slide in on scroll. I stumbled across this "CSS Animation Cheat Sheet" by Justin Aguilar that does exactly this. I've followed the steps and added the code in the required sections.

Following is the code in the Header Section:

<squarespace:script src="plugin.js" combo="true" />
<squarespace:script src="site.js" combo="true" />
<link rel="stylesheet" type="text/css" href="www.justinaguilar.com/animations/css/animations.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Following code in the Footer (just before the /body tag) Section:

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

And following in the block that I want the animation to appear in:

<div id="page-559a88fbe4b02af487910a44" class="slideUp">

The following CSS was added to the Custom CSS section:

#page-559a88fbe4b02af487910a44{
   visibility:hidden;
 }

The above CSS in the Custom CSS seems to work as the text is hidden. However, the animation does not work on scroll. Any help in what I'm doing wrong would be appreciated.

Hi vinamrakokane, I've had the exact same issue but found a way to crack it, and yes Justin's resource is superb!

Here's the Javascript code I've used and had great success with - there's a few modifications!

1) Firstly, leave the code in the header as noted in your question above, and delete code from elsewhere

2) Add class="slideUp" to the code of any element you wish to animate on the page. i.e.

<div id="#elementname" class="slideUp"></div>

3) Replace 'slideUp' with 'slideLeft', 'slideRight' etc. Refer to Justin's page for all references.

4) In custom CSS, add "visibility: hidden;" to the style of the element you wish to animate (It will disappear temporarily!)

5) Add a code block anywhere on the specific page you wish to animate on, and set it to Markdown.

6) Add the following code to the block:

<script>   
$(window).scroll(function () {
 $('#elementname').each(function () {
 var topOfWindow = $(window).scrollTop(),
 bottomOfWindow = topOfWindow + $(window).height();

   var imagePos = $(this).offset().top;

   if(imagePos <= bottomOfWindow-100 && imagePos >= topOfWindow-250){
     $(this).addClass('slideUp');
     }else{
     $(this).removeClass('slideUp');
     }
 });
});
</script>

7) Change the reveal settings for the elements by tweaking the -100 and -250 (can be changed to +400, etc) depending on when you'd like to see them, but these settings worked for me.

8) Add the same script for each element, changing the ref ID, and keep all within the same script brackets.

9) Chaching!

1) Header:

Footer: 

2) Add class="slideUp" to the code of any element you wish to animate on the page. i.e.

3) Replace 'slideUp' with 'slideLeft', 'slideRight' etc. Refer to Justin's page for all references.4) In custom CSS, add "visibility: hidden;" to the style of the element you wish to animate (It will disappear temporarily!)

page-559a88fbe4b02af487910a44{

“visibility: hidden;”

}5) Add a code block anywhere on the specific page you wish to animate on, and set it to Markdown.6) Add the following code to the block:

7) Change the reveal settings for the elements by tweaking the -100 and -250 (can be changed to +400, etc) depending on when you'd like to see them, but these settings worked for me.8) Add the same script for each element, changing the ref ID, and keep all within the same script brackets.9) Chaching!

Do I have everything in the right order?

Please make the corrections so everything is all put together. I tried to put both of your answers together and have gotten a bit confused..

Thanks!!

Hi keepitfrank

I've tried your solution but it seems I'm still missing something. Can you share the link to where you've implemented this code? Just want to see how it works for you. Thanks.

Finally got it to work! Extremely rewarding!

Hi vinamrakokane,

Was curious what it took to make this work? I am having trouble figuring out why I can't get it to work. Do you have a link you can share as well?

Cheers,

In case anyone's still having problems getting this to work, here's how I did it:

STEP 1:

In Settings > Advanced > Code Injection > Header put this:

<link rel="stylesheet" type="text/css" href="www.justinaguilar.com/animations/css/animations.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

STEP 2:

On your page insert an image that you want to animate and find out it's Block-ID (works best with this Chrome plugin). It should be something like #block-yui31726146063883612011846.

Below the image insert a Code. Copy and paste this into the code...

<script>
   $(window).scroll(function() {
       $('#animatedElement').each(function(){
       var imagePos = $(this).offset().top;

       var topOfWindow = $(window).scrollTop();
           if (imagePos < topOfWindow+400) {
               $(this).addClass("slideUp");
           }
       });
   });
</script>

Now replace #animatedElement with your Block-ID. If you want a different animation, replace slideUp with either of these:slideDown, slideLeft, slideRight, slideExpandUp, expandUp, fadeIn, expandOpen, bigEntrance, hatch, pulse, floating, tossing, pullUp, pullDown, stretchLeft

STEP 3:Go to Design > Custom CSS and add this...

#animatedElement {
visibility: none;
}

...again, replacing #animatedElement with your Block-ID.

@Rammy Does your 3 Step System still work? I've been trying, but the elements still won't animate.

@Rammy Does your 3 Step System still work? I've been trying, but the elements still won't animate.

Hi keepitfrank, thank you so much for this explanation. I think I am following all of your instructions, but I wanted to ask a clarification question.

In step 2, "add class 'slideUp' to the code of any element you wish to animate"... where exactly am I inserting that code? In custom CSS? In a code block?

Additionally, what exactly did you put into Custom CSS with reference to visibility?

Thank you for your time!

Hi everyone, struggling to get this working, if anyone can help I would be very grateful, thanks.

Hi @Rammyhmmm, I can't get this to work. Is it because im setting it up in an index page? What template are you using? I'm using Marquee

Still no dice Rammy. Anyone else crack this thing??

Hi @vinamrakokane, check out this in-depth, step-by-step tutorial I developed to solve this when you have time.

http://www.droverrideshare.com/blog/2016/7/25/css-animations-and-squarespace

Hi @johnlyons, check out this in-depth, step-by-step tutorial I developed to solve this when you have time.

http://www.droverrideshare.com/blog/2016/7/25/css-animations-and-squarespace

Hi @gschauz, check out this in-depth, step-by-step tutorial I developed to solve this when you have time.

http://www.droverrideshare.com/blog/2016/7/25/css-animations-and-squarespace