From 210bec722c2e7570961dde5eb0737bbcbad80b3f Mon Sep 17 00:00:00 2001
From: Christine Cha <ccha@squarespace.com>
Date: Sun, 25 Sep 2016 19:40:38 -0400
Subject: [PATCH] Added more examples.

---
 .npmignore          |  3 ++-
 examples/one.html   | 21 ++++++++++++++---
 examples/three.html | 52 ++++++++++++++++++++++++++++++++++++++++++
 examples/two.html   | 55 +++++++++++++++++++++++++++++++++++++++++++++
 package.json        |  2 +-
 5 files changed, 128 insertions(+), 5 deletions(-)
 create mode 100644 examples/three.html
 create mode 100644 examples/two.html
diff --git a/.npmignore b/.npmignore
index 61cf1ef..dcb8523 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,6 +1,7 @@
 /examples/
 /src/
+/assets/
+webpack.config.js
 index.html
 index.js
 index.css
-webpack.config.js
diff --git a/examples/one.html b/examples/one.html
index cf62232..65929fb 100644
--- a/examples/one.html
+++ b/examples/one.html
@@ -2,11 +2,26 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>Choreographer-JS | Example One</title>
   </head>
+
   <body>
     <style>
+      p {
+        position: fixed;
+        top: 100px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-family: 'Arial', sans-serif;
+        color: white;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+      }
+
       #box {
+        margin: 0 0;
         width: 100%;
         height: 500vh;
         background: black;
@@ -14,10 +29,10 @@
       }
     </style>
 
-
+    <p>Animating based on scroll location.</p>
     <div id="box"></div>
 
-    <script src="/dist/choreographer.min.js"></script>
+    <script src="../dist/choreographer.min.js"></script>
     <script>
       let choreographer = new Choreographer({
         animations: [
diff --git a/examples/three.html b/examples/three.html
new file mode 100644
index 0000000..0e5210e
--- /dev/null
+++ b/examples/three.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Choreographer-JS | Example Three</title>
+  </head>
+
+  <body>
+    <style>
+      p {
+        position: fixed;
+        top: 100px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-family: 'Arial', sans-serif;
+        color: white;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+      }
+
+      #box {
+        margin: 0 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: black;
+        opacity: 0.2;
+
+        transition: background-color 0.4s ease-in-out;
+      }
+    </style>
+
+    <p>Multiple animations based on mouse movement.</p>
+    <div id="box"></div>
+
+    <script src="../dist/choreographer.min.js"></script>
+    <script>
+      let choreographer = new Choreographer({
+        animations: [
+          { range: [-1, window.innerWidth], selector: '#box', type: 'scale', style: 'height', from: 100, to: 50, unit: 'vh' },
+          { range: [-1, window.innerWidth / 2], selector: '#box', type: 'scale', style: 'opacity', from: 0.2, to: 1 },
+          { range: [window.innerWidth / 2, window.innerWidth], selector: '#box', type: 'change', style: 'backgroundColor', to: '#00c9ff' },
+        ]
+      })
+
+      window.addEventListener('mousemove', (e) => {
+        choreographer.runAnimationsAt(e.clientX)
+      })
+    </script>
+  </body>
+</html>
diff --git a/examples/two.html b/examples/two.html
new file mode 100644
index 0000000..83b3e0a
--- /dev/null
+++ b/examples/two.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Choreographer-JS | Example Two</title>
+  </head>
+
+  <body>
+    <style>
+      p {
+        position: fixed;
+        top: 100px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-family: 'Arial', sans-serif;
+        color: white;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+      }
+
+      #box {
+        margin: 0 0;
+        width: 100vw;
+        height: 100vh;
+        background: black;
+        opacity: 0.2;
+      }
+    </style>
+
+    <p>Animating based on mouse movement.</p>
+    <div id="box"></div>
+
+    <script src="../dist/choreographer.min.js"></script>
+    <script>
+      let choreographer = new Choreographer({
+        animations: [
+          {
+            range: [-1, window.innerWidth],
+            selector: '#box',
+            type: 'scale',
+            style: 'opacity',
+            from: 0.2,
+            to: 1
+          }
+        ]
+      })
+
+      window.addEventListener('mousemove', (e) => {
+        choreographer.runAnimationsAt(e.clientX)
+      })
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
index 8c204e1..e0a2f07 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "choreographer-js",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A simple library to take care of complicated animations.",
   "main": "dist/index.js",
   "scripts": {
