ScrollAnim

This is a tiny little JS framework fits in 5kb file. It is attached to the element and when the element comes in the viewport while you are scrolling you can animate the element any way you want. This is a small framework but very efficient to use. One thing that I like most is that it uses everyone's favourite Animate.css library to animate the element. But it is not bound to animate.css library. You can define your own animation with keyframe and animate the element. Let's see how it works.

First thing first pull in the library -

			<script type="text/javascript" src="Assets/Scrollanim.js/scrollanim.min.js">
		

One important thing to note that. This file must be put before the closing of body tag. I mean at the end. Because when the page loads this file and starts executing, it tries to find the element body. Clearly if you include this file in the head section you will get an error like trying to get property scrollHeight of null. Now throughout the document you might be using the functionality of this library. And if this library tries to access an element which is not created yet. It will simply ignore the element and the animation won't happen. So it's better to include this file at the end. Clear enough? Now let's see how we can get the best of this little tiny but powerful library.

			<p data-kui-anim="fadeIn">Show this with fade-in</p>
		

This is all about this library. Funny. And it does everything you are expecting. If you want to do it with javascript way you can follow the below approach -

			<p>Show this with fade-in</p>
			<script type="text/javascript">
				kissuiScrollAnim.add(element, {
				  'in': 'fadeIn'
				});
			</script>
		

Now whenever the p element comes in the view, it starts animating with the effect fadeIn.

One thing to remember, Your element will start animating only when the whole element comes in the viewport. It means when you scroll down and if the partial of the element is visible, the element won't animate. To make the animation happen you need the element to come whole of it. This is the problem if your element is big. So this library is ideal for small size element in your page.

This library doesn't have much options or settings. It works on a basic principle and does the job well. As this library doesn't come with any options, you have to modify the CSS animation any way want. Let's say you want the animation to start 1 second later it comes in the viewport. This has to be done with CSS animation keyframe. Well, this is actually good for some reason. This way your animation will depend on only CSS, in CSS you have the full control to customize your animation any way you want. That's why I kind of like this animation.

Following is an example -

			<div data-kui-anim="fadeInRight" style="background: green; height: 50px; width: 50px; ">
			</div>
			<div data-kui-anim="fadeInRight" 
				style="background: green; height: 50px; width: 50px; animation-delay: 300ms;">
			</div>
		

The above example produce the following result -

More Demo