scrollme

Animate CSS properties on scroll

Requires:

• Nodejs
• Gulp

Installation

$ npm install scrollme --save

AMD

define(['scrollme'], function(ScrollMe){
    var scrollMe = ScrollMe;
});

CommonJS

var scrollMe = require('scrollme');

Global namespace

var scrollMe = window.ScrollMe;

Live demo

TODO:

• Write proper documentation

Testing:

• $ npm test

Code:

//store scroll position
var scrollY = 0;
 
var scrollMe = new ScrollMe();
 
//get total scroll area
var totalScrollAreaHeight = $('body').height();
 
//get total visible area
var clientHeight = $(window).innerHeight();
 
//init the lib
scrollMe.init(totalScrollAreaHeight, clientHeight);
 
//add listener to update scrollY position
$(window).scroll(function() {
    //get scroll position
    scrollY = window.scrollY || window.pageYOffset;
});

//add animation to element
scrollMe.addAnimation({
    init: 0, //scroll start point percent values
    end: 20, //scroll end point percent values
    onUpdate: function(data, value) {
 
        //TweenLite used for demo
        TweenLite.to($('.box-opacity'), .3, {opacity:value});
    },
    propStart: 0,
    propEnd: 1
});

//add animation with percentage string values
scrollMe.addAnimation({
    init: 0, //scroll start point percent values
    end: 20, //scroll end point percent values
    onUpdate: function(data, value) {
 
        //TweenLite used for demo
        TweenLite.to($('.box'), .3, {width:value});
    },
    propStart: '0%',
    propEnd: '100%'
});

//add rendering loop
function renderLoop() {
 
    //updates scroll value
    scrollMe.render(scrollY);
 
    requestAnimationFrame(renderLoop);
};
 
requestAnimationFrame(renderLoop);