Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
vinamra1990

How to make get CSS animations to work?

Question

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.

Edited by vinamrakokane

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 0

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!

Share this post


Link to post
  • 1

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,

Share this post


Link to post
  • 1

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Edited by BlackWidow
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...