JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="test">
    <div id="tracking" data-motion-blur>
        <img src="https://ununsplash.imgix.net/photo-1429277005502-eed8e872fe52?fit=crop&fm=jpg&h=700&q=75&w=1050" />
    </div>
</div>

CSS

.filters {
    display: none;
}
[data-motion-blur] {
    -webkit-filter: url("#blur");
    filter: url("#blur");
}

img{
    max-width: 100%;
}

body{
    overflow: hidden;
}

#test {
    /*overflow: hidden;*/
    position: relative;
    width: 100%;
    height: 100vh;
}
#test > div {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    animation: testY 2s infinite;
}

@keyframes testY{
    0%{
        top: -120%;
        animation-timing-function: ease-out;
    }
    20%{
        top: 0;
        animation-timing-function: ease-in;
    }
    80%{
        top: 2%;
        animation-timing-function: ease-out;
    }
    100%{
        top: 120%;
        animation-timing-function: ease-in;
    }
}

@keyframes testX{
    0%{
        left: -120%;
        animation-timing-function: ease-out;
    }
    20%{
        left: 0;
        animation-timing-function: ease-in;
    }
    80%{
        left: 3%;
        animation-timing-function: ease-out;
    }
    100%{
        left: 120%;
        animation-timing-function: ease-in;
    }
}

JavaScript

var motionTrack = {
    init: function(){
        this.appendFilter();
        this.watchElem();
    },
    watchElem: function () {
        var tracking = document.getElementById('tracking');
        var c = tracking.getBoundingClientRect();
        tracking.velocityX = 0;
        tracking.velocityY = 0;
        tracking.lastX = c.left;
        tracking.lastY = c.top;
        setInterval(function () {
            var c = tracking.getBoundingClientRect();
            tracking.velocityX = c.left - tracking.lastX;
            tracking.lastX = c.left;
            tracking.velocityY = c.top - tracking.lastY;
            tracking.lastY = c.top;
            console.log([tracking.velocityX, tracking.velocityY]);
            motionTrack.filter.setStdDeviation(Math.min(20, Math.abs(tracking.velocityX / 2)), Math.min(20, Math.abs(tracking.velocityY / 2)));
        }, 32);
    },
    appendFilter: function(){
        document.body.innerHTML = document.body.innerHTML + '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="motionTrack-filters" class="filters"><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0,0" /></filter></defs></svg>';
        var filter = document.getElementById('blur');
        var filterProps = filter.childNodes;
        motionTrack.filter = filterProps[0];
    }
}

motionTrack.init();