JSFiddle - React, Tailwind, and code Playground

JavaScript

(function(){
    var starting = getWidth();
    function getWidth(){
        return window.innerWidth || document.body.clientWidth;
    }
    
    var moving = false;
    var tracking = null;
    function throttle(callback){
    	tracking = setTimeout(function(){
            moving = false;
            if(toString.call(callback) == "[object Function]")callback();
        },450);
    }
    
    function resizeStart(){
        console.log('resizing started');
    }
    function resizeEnd(){
        console.log('resizing finished');
    }
    
    var beginning = getWidth();
    var steps = [];
    var step = getWidth();
    steps.push(step);
    var changes = [];
    window.addEventListener('resize', function(){
        if(!moving){
            resizeStart()
            beginning = getWidth();
            moving = true;
        }else{
            clearTimeout(tracking);
        }
        var change = getWidth() - step;
        step = getWidth();
        
        changes.push(change);
        steps.push(step);
        
        throttle(function(){
            var totalChange = changes.reduce(function(a, b) {
                return a + b;
            });
            var direction = totalChange > 0 ? "larger" : "smaller";
            changes = [];
            if(Math.abs(totalChange) > 100){
                console.log(Math.abs(totalChange) + " pixel granular change " + direction);
            }
            console.log(Math.abs(steps[steps.length-1] - starting)+" pixel overall change");
            
            beginning = getWidth();
            
            resizeEnd();
        });
    });
})()