Skrollr with smooth Scrolling test

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div
		class="parallax-image-wrapper parallax-image-wrapper-100"
		data-anchor-target="#dragons + .gap"
		data-bottom-top="transform:translate3d(0px, 200%, 0px)"
		data-top-bottom="transform:translate3d(0px, 0%, 0px)">

		<div
			class="parallax-image parallax-image-100"
			style="background-image:url(http://prinzhorn.github.io/skrollr/examples/images/kitteh1.jpg)"
			data-anchor-target="#dragons + .gap"
			data-bottom-top="transform: translate3d(0px, -80%, 0px);"
			data-top-bottom="transform: translate3d(0px, 80%, 0px);"
		></div>
		<!--the +/-80% translation can be adjusted to control the speed difference of the image-->
	</div>

	<div
		class="parallax-image-wrapper parallax-image-wrapper-100"
		data-anchor-target="#bacons + .gap"
		data-bottom-top="transform:translate3d(0px, 200%, 0px)"
		data-top-bottom="transform:translate3d(0px, 0%, 0px)">

		<div
			class="parallax-image parallax-image-100"
			style="background-image:url(http://prinzhorn.github.io/skrollr/examples/images/kitteh2.jpg)"
			data-anchor-target="#bacons + .gap"
			data-bottom-top="transform: translate3d(0px, -80%, 0px);"
			data-top-bottom="transform: translate3d(0px, 80%, 0px);"
		></div>
	</div>

	<div
		class="parallax-image-wrapper parallax-image-wrapper-50"
		data-anchor-target="#kittens + .gap"
		data-bottom-top="transform:translate3d(0px, 300%, 0px)"
		data-top-bottom="transform:translate3d(0px, 0%, 0px)">

		<div
			class="parallax-image parallax-image-50"
			style="background-image:url(http://prinzhorn.github.io/skrollr/examples/images/kitteh3.jpg)"
			data-anchor-target="#kittens + .gap"
			data-bottom-top="transform: translate3d(0px, -60%, 0px);"
			data-top-bottom="transform: translate3d(0px, 60%, 0px);"
		></div>
	</div>

	<div id="skrollr-body">
		<div class="header" id="dragons">
            USING Skrollr with elegant degradation
		</div>
		<div class="gap gap-100"...

CSS

* {
		padding:0;
		margin:0;
	}

	html, body {
		height:100%;
	}

	.skrollr-desktop body {
		height:100% !important;
	}

	body {
		font-family:sans-serif;
	}

	p {
		margin:1em 0;
	}

	.parallax-image-wrapper {
		position:fixed;
		left:0;
		width:100%;
		overflow:hidden;
	}

	.parallax-image-wrapper-50 {
		height:50%;
		top:-50%;
	}

	.parallax-image-wrapper-100 {
		height:100%;
		top:-100%;
	}

	.parallax-image {
		display:none;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}

	.parallax-image-50 {
		height:200%;
		top:-50%;
	}

	.parallax-image-100 {
		height:100%;
		top:0;
	}

	.parallax-image.skrollable-between {
		display:block;
	}

	.no-skrollr .parallax-image-wrapper {
		display:none !important;
	}

	#skrollr-body {
		height:100%;
		overflow:visible;
		position:relative;
	}

	.gap {
		background:transparent center no-repeat;
		background-size:cover;
	}

	.skrollr .gap {
		background:transparent !important;
	}

	.gap-50 {
		height:50%;
	}

	.gap-100 {
		height:100%;
	}

	.header, .content {
		background:#fff;
		padding:1em;

		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	.content-full {
		height:100%;
	}

	#done {
		height:100%;
	}

TypeScript

var latestKnownScrollY = 0,
	ticking = false;

function onScroll() {
	latestKnownScrollY = window.scrollY;
	requestTick();
}

function requestTick() {
	if(!ticking) {
		requestAnimationFrame(update);
	}
	ticking = true;
}

function update() {
	// reset the tick so we can
	// capture the next onScroll
	ticking = false;

	var currentScrollY = latestKnownScrollY;
}

window.addEventListener('scroll', onScroll, false);

skrollr.init({
		smoothScrolling: true,
		mobileDeceleration: 0.004
	});