Skroll.js

Go to webpage | Github

Basic (zoomIn) Animation with delay

<div class="zoomIn"></div>
<div class="zoomIn"></div>
<div class="zoomIn"></div>
new Skroll()
	.add(".zoomIn",{
		duration:600,
		delay:150
	}).init();

Animating multiple elements.

<div class="box flipX"></div>
<div class="box flipX"></div>
<div class="box flipX"></div>
<div class="box flipX"></div>
<div class="box flipX"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
<div class="box flipY"></div>
new Skroll()
	.add(".flipX",{
		animation:"flipInX",
		delay:150,
		duration:600
	})
	.add(".flipY",{
		animation:"flipInY",
		delay:150,
		duration:600
	})
	.init();

Custom animation using addAnimation() method

<div class="custom"></div>
<div class="custom"></div>
<div class="custom"></div>
<div class="custom"></div>
new Skroll()
.addAnimation("custom",{
	start:function(e){
		e.style["transform"] = "rotate(360deg) scale(.2,.2)";
		e.style["transform-origin"] = "50% 50%";
		e.style["opacity"] = 0;
	},
	end:function(e){
		e.style["transform"] = "rotate(0deg) scale(1,1)";
		e.style["opacity"] = 1;
	}
})
.add(".custom",{
	animation:"custom",
	duration:700,
	delay:100
})
.init();

Custom animation by passing animation as an object.

<div class="custom"></div>
<div class="custom"></div>
<div class="custom"></div>
<div class="custom"></div>
new Skroll()
.add(".custom",{
	animation:{
		start:function(e){
			e.style["transform"] = "skew(-20deg) translate(50%,0)";
		    e.style["opacity"] = 0;
		},
		end:function(e){
			e.style["transform"] = "skew(0deg) translate(0%,0)";
		    e.style["opacity"] = 1;
		}
	},
	delay:100,
	duration:700
})
.init();

onEnter() and onLeave() with custom trigger values

<div class="onevent"></div>
<div class="onevent"></div>
<div class="onevent"></div>
<div class="onevent"></div>
<div class="onevent"></div>
new Skroll()
.add(".onevent",{
	triggerTop:.5,
	triggerBottom:.7,
	onEnter:function(i,e){
		e.innerHTML = "Element "+i+" enters";
	},
	onLeave:function(i,e){
		e.innerHTML = "Element "+i+" leaves";
	}
})
.init();