From a7f453557b4b7a77c7d15a1e6c0f27dd78166a07 Mon Sep 17 00:00:00 2001
From: thednp <thednp@users.noreply.github.com>
Date: Fri, 25 Mar 2016 11:42:05 +0200
Subject: [PATCH] Create timeline.html

---
 timeline.html | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 timeline.html
diff --git a/timeline.html b/timeline.html
new file mode 100644
index 0000000..df684e9
--- /dev/null
+++ b/timeline.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>KUTE.js Timeline</title>
+<style>
+.dv {
+  width: 100px; height: 100px; float: left; 
+  text-align: center; line-height: 100px; 
+  margin: 20px 20px 20px 0;
+  background: #0cf;
+  position: relative;
+}
+</style>
+</head><body>
+
+<div class="dv"></div>
+<div class="dv"></div>
+<div class="dv"></div>
+<div class="dv"></div>
+<div class="dv"></div>
+
+
+<script src='kute.js'></script>
+<script src='kute-timeline.js'></script>
+<script>
+
+    var tl = new KUTE.Timeline();
+        tl.fromTo('.dv', { rotate : 0 }, { rotate : 45 }, { easing : { rotate : 'easingBounceInOut' }, offset : { rotate : 200 } })
+        tl.to('.dv', { left : 200 }, { easing : { left : 'easingElasticInOut'}, offset: 300 });
+        tl.to('.dv', { top : 200 }, { easing : { top : 'easingElasticInOut' }, offset: 300, duration : 1000 });
+        tl.to('.dv', { width : 45 }, { easing : { width : 'easingElasticInOut' }, offset: 200, duration : 1000 });
+        tl.to('.dv', { height : 45 }, { easing : { height : 'easingElasticInOut' }, offset: 200, duration : 1000 });
+
+</script>
+</body>
+</html>
