<div class="container">
  <div class="hello">
    <h1>Hammer.js and CSS Variables</h1>
    <h2>Tinder-like Touchcards with CSS!</h2>
    <p>Get and set CSS Variables directly in JS</p>
  </div>
  <div class="wrapper">
    <div id="hammer"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTUuMTEgMjkuOTYiPjx0aXRsZT5sb2dvPC90aXRsZT48ZyBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiPjxnIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSI+PHBhdGggZD0iTTUyLDE1LjU2bDgtOC4xM2EuOTQuOTQsMCwwLDEsLjcyLS40aDMuMzRhLjU0LjU0LDAsMCwxLC4yMiwwczAsLjEsMCwuMjJhLjg5Ljg5LDAsMCwxLS4yOC40bC04LjU2LDguNzJhLjU2LjU2LDAsMCwwLDAsLjg2TDY0LjA1LDI2YS44OS44OSwwLDAsMSwuMjguNGMwLC4xMiwwLC4xOSwwLC4yMmEuNTQuNTQsMCwwLDEtLjIyLDBINjAuNzVhLjk0Ljk0LDAsMCwxLS43Mi0uNGwtOC04LjEzQTEuNjMsMS42MywwLDAsMSw1MiwxNS41NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MS4zOCAtMi4wNCkiIHN0eWxlPSJmaWxsOiM1NzM1NWUiLz48cGF0aCBkPSJNODMsMi42OCw3Mi41OCwzMS41OWEuNDguNDgsMCwwLDEtLjUyLjQxSDY5LjI0Yy0uMjcsMC0uMzYtLjEzLS4yOC0uNEw3OS40LDIuNjhhLjYxLjYxLDAsMCwxLC41Ni0uNGgyLjgxQzgzLDIuMjgsODMuMTIsMi40Miw4MywyLjY4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxLjM4IC0yLjA0KSIgc3R5bGU9ImZpbGw6IzU3MzU1ZSIvPjwvZz48ZyBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiPjxwYXRoIGQ9Ik0xMDEuMzUsMy44OGw4LjgsMjYuODRhMSwxLDAsMCwxLS4yMi45MiwxLjE1LDEuMTUsMCwwLDEtLjg2LjM2aC00LjI4Yy0uNDUsMC0uOC0uMjktMS0uODhMMTAxLjMyLDI0aC03LjhsLTIuNDQsNy4xNmMtLjI0LjU5LS41OC44OC0xLC44OEg4NS44MmExLjE1LDEuMTUsMCwwLDEtLjg1LS4zNSwxLDEsMCwwLDEtLjIxLS45TDkzLjYsMy45MWEyLjMzLDIuMzMsMCwwLDEsLjY5LTEuMDUsMi43MSwyLjcxLDAsMCwxLC45My0uNTIsMTAuMTMsMTAuMTMsMCwwLDEsMS4zLS4yNiwxMS41NCwxMS41NCwwLDAsMSwxLjg2LDAsNS44MSw1LjgxLDAsMCwxLDIsLjUyQTIuMjIsMi4yMiwwLDAsMSwxMDEuMzUsMy44OFpNOTkuNiwxOC41Miw5Ny40NCw5bC0yLjIsOS41NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MS4zOCAtMi4wNCkiIHN0eWxlPSJmaWxsOiM1NzM1NWUiLz48cGF0aCBkPSJNMTE4LjcyLDE1Ljc2djE1YTEuMTEsMS4xMSwwLDAsMS0uNDIuOSwxLjU1LDEuNTUsMCwwLDEtMSwuMzRoLTMuNTZhMS41LDEuNSwwLDAsMS0xLS4zNiwxLjEyLDEuMTIsMCwwLDEtLjQtLjg4VjE0LjY4YTQuNjMsNC42MywwLDAsMSwxLjM0LTMuMjZBNC42OCw0LjY4LDAsMCwxLDExNy4yLDEwaDcuMzZhNC42OCw0LjY4LDAsMCwxLDMuNTgsMS40Miw0LjYzLDQuNjMsMCwwLDEsMS4zNCwzLjI2bDAsMTYuMDhhMS4xLDEuMSwwLDAsMS0uNDQuOSwxLjU3LDEuNTcsMCwwLDEtMSwuMzRoLTMuNTJhMS41LDEuNSwwLDAsMS0xLS4zNiwxLjEyLDEuMTIsMCwwLDEtLjQtLjg4di0xNWMwLS4zMi0uMDktLjQ4LS4yOC0uNDhIMTE5UTExOC43MiwxNS4yOCwxMTguNzIsMTUuNzZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTEuMzggLTIuMDQpIiBzdHlsZT0iZmlsbDojNTczNTVlIi8+PHBhdGggZD0iTTE1MSwzLjUydjI1LjZhMi43NSwyLjc1LDAsMCwxLS44MiwyLjEsMy4xNSwzLjE1LDAsMCwxLTIuMjYuNzhoLTguOGE1LjM0LDUuMzQsMCwwLDEtMy44NC0xLjU0LDUsNSwwLDAsMS0xLjYtMy43VjE1LjJhNS4xNyw1LjE3LDAsMCwxLDEuNDYtMy42NEE1LjA4LDUuMDgsMCwwLDEsMTM5LDEwaDUuNTZWMy41MmExLjEyLDEuMTIsMCwwLDEsLjQtLjg4LDEuNSwxLjUsMCwwLDEsMS0uMzZoMy41MmExLjU3LDEuNTcsMCwwLDEsMSwuMzRBMS4xLDEuMSwwLDAsMSwxNTEsMy41MlpNMTQwLDE1Ljc2VjI2LjI4YzAsLjMyLjA5LjQ4LjI4LjQ4aDRxLjI0LDAsLjI0LS40OHYtMTFoLTQuMkMxNDAuMTMsMTUuMjgsMTQwLDE1LjQ0LDE0MCwxNS43NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MS4zOCAtMi4wNCkiIHN0eWxlPSJmaWxsOiM1NzM1NWUiLz48cGF0aCBkPSJNMTYyLjI0LDE2LjMyVjMwLjc2YTEuMSwxLjEsMCwwLDEtLjQ0LjksMS41NywxLjU3LDAsMCwxLTEsLjM0aC0zLjZhMS40OCwxLjQ4LDAsMCwxLTEtLjM4LDEuMTMsMS4xMywwLDAsMS0uNDItLjg2VjE1LjJhNS4xNiw1LjE2LDAsMCwxLDUuNC01LjJoNS40NGExLjQ2LDEuNDYsMCwwLDEsMSwuMzgsMS4xOCwxLjE4LDAsMCwxLC40Ljl2Mi44YTEuMTYsMS4xNiwwLDAsMS0uNDIuOTIsMS41MSwxLjUxLDAsMCwxLTEsLjM2aC0zLjY4QzE2Mi40NywxNS4zNiwxNjIuMjQsMTUuNjgsMTYyLjI0LDE2LjMyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxLjM4IC0yLjA0KSIgc3R5bGU9ImZpbGw6IzU3MzU1ZSIvPjxwYXRoIGQ9Ik0xNzcuMjQsMjQuODhWMjYuMmMwLC4zNS4xMy41Mi40LjUyaDcuNDRhMS41LDEuNSwwLDAsMSwxLC4zNCwxLDEsMCwwLDEsLjQyLjgydjNhMS4wNiwxLjA2LDAsMCwxLS40Mi43OCwxLjQ0LDEuNDQsMCwwLDEtMSwuMzhoLTkuMzZhNS4yNCw1LjI0LDAsMCwxLTMuNDQtMS4xOCw0LjE4LDQuMTgsMCwwLDEtMS40NC0zLjQyVjE0LjEyYTQuMDUsNC4wNSwwLDAsMSwxLjEyLTNBNC4yNiw0LjI2LDAsMCwxLDE3NS4xMiwxMGg4LjI0YTQuOSw0LjksMCwwLDEsMy4wOCwxLDMuNTksMy41OSwwLDAsMSwxLjMyLDN2NGExMS4zNCwxMS4zNCwwLDAsMS0uMDYsMS4zLDYuMjgsNi4yOCwwLDAsMS0uMzQsMS4zLDMsMywwLDAsMS0xLDEuMzYsNS4zOSw1LjM5LDAsMCwxLTEuODguODhsLTYuODgsMS40NFExNzcuMjQsMjQuMzUsMTc3LjI0LDI0Ljg4Wm0tLjA4LTUsMy43Ni0uNjhjLjM1LS4wOC41Mi0uMzcuNTItLjg4VjE1LjY4YzAtLjI5LS4xMS0uNDQtLjMyLS40NGgtMy42NGMtLjIxLDAtLjMyLjE1LS4zMi40NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MS4zOCAtMi4wNCkiIHN0eWxlPSJmaWxsOiM1NzM1NWUiLz48L2c+PGcgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIj48cGF0aCBkPSJNMTk3Ljg0LDcuNDhsOCw4LjEzYTEuNjEsMS42MSwwLDAsMSwwLDIuNTRsLTgsOC4xM2EuOTEuOTEsMCwwLDEtLjcyLjRoLTMuMzZhLjM5LjM5LDAsMCwxLS4yMiwwczAtLjEsMC0uMjJhLjg5Ljg5LDAsMCwxLC4yOC0uNDJsOC41Ni04LjcyYS41MS41MSwwLDAsMCwwLS44TDE5My44LDcuNzZhLjg5Ljg5LDAsMCwxLS4yOC0uNDJjMC0uMTIsMC0uMTksMC0uMjJhLjM5LjM5LDAsMCwxLC4yMiwwaDMuMzZBLjkxLjkxLDAsMCwxLDE5Ny44NCw3LjQ4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxLjM4IC0yLjA0KSIgc3R5bGU9ImZpbGw6IzU3MzU1ZSIvPjwvZz48L2c+PC9zdmc+" alt="Andre Bellmann" height="24">
    </div>
    <p>Touch/Drag the image</p>
  </div>
