Jump to content

How to make get CSS animations to work?

Recommended Posts

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.

Link to comment
  • 3 weeks later...
  • Replies 15
  • Views 16.8k
  • Created
  • Last Reply

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!

Link to comment

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!!

Link to comment
  • 2 weeks later...
  • 5 months later...
  • 2 months later...

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.

Link to comment
  • 1 month later...
  • 1 month later...

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!

Link to comment
  • 2 weeks later...
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.