<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 {
	}
}
View Compiled
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 });
		}
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js