</div>

:root {
  --horizontal: 0;
}

body {
  overflow: hidden;
}

img {
  max-width: 100%;
}
.container {
  text-align: center;
}
.wrapper {
  width: 250px;
  height: 250px;
  background-color: #ddd;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

#hammer {
  transform: translate3d(calc(var(--horizontal) * 1px), 0, 0)
    rotate(calc(var(--horizontal) * 0.1deg));
  will-change: transform;
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index:1;
  
  img {
    pointer-events: none;
  }

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    background-color: silver;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:-1;
  }
  &::after {
    background-color: black;
    opacity: calc(0 + 0.001 * var(--horizontal));
    z-index:-2;
    box-shadow: 0 10px 10px rgba(0,0,0,1);
  }
}

const box = document.querySelector("#hammer");
const hBox = new Hammer(box);

let newX = {
  deltaX: 200
};
const physicspoint = { deltaX: 0 };

const springBack = function() {
  dynamics.animate(newX, physicspoint, {
    complete: console.log("complete"),
    change: e => box.style.setProperty("--horizontal", e.deltaX),
    type: dynamics.spring
  });
};

// listen to events...
hBox.on("panmove", function(e) {
  box.style.setProperty("--horizontal", e.deltaX);
  newX.deltaX = e.deltaX;
});

hBox.on("panend", function(e) {
  springBack();
});

springBack();