Draggable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create scrollable DOM elements with Greensock</title>
    <style>
        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
</head>
<body>
<div id="map">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/338546/wowmap.jpg" />
</div>
<script>
    const $map = document.getElementById("map");
    Draggable.create($map, {
        type:"scroll",
        edgeResistance:0.5,
        throwProps:true,
        lockAxis: false
    });

    // Zoom
    $map.addEventListener('wheel', function(evt) {
        evt.preventDefault();
        const scrolledDown = evt.deltaY > 0;
        TweenLite.to(this, 0, {
            transform: `scale(${scrolledDown ? 1: 2})`
        })
    })
</script>
</body>
</html>

// Code goes here

/* Styles go here */