How to use CSS3 Animate It – Animate on Scroll

What is CSS3 Animate It?

CSS3 Animate It is a CSS animation library that animates elements onto screen as you scroll.

The library utilizes CSS3 animations which are triggered by javascript. The only requirement is that you have jQuery included.

Installation

Include css3-animated.js at the end of your file and animations.css in the head.

On Scroll Basic Animations

So let’s animate some boxes as they come into view. We will make some 400px x 400px boxes and make them a color we can see. Then we can add our “animatedParent” class to a parent div and “animated *ANIMATION NAME*” to our box class.

If you want to only animate the element once then you just have to add the “animateOnce” class to the “animated” element and it will only animate into view once it’s scrolled over once, then stay there.

Keep in mind that the animation is triggered when the “animatedParent” class comes into view, not when the child element comes into view.

As you can see we have added some different examples of animations here. You can find the list of animations here.

Animation Speeds

So there are essentially 4 speeds for the animations. Normal, Slow, Slower and Slowest. It is quite easy to extend this if you look through the animation CSS file though.

Animation Delay

So we can delay the starting of an animation using the delay class. All of the animation delay classes are listed below.

  • delay-250
  • delay-500
  • delay-750
  • delay-1000
  • delay-1250
  • delay-1500
  • delay-1750
  • delay-2000
  • delay-2500
  • delay-3000
  • delay-3500

Here is an example of how these delayed animations are applied.

Animation Sequencing

So if you want to run the animations one after the other then we can use the sequencing classes.
So first we are going to set the animation speed on the “animatedParent” element by adding “data-sequence=’500′” to the element.
Then we are going to number the child elements with “data-id=’1′”. So let’s see how this works in our example.

So as you can see you are only using the one “animatedParent” because you want to run the whole group once it comes into view.

Animation Offsetting

So let’s say you want to offset the animation so it only animates once you have scrolled past it so far or if you want it to trigger before you hit the “animatedParent” element. You would do this using “data-appear-top-offset=’-300′”, this will start the animation once you have scrolled past the element by 300px.

 

Animating On Click

Animating an element on click works slightly differently because you don’t need to use an “animatedParent”. All you need to do is add an “animatedClick” to the button or link and add “data-target=’clickExample'” with the target class and then add your target class to the target element.

You may also like...

17 Responses

  1. abdul wajid says:

    i am using the given classes with the help of your example but when i refresh my page my content disappears

    • Jack says:

      Hi Abdul, It sounds like you haven’t loaded in the JavaScript files properly. What happens is the CSS will hide it on load so you don’t have it snapping in and out. Then when the JavaScript loads or when it comes into view, it will slide into view.

      Without the JavaScript though it just won’t appear.

      Let me know if that helps 🙂

  2. mrovietnam says:

    Hello Admin,
    I have use this animate for my website is: http://maykhoankeyang.com/
    But when i refresh or change to view on mobile have a space. How to fix it

    • Jack says:

      Using “overflow-x:hidden” should do the trick :). Let me know if you have any more trouble with it.

  3. Sookiepi Gonfart says:

    I get working now but i need to get annimations to stop when I scroll up and down. i just want them to animate when they seen first time..

    • Jack says:

      There is an ‘animateOnce’ attribute you can use to achieve that. There is a section about it on the css3 animate page and I’ll amend this tutorial to include it.

  4. movementBruce says:

    I have this working and it looks great, but everything loads on the page at the same time. It does not seem to be loading as the page scrolls. If I reload the page when I am on the element I see the animation, but if I load the page from the top, then scroll, anything below the fold appears to have already animated in. Did I miss a tag somewhere that stops everything from loading?

    • Kendra says:

      Do you happen to be using the animate.css library somewhere else in your project? I was having the same issue as you, and I found that some of the class names used in animate.css are the same class names used in these animations. To fix this, I went in to the animations.css file and deleted the animations I wasn’t using. For the ones I did use, I renamed the animation names and classes to something else that wouldn’t mess with the animate.css library. For example, I changed fadeinUp to fade-in-up. This seems to work for me. Hopefully this helps someone out!

    • akmal says:

      I ran into the same issue as well. I fixed it by adding the doctype

  5. David says:

    The first thing I want to say is thanks a lot for sharing this tool. I have a question/problem. I would like the animations effects to be seen only by scrolling the screen down. So I scroll – see the animation – scroll up – everything is waiting on the screen – and when I go down again the animation are repeating. In my opinion playing animations on scroll up is confusing. THANK YOU

    • Jack says:

      Hi David,
      There isnt anything to allow you to do that at the moment. There is the animateOnce attribute, but obviously that would prevent the animations from repeating again.

      Ill consider adding this in a future release 🙂

  6. Christian says:

    My problem is that the animations start before I scroll the page, so I don’t see because the animations start when I’m still at the top of the page.

    • Christian says:

      Ok, i solved this problem but now when i use animateOnce nothing appears

      • movementBruce says:

        Christian… how did you solve the issue of the animations starting before you scroll? I am having the same trouble.

        Thanks!

  7. Mitchell says:

    I have installed on http://onsched.com/2018sitedone/ and seems to work for the first element on the page, but as you scroll down the rest of the animations have already started before I scrolled to them… however if I scroll up from the bottom they all appear as I scroll, it’s just scrolling down I’m having the problem with

Leave a Reply

Your email address will not be published. Required fields are marked *