<div class="test">
  <div class="content">
    <div class="number old">$10</div>
    <div class="number new">0</div>
  </div>
  <input type="range" class="range" min="0" max="100" value="10">
</div>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800");
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  background: radial-gradient(circle, #444857, #2c303a);
}
.test {
  padding: 30px 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  background: #f9f9f9;
  border-radius: 5px;
}
.content {
  overflow: hidden;
  text-align: center;
  height: 50px;
  position: relative;
  margin: 20px 0;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(#f9f9f9, transparent, transparent, #f9f9f9);
    width: 100%;
    height: 100%;
  }
  .number {
    font-size: 45px;
    font-weight: bold;

    &.new {
      transform: rotate(20deg) translatex(-5px) translateY(0);
    }
  }
  .range {
  }
}

let range = $(".range");
let newNumber = $(".number.new");
let oldNumber = $(".number.old");

range.on("change input", function () {
  var $this = $(this);
  newNumber.html("$" + $this.val());
  TweenLite.to(oldNumber, 0.3, {
    rotation: -20,
    y: -60,
    x: -5,
    onComplete: function () {
      oldNumber.html("$" + $this.val());
    }
  });
  TweenLite.to(newNumber, 0.3, {
    rotation: 0,
    y: -45,
    x: 0,
    onComplete: function () {
      TweenLite.set(oldNumber, { rotation: 0, y: 0, x: 0 });
      TweenLite.set(newNumber, { rotation: 20, y: 45, x: -5 });
    }
  });
});