Javascript Animate Elements on Scroll – Animate.js

Animate.js: A tiny and light-weight vanilla Javascript library to trigger animation on an element when scrolling down or up the page. The plugin is easy to implement and all you need to call the different classes on a different element.

This plugin doesn’t provide reveal element animation but works almost similar way. The element will stay static and visible on the page and as the user scroll down the page, the element will animate.

The implementation is quite easy and simple. You can implement on your existing website. All you need to call the main files in the header and follow a few simple steps.

How to use it:

Lets first add two main stylesheet files.

<link rel="stylesheet" type="text/css" href="css/app.min.css?version=1.3.2">
<link rel="stylesheet" type="text/css" href="css/animate.css?version=1.3.2">

Next, you need to add the plugin main Js file.

<script src="animate.js?version=1.3.2"></script>

To make it work on the different element, you need to define the two type of attributes which are data-animate and data-animation-classes.

The attribute data-animation-classes is one where you can define different classes to implement a different type of animation. Have a look the below HTML to understand.

<div class="box box--zero-top visible" data-animate data-animation-classes="animated tada"></div>
<div class="box visible" data-animate data-animation-classes="animated shake"></div>
<div class="box visible" data-animate data-animation-classes="animated jello"></div>
<div class="box visible" data-animate data-animation-classes="animated wobble" data-animation-offset="0.5, 1"></div>
<div class="box visible" data-animate data-animation-classes="animated rubberBand"></div>
<div class="box visible" data-animate data-animation-classes="animated swing" data-animation-scrolled="true"></div>

Initialize the Animate.js. It provides you few of nice option to set as per your need.

<script>
var animate = new Animate({
	target: '[data-animate]',
	animatedClass: 'visible',
	offset: [0.5, 0.5],
	delay: 0,
	remove: false,
	reverse: true,
	scrolled: false,
	debug: true,
	onLoad: true,
	onScroll: true,
	onResize: false,
	callbackOnInit: function() {
		console.log('Initialised');
	},
	callbackOnInView: function(element) {
		var animationType = element.getAttribute('data-animation-classes').replace('animated', '').trim();
		console.log(animationType + ' in view.');
	},
	callbackOnAnimate: function(element) {
		console.log(element)
	}
});
animate.init();
</script>