latest

tavo379 · Jan 10, 2017 · 4562985 · 4562985
2 parents 0fe9dcc + 00bcbad
commit 4562985
Show file tree

Hide file tree

Showing 63 changed files with 36,853 additions and 402 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,20 @@
 
 Popmotion adheres to [Semantic Versioning](http://semver.org/).
 
-## [6.1.0] 2017-01-06
-- Full release of 6.x.
+## [6.2.1] 2017-09-01
+
+### Added
+- Updated bezier tween blend algorithm.
+- Exposed bezier resolver as a transformer.
+
+## [6.2.0] 2017-09-01
+
+### Added
+- Bezier tween blending
+
+## [6.1.0] 2017-06-01
+
+- Public release of new API
 
 ## [6.0.0@alpha] 2017-01-01
 

diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 ### The JavaScript motion engine.
 
-#### **Note:** Popmotion 6.0 is currently a RC published under the `alpha` tag. Docs for 5.0 can be found at [popmotion.io](https://popmotion.io)
-
 Create unique animations and interactions with tweens, physics and input tracking.
 
 Popmotion is:

diff --git a/dist/popmotion.global.js b/dist/popmotion.global.js
diff --git a/dist/popmotion.global.min.js b/dist/popmotion.global.min.js
diff --git a/dist/site/api/README/index.html b/dist/site/api/README/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <script src="/path/to/client.js" defer></script>
+        <link href="https://fonts.googleapis.com/css?family=Cousine|Montserrat:400,700" rel="stylesheet">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="canonical" href="/api/README" />
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:site" content="@popmotion"/>
+        <meta name="twitter:domain" content="httsp://popmotion.io"/>
+        <meta name="twitter:creator" content="@popmotion"/>
+
+        <link rel="icon" type="image/png" href="assets/favicon.png" />
+        <link rel="apple-touch-icon-precomposed" href="assets/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <title data-react-helmet="true">undefined | Popmotion</title>
+
+
+      </head>
+      <body>
+        <div data-reactroot="" data-reactid="1" data-react-checksum="956288684"><!-- react-empty: 2 --><h1 id="api" data-reactid="3"><!-- react-text: 4 -->API<!-- /react-text --></h1><ul data-reactid="5"><!-- react-text: 6 --><!-- /react-text --><li data-reactid="7"><!-- react-text: 8 --><!-- /react-text --><del data-reactid="9">{{43}}</del><!-- react-text: 10 --> (Coming in 6.2)<!-- /react-text --></li><!-- react-text: 11 --><!-- /react-text --><li data-reactid="12"><!-- react-text: 13 --><!-- /react-text --><a href="/docs/api/actions/chain.md" target="new" data-reactid="14"><!-- react-text: 15 -->chain<!-- /react-text --></a><!-- react-text: 16 --><!-- /react-text --></li><!-- react-text: 17 --><!-- /react-text --><li data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><a href="/docs/api/actions/composite.md" target="new" data-reactid="20"><!-- react-text: 21 -->composite<!-- /react-text --></a><!-- react-text: 22 --><!-- /react-text --></li><!-- react-text: 23 --><!-- /react-text --><li data-reactid="24"><!-- react-text: 25 --><!-- /react-text --><a href="/docs/api/actions/color-tween.md" target="new" data-reactid="26"><!-- react-text: 27 -->colorTween<!-- /react-text --></a><!-- react-text: 28 --><!-- /react-text --></li><!-- react-text: 29 --><!-- /react-text --><li data-reactid="30"><!-- react-text: 31 --><!-- /react-text --><del data-reactid="32">{{52}}</del><!-- react-text: 33 --> (Coming in 6.2)<!-- /react-text --></li><!-- react-text: 34 --><!-- /react-text --><li data-reactid="35"><!-- react-text: 36 --><!-- /react-text --><a href="/docs/api/actions/delay.md" target="new" data-reactid="37"><!-- react-text: 38 -->delay<!-- /react-text --></a><!-- react-text: 39 --><!-- /react-text --></li><!-- react-text: 40 --><!-- /react-text --><li data-reactid="41"><!-- react-text: 42 --><!-- /react-text --><a href="/docs/api/actions/parallel.md" target="new" data-reactid="43"><!-- react-text: 44 -->parallel<!-- /react-text --></a><!-- react-text: 45 --><!-- /react-text --></li><!-- react-text: 46 --><!-- /react-text --><li data-reactid="47"><!-- react-text: 48 --><!-- /react-text --><a href="/docs/api/actions/physics.md" target="new" data-reactid="49"><!-- react-text: 50 -->physics<!-- /react-text --></a><!-- react-text: 51 --><!-- /react-text --></li><!-- react-text: 52 --><!-- /react-text --><li data-reactid="53"><!-- react-text: 54 --><!-- /react-text --><a href="/docs/api/actions/pointer.md" target="new" data-reactid="55"><!-- react-text: 56 -->pointer<!-- /react-text --></a><!-- react-text: 57 --><!-- /react-text --></li><!-- react-text: 58 --><!-- /react-text --><li data-reactid="59"><!-- react-text: 60 --><!-- /react-text --><a href="/docs/api/actions/tween.md" target="new" data-reactid="61"><!-- react-text: 62 -->tween<!-- /react-text --></a><!-- react-text: 63 --><!-- /react-text --></li><!-- react-text: 64 --><!-- /react-text --><li data-reactid="65"><!-- react-text: 66 --><!-- /react-text --><a href="/docs/api/actions/value.md" target="new" data-reactid="67"><!-- react-text: 68 -->value<!-- /react-text --></a><!-- react-text: 69 --><!-- /react-text --></li><!-- react-text: 70 --><!-- /react-text --></ul><ul data-reactid="71"><!-- react-text: 72 --><!-- /react-text --><li data-reactid="73"><!-- react-text: 74 --><!-- /react-text --><a href="/docs/api/renderers/css.md" target="new" data-reactid="75"><!-- react-text: 76 -->css<!-- /react-text --></a><!-- react-text: 77 --><!-- /react-text --></li><!-- react-text: 78 --><!-- /react-text --><li data-reactid="79"><!-- react-text: 80 --><!-- /react-text --><a href="/docs/api/renderers/svg.md" target="new" data-reactid="81"><!-- react-text: 82 -->svg<!-- /react-text --></a><!-- react-text: 83 --><!-- /react-text --></li><!-- react-text: 84 --><!-- /react-text --><li data-reactid="85"><!-- react-text: 86 --><!-- /react-text --><a href="/docs/api/renderers/svg-path.md" target="new" data-reactid="87"><!-- react-text: 88 -->svgPath<!-- /react-text --></a><!-- react-text: 89 --><!-- /react-text --></li><!-- react-text: 90 --><!-- /react-text --></ul><ul data-reactid="91"><!-- react-text: 92 --><!-- /react-text --><li data-reactid="93"><!-- react-text: 94 --><!-- /react-text --><a href="/docs/api/actions" target="new" data-reactid="95"><!-- react-text: 96 -->Actions<!-- /react-text --></a><!-- react-text: 97 -->undefined<!-- /react-text --></li><!-- react-text: 98 --><!-- /react-text --><li data-reactid="99"><!-- react-text: 100 --><!-- /react-text --><a href="/docs/api/renderers" target="new" data-reactid="101"><!-- react-text: 102 -->Renderers<!-- /react-text --></a><!-- react-text: 103 -->undefined<!-- /react-text --></li><!-- react-text: 104 --><!-- /react-text --><li data-reactid="105"><!-- react-text: 106 --><!-- /react-text --><a href="/docs/api/calc.md" target="new" data-reactid="107"><!-- react-text: 108 -->Calculators<!-- /react-text --></a><!-- react-text: 109 --><!-- /react-text --></li><!-- react-text: 110 --><!-- /react-text --><li data-reactid="111"><!-- react-text: 112 --><!-- /react-text --><a href="/docs/api/easing.md" target="new" data-reactid="113"><!-- react-text: 114 -->Easing<!-- /react-text --></a><!-- react-text: 115 --><!-- /react-text --></li><!-- react-text: 116 --><!-- /react-text --><li data-reactid="117"><!-- react-text: 118 --><!-- /react-text --><a href="/docs/api/render-loop.md" target="new" data-reactid="119"><!-- react-text: 120 -->Render Loop<!-- /react-text --></a><!-- react-text: 121 --><!-- /react-text --></li><!-- react-text: 122 --><!-- /react-text --><li data-reactid="123"><!-- react-text: 124 --><!-- /react-text --><a href="/docs/api/transformers.md" target="new" data-reactid="125"><!-- react-text: 126 -->Transformers<!-- /react-text --></a><!-- react-text: 127 --><!-- /react-text --></li><!-- react-text: 128 --><!-- /react-text --></ul></div>
+      </body>
+    </html>
+
diff --git a/dist/site/api/actions/README/index.html b/dist/site/api/actions/README/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <script src="/path/to/client.js" defer></script>
+        <link href="https://fonts.googleapis.com/css?family=Cousine|Montserrat:400,700" rel="stylesheet">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="canonical" href="/api/actions/README" />
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:site" content="@popmotion"/>
+        <meta name="twitter:domain" content="httsp://popmotion.io"/>
+        <meta name="twitter:creator" content="@popmotion"/>
+
+        <link rel="icon" type="image/png" href="assets/favicon.png" />
+        <link rel="apple-touch-icon-precomposed" href="assets/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <title data-react-helmet="true">Action | Popmotion</title>
+
+
+      </head>
+      <body>
+        <div data-reactroot="" data-reactid="1" data-react-checksum="-530279149"><!-- react-empty: 2 --><h1 id="action" data-reactid="3"><!-- react-text: 4 -->Action<!-- /react-text --></h1><p data-reactid="5"><!-- react-text: 6 --><!-- /react-text --><code data-reactid="7">Action</code><!-- react-text: 8 --> is the base class of Popmotion’s included actions, like <!-- /react-text --><a href="/docs/actions/tween.md" target="new" data-reactid="9"><!-- react-text: 10 --><!-- /react-text --><code data-reactid="11">tween</code><!-- react-text: 12 --><!-- /react-text --></a><!-- react-text: 13 --> and <!-- /react-text --><a href="/docs/actions/physics.md" target="new" data-reactid="14"><!-- react-text: 15 --><!-- /react-text --><code data-reactid="16">physics</code><!-- react-text: 17 --><!-- /react-text --></a><!-- react-text: 18 -->.<!-- /react-text --></p><p data-reactid="19"><!-- react-text: 20 -->New actions can be created by extending <!-- /react-text --><code data-reactid="21">Action</code><!-- react-text: 22 --> and providing an <!-- /react-text --><code data-reactid="23">update</code><!-- react-text: 24 --> function that takes a value and returns a new one. <!-- /react-text --><code data-reactid="25">onStart</code><!-- react-text: 26 -->, <!-- /react-text --><code data-reactid="27">onStop</code><!-- react-text: 28 --> and <!-- /react-text --><code data-reactid="29">onComplete</code><!-- react-text: 30 --> methods can also be provided, both as <!-- /react-text --><code data-reactid="31">class</code><!-- react-text: 32 --> methods and <!-- /react-text --><code data-reactid="33">Action</code><!-- react-text: 34 --> properties.<!-- /react-text --></p><h2 id="example" data-reactid="35"><!-- react-text: 36 -->Example<!-- /react-text --></h2><pre data-reactid="37"><code class="language-javascript" data-reactid="38">import { Action } from &#x27;popmotion&#x27;;
+
+class CustomAction extends Action {
+  update(current) {
+    const { increment } = this.props;
+    return current + increment;
+  }
+}
+
+const customAction = new CustomAction({
+  increment: 10,
+  onUpdate: (v) =&gt; console.log(v)
+});
+
+customAction.start();</code></pre><h2 id="methods" data-reactid="39"><!-- react-text: 40 -->Methods<!-- /react-text --></h2><ul data-reactid="41"><!-- react-text: 42 --><!-- /react-text --><li data-reactid="43"><!-- react-text: 44 --><!-- /react-text --><code data-reactid="45">start</code><!-- react-text: 46 -->: Start an action. Fires any set <!-- /react-text --><code data-reactid="47">onStart</code><!-- react-text: 48 --> callbacks.<!-- /react-text --></li><!-- react-text: 49 --><!-- /react-text --><li data-reactid="50"><!-- react-text: 51 --><!-- /react-text --><code data-reactid="52">stop</code><!-- react-text: 53 -->: Stop an action. Fires <!-- /react-text --><code data-reactid="54">onStop</code><!-- react-text: 55 --> callback.<!-- /react-text --></li><!-- react-text: 56 --><!-- /react-text --><li data-reactid="57"><!-- react-text: 58 --><!-- /react-text --><code data-reactid="59">get</code><!-- react-text: 60 -->: Get the current value.<!-- /react-text --></li><!-- react-text: 61 --><!-- /react-text --><li data-reactid="62"><!-- react-text: 63 --><!-- /react-text --><code data-reactid="64">getVelocity</code><!-- react-text: 65 -->: Get the action’s current velocity, in units per second.<!-- /react-text --></li><!-- react-text: 66 --><!-- /react-text --><li data-reactid="67"><!-- react-text: 68 --><!-- /react-text --><code data-reactid="69">complete</code><!-- react-text: 70 -->: Stop an action and mark as complete. Fires <!-- /react-text --><code data-reactid="71">onStop</code><!-- react-text: 72 --> and <!-- /react-text --><code data-reactid="73">onComplete</code><!-- react-text: 74 --> callbacks.<!-- /react-text --></li><!-- react-text: 75 --><!-- /react-text --><li data-reactid="76"><!-- react-text: 77 --><!-- /react-text --><code data-reactid="78">setProps(&lt;Object&gt;)</code><!-- react-text: 79 -->: Updates <!-- /react-text --><code data-reactid="80">props</code><!-- react-text: 81 -->.<!-- /react-text --></li><!-- react-text: 82 --><!-- /react-text --><li data-reactid="83"><!-- react-text: 84 --><!-- /react-text --><code data-reactid="85">getProp(&lt;String&gt;)</code><!-- react-text: 86 -->: Returns the named property.<!-- /react-text --></li><!-- react-text: 87 --><!-- /react-text --></ul><h2 id="props" data-reactid="88"><!-- react-text: 89 -->Props<!-- /react-text --></h2><ul data-reactid="90"><!-- react-text: 91 --><!-- /react-text --><li data-reactid="92"><!-- react-text: 93 --><!-- /react-text --><code data-reactid="94">onStart &lt;Function&gt;</code><!-- react-text: 95 -->: Fires when an action starts.<!-- /react-text --></li><!-- react-text: 96 --><!-- /react-text --><li data-reactid="97"><!-- react-text: 98 --><!-- /react-text --><code data-reactid="99">onStop &lt;Function&gt;</code><!-- react-text: 100 -->: Fires when an action is stopped.<!-- /react-text --></li><!-- react-text: 101 --><!-- /react-text --><li data-reactid="102"><!-- react-text: 103 --><!-- /react-text --><code data-reactid="104">onComplete &lt;Function&gt;</code><!-- react-text: 105 -->: Fires when an action is completed.<!-- /react-text --></li><!-- react-text: 106 --><!-- /react-text --></ul></div>
+      </body>
+    </html>
+
diff --git a/dist/site/api/actions/blend-tweens/index.html b/dist/site/api/actions/blend-tweens/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <script src="/path/to/client.js" defer></script>
+        <link href="https://fonts.googleapis.com/css?family=Cousine|Montserrat:400,700" rel="stylesheet">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="canonical" href="/api/actions/blend-tweens" />
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:site" content="@popmotion"/>
+        <meta name="twitter:domain" content="httsp://popmotion.io"/>
+        <meta name="twitter:creator" content="@popmotion"/>
+
+        <link rel="icon" type="image/png" href="assets/favicon.png" />
+        <link rel="apple-touch-icon-precomposed" href="assets/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <title data-react-helmet="true">Blend Tweens | Popmotion</title>
+
+
+      </head>
+      <body>
+        <div data-reactroot="" data-reactid="1" data-react-checksum="-2056279933"><!-- react-empty: 2 --><h1 id="blend-tweens" data-reactid="3"><!-- react-text: 4 -->Blend Tweens<!-- /react-text --></h1><h2 id="example" data-reactid="5"><!-- react-text: 6 -->Example<!-- /react-text --></h2><pre data-reactid="7"><code class="language-javascript" data-reactid="8">import { tween, blendTweens } from &#x27;popmotion&#x27;;
+
+const logValue = (v) =&gt; console.log(v);
+
+const foo = tween({
+  from: 0,
+  to: 1,
+  onUpdate: logValue
+});
+
+const bar = tween({
+  from: 1,
+  to: 0
+});
+
+foo.start();
+
+setTimeout(() =&gt; {
+  // Unset the first tween&#x27;s `onUpdate`
+  foo.setProps({
+    onUpdate: undefined
+  });
+  blendTweens({
+    from: foo,
+    to: bar,
+    onUpdate: logValue
+  }).start();
+}, 150);</code></pre><h2 id="props" data-reactid="9"><!-- react-text: 10 -->Props<!-- /react-text --></h2><ul data-reactid="11"><!-- react-text: 12 --><!-- /react-text --><li data-reactid="13"><!-- react-text: 14 --><!-- /react-text --><code data-reactid="15">from &lt;Tween&gt;</code><!-- react-text: 16 -->: The tween to blend from.<!-- /react-text --></li><!-- react-text: 17 --><!-- /react-text --><li data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><code data-reactid="20">to &lt;Tween&gt;</code><!-- react-text: 21 -->: The tween to blend to.<!-- /react-text --></li><!-- react-text: 22 --><!-- /react-text --></ul></div>
+      </body>
+    </html>
+
diff --git a/dist/site/api/actions/chain/index.html b/dist/site/api/actions/chain/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <script src="/path/to/client.js" defer></script>
+        <link href="https://fonts.googleapis.com/css?family=Cousine|Montserrat:400,700" rel="stylesheet">
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <link rel="canonical" href="/api/actions/chain" />
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:site" content="@popmotion"/>
+        <meta name="twitter:domain" content="httsp://popmotion.io"/>
+        <meta name="twitter:creator" content="@popmotion"/>
+
+        <link rel="icon" type="image/png" href="assets/favicon.png" />
+        <link rel="apple-touch-icon-precomposed" href="assets/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <title data-react-helmet="true">Chain | Popmotion</title>
+
+
+      </head>
+      <body>
+        <div data-reactroot="" data-reactid="1" data-react-checksum="-477168859"><!-- react-empty: 2 --><h1 id="chain" data-reactid="3"><!-- react-text: 4 -->Chain<!-- /react-text --></h1><p data-reactid="5"><!-- react-text: 6 -->Chain a linear sequence of actions. The next action in the sequence is started when the previous action is completed.<!-- /react-text --></p><p data-reactid="7"><!-- react-text: 8 --><!-- /react-text --><code data-reactid="9">chain(actions &lt;Array&gt;)</code><!-- react-text: 10 --><!-- /react-text --></p><h2 id="example" data-reactid="11"><!-- react-text: 12 -->Example<!-- /react-text --></h2><pre data-reactid="13"><code class="language-javascript" data-reactid="14">import { chain, tween, stagger } from &#x27;popmotion&#x27;;
+
+chain([
+  tween(0, 1),
+  tween(1, 1000)
+]).start();</code></pre></div>
+      </body>
+    </html>
+