JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/davetayls/jquery.kinetic/master/jquery.kinetic.js"></script>
<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.js"></script>
<div class="viewport">
    <div class="container">
        <div class="page">
            <div class="c">Target 1</div>
            <div class="c">Target 2</div>
            <div class="c">Target 3</div>
            <div class="c">Target 4</div>
            <div class="c">Target 5</div>
        </div>
    </div>
</div>
<button id="reset">Reset</button>

CSS

.viewport {
    background-color: #aaa;
    position:absolute;
    top: 100px;
    left: 100px;
    width: 280px;
    height: 200px;
    overflow: hidden;
}

.container, .page {background-color: #eee; position:relative;width: 380px; height: 300px;}

.container div.c {position: relative; float: left; margin: 20px; width: 100px; height: 60px;background-color: #fff}

JavaScript

$(function(){
    var z = 1;
    $('.viewport').kinetic().on('mousewheel', function(event, delta, deltaX, deltaY){
        console.log(delta, deltaX, deltaY);
        z = deltaY < 0 ? z / 1.2 : z * 1.2;
        console.log(z);
        $('.page').zoomTo({targetsize:z, duration: 600, root: $('.container')})
    });

    $('#reset').click(function(){
        z = 1;
        $('.page').zoomTo({targetsize:z, duration: 600, root: $('.container')})
        //$('.zoomContainer').zoomTo({targetsize:z, duration: 600, root: $('.zoomViewport')})
    })
        
})