examples/circular_motion.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Creating a circular motion (easing === awesome)</title>

	<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />

	<style type="text/css">
	#thing {
		width:32px;
		height:32px;
		border-radius:16px;
		background:#000;
	}
	</style>
</head>

<body>
	<div id="thing" data-0="left[cos]:10%;top[sin]:10%;" data-10000="left:90%;top:90%;"></div>

	<script type="text/javascript" src="../dist/skrollr.min.js"></script>
	<script type="text/javascript">
	skrollr.init({
		easing: {
			sin: function(p) {
				return (Math.sin(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
			},
			cos: function(p) {
				return (Math.cos(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
			},
		},
		render: function(data) {
			//Loop
			if(data.curTop === data.maxTop) {
				this.setScrollTop(0, true);
			}
		}
	});
	</script>
</body>

</html>