Introduction

Skroll.js is a javascript library that can create beautiful animations on scroll. It can animate elements as they enter or leave the viewport with a predefined or custom animation.

Installation

Download the files from github and include the library as follows.

<script src="skroll.min.js" type="text/javascript"></script>

Usage

After page load, create an instance by calling

var skroll = new Skroll();

Now add the elements that are to be animated using the add() method.

Consider the example

<div class="box">Animation</div>

And in js,

new Skroll()
    .add(".box",{
	    animation:"zoomIn",
	    duration:600
    })
    .init();

This will show the element with a zoomIn animation when it enters the viewport.

By default skroll is disabled on mobile devices to improve performance. It can be enabled on mobile by passing the argument as shown below when creating the instance.

var skroll = new Skroll({
    mobile:true
})

By default scrolling in monitored on the window, to change it to any other element, use

var skroll = new Skroll({
    reference:"#elem"
})

Methods

add(element,settings)

Is used to add the elements that are to be animated. It can be chained.

It accepts two arguments, element and settings.

element can be any selector like "div", ".element", "#elem" etc and settings is an object with the following properties

triggerTop:.2,               // Any value between 0 and 1
triggerBottom:.8,            // Any value between 0 and 1
delay:0,                     // Integer, delay in milliseconds
duration:500,                // Integer, duration in milliseconds
animation:"zoomIn",          // string or object
easing:"ease",               // string
wait:0,                      //  integer, wait in milliseconds
repeat:false,                // boolean
onEnter:false,               // function or false to denote no action
onLeave:false                // function or false to denote no action

triggerTop is used to specify the top part of the viewport it accepts values between zero and one, where 0 is the top of the window and 1 is the bottom end of the window. Default value is .2.

triggerBottom is used to specify the bottom part of the viewport. Default is .8.

delay(integer) If the given selector fetches more than one element, then each of those elements can be animated with a delay between them. Default values is 0 .

duration(integer) is used to specify the animation duration in milliseconds. Default 500.

animation is used to specify the animation that occurs when the element enters the viewport. It can be a string or object. Default value is zoomIn

More about animations can be found here.

A list of animations can be found here.

easing(string) is used to specify the easing with which the animation works. It can be any css accepted ease value. Default ease.

wait (integer) is used to specify the delay until a set of animations are played. Default ease.

repeat(boolean) is used to denote whether the animation should repeat once the element goes out of viewport and enters back again. Default false . This feature is in beta and is not recommended.

onEnter(i,e)(function) is used to specify the function that is to be executed when an element enters viewport. It accepts two arguments, i and e where i is the index of the element and e is the DOM of the element.

onLeave(i,e) (function) is used to specify the function that is to be executed when an element enters viewport.

.addAnimation(name,obj)

Used to add custom animations. It accepts two arguments, the name of the animation and an object that defines the animation. The object should have two methods, start(el) and end(el). Where start is the initial state of the element, ie before it enters the viewport and end is the final stage of the animation when it enters viewport. Both the methods will have an argument el that is the DOM of the element to be animated.

Sample:

.addAnimation("customAnimation",{
    start:function(el){
        el.style["transform"] = "scale(.1,.1)";
        el.style["opacity"] = 0;
     },
     end:function(el){
         el.style["transform"] = "scale(1,1)";
         el.style["opacity"] = 1;
     }
})

init()

This method should be called after adding all the elements, at the end.

.recalcPosition() 

Used to recalculate the position of elements in case of height changes that occur due to addition or loading of elements. It is recommended to call this method during window load or in an interval.

Animations.

There are a couple of methods to show animations when an element enters or leaves the viewport.

Method 1:

Use the inbuilt animations. 

Inbuilt animations can be invoked by passing the name of the animation to the animation property.

Here is a list of animations that are currently available.

• zoomIn
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInDown
• slideInLeft
• slideInLeftBig
• slideInRight
• slideInRightBig
• flipInX
• flipInY
• rotateRightIn
• rotateLeftIn
• growInLeft
• growInRight

Method 2

Pass an object as the animation property. This object will have the same properties as that of the object in addAnimation method.

Method 3

The third method is to make use of the onEnter(i,e) and onLeave(i,e) methods when using the add() method. Use custom actions on the element to create animations as you desire.

Demo

You can find different examples and how they work here. Also check this codepen or demo.