https://github.com/8manos/la-tina.git

testframes.js

! function(window) {
    function _log(msg) {
        console.error(msg)
    }

    function _pad(character, num, size) {
        for (var s = "" + num, c = character || "0"; s.length < size;) s = c + s;
        return s
    }

    function _downloadAssets(routes, onAllLoaded) {
        function onload() {
            0 == --numLoading && onAllLoaded()
        }
        var i, img, numLoading = routes.length,
            images = [];
        for (i = 0; i < routes.length; i++)(img = images[i] = new Image).src = routes[i], img.onload = onload;
        return images
    }

    function _animationStart() {
        var width, height, canvas;
        width = assets[0].width, height = assets[0].height, (canvas = document.createElement("canvas")).width = width, canvas.height = height, parent.appendChild(canvas), context = canvas.getContext("2d"), window.requestAnimationFrame(_animationFrame)
    }
    var parent, latestFrame, context, assets = [],
        scroll = {
            start: 0,
            length: 100
        },
        _animationFrame = function() {
            var n, start1, stop1, start2, stop2, newVal, frame = (n = window.scrollY, start1 = scroll.start, stop1 = scroll.length, start2 = 0, stop2 = assets.length - 1, newVal = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2, Math.floor(Math.max(Math.min(newVal, stop2), start2)));
            frame !== latestFrame && (latestFrame = frame, context.drawImage(assets[latestFrame], 0, 0)), window.requestAnimationFrame(_animationFrame)
            
            /* Here we can hack the code something like this: */
            console.log("Latest frame is now: ", latestFrame );
            if( latestFrame == 1 ){
                // fade in first block
            }else if(latestFrame == 12){
                // fade out first block
            }else if(latestFrame == 13){
                // fade in second block
            }else if(latestFrame == 24){
                // fade out second block
            }else if(latestFrame == 25){
                // fade in third block
            }
        };
    void 0 === window.scrollAnimate && (window.scrollAnimate = function(params) {
        void 0 !== params ? !(parent = "string" == typeof params.parent ? document.querySelector(params.parent) : params.parent) || parent.length <= 0 ? _log("Parent element not found!") : "object" == typeof params.scroll ? (scroll.start = params.scroll.start, scroll.length = scroll.start + params.scroll.length, Array.isArray(params.frames) ? assets = _downloadAssets(params.frames, _animationStart) : "object" == typeof params.frames ? assets = _downloadAssets(function(path, prefix, extension, count, pad) {
            var assetNumber, routes = [],
                padString = "";
            for ("/" !== path.split("")[path.length - 1] && (path += "/"), 0 !== extension.indexOf(".") && (extension = "." + extension), "string" == typeof pad && (padString = pad.substr(0, 1)), assetNumber = 0; assetNumber < count; assetNumber++) routes.push(path + prefix + _pad(padString, assetNumber, pad.length) + extension);
            return routes
        }(params.frames.path, params.frames.prefix, params.frames.extension, params.frames.amount, !!params.frames.pad && params.frames.pad), _animationStart) : _log("Invalid frames argument!")) : _log("Invalid scroll argument!") : _log("Invalid Settings!")
    })
}(window);