fix #242

Author: drcmda

.size-snapshot.json

@@ -1,60 +1,60 @@
 {
   "dist/addons.umd.js": {
-    "bundled": 22011,
-    "minified": 8383,
-    "gzipped": 3030
+    "bundled": 22111,
+    "minified": 8438,
+    "gzipped": 3046
   },
   "dist/web.umd.js": {
-    "bundled": 92734,
-    "minified": 37454,
-    "gzipped": 12800
+    "bundled": 93003,
+    "minified": 37557,
+    "gzipped": 12836
   },
   "dist/addons.js": {
-    "bundled": 19464,
-    "minified": 8939,
-    "gzipped": 2984,
+    "bundled": 19560,
+    "minified": 8994,
+    "gzipped": 2995,
     "treeshaked": {
       "rollup": {
-        "code": 2537,
+        "code": 2557,
         "import_statements": 305
       },
       "webpack": {
-        "code": 3823
+        "code": 3842
       }
     }
   },
   "dist/web.js": {
-    "bundled": 86459,
-    "minified": 41185,
-    "gzipped": 13037,
+    "bundled": 86714,
+    "minified": 41379,
+    "gzipped": 13077,
     "treeshaked": {
       "rollup": {
-        "code": 35826,
+        "code": 35862,
         "import_statements": 223
       },
       "webpack": {
-        "code": 37264
+        "code": 37306
       }
     }
   },
   "dist/native.js": {
-    "bundled": 72181,
-    "minified": 33084,
-    "gzipped": 10273,
+    "bundled": 72472,
+    "minified": 33308,
+    "gzipped": 10330,
     "treeshaked": {
       "rollup": {
-        "code": 27286,
-        "import_statements": 198
+        "code": 27355,
+        "import_statements": 234
       },
       "webpack": {
-        "code": 28617
+        "code": 28717
       }
     }
   },
   "dist/universal.js": {
-    "bundled": 59640,
-    "minified": 26548,
-    "gzipped": 7608,
+    "bundled": 59866,
+    "minified": 26714,
+    "gzipped": 7642,
     "treeshaked": {
       "rollup": {
         "code": 21453,
@@ -66,16 +66,16 @@
     }
   },
   "dist/konva.js": {
-    "bundled": 70819,
-    "minified": 32505,
-    "gzipped": 10305,
+    "bundled": 71076,
+    "minified": 32701,
+    "gzipped": 10347,
     "treeshaked": {
       "rollup": {
-        "code": 27792,
+        "code": 27830,
         "import_statements": 198
       },
       "webpack": {
-        "code": 29148
+        "code": 29186
       }
     }
   }

documentation/Addons.mdx

@@ -4,3 +4,17 @@ route: /addons
 order: -1
 ---
 
+# Addons
+
+```jsx
+import { {
+  TimingAnimation,
+  OscillatorAnimation,
+  Easing,
+  Fade,
+  Slug,
+  DurationTrail,
+} from 'react-spring/dist/addons'
+```
+
+You'll find varying implementations under [/dist/addons](https://github.com/drcmda/react-spring/tree/master/src/addons). For now there's a time-based animation as well common [easings](https://github.com/drcmda/react-spring/blob/master/src/addons/Easing.js), and IOS'es harmonic oscillator spring. All primitives understand the `impl` property which you can use to switch implementations.

documentation/Gotchas.mdx

@@ -4,8 +4,28 @@ route: /gotchas
 order: 0
 ---
 
+import { Tweet } from 'react-twitter-widgets'
+
 # Gotchas
 
+## Why are duration and easing hidden away as addons?
+
+<p>
+  <div style={{ float: "right", margin: '-10px 0px 30px 30px' }}>
+  <Tweet tweetId='566736015188963328' options={{ conversation: 'none', width: '350' }}/>
+</div>
+<a href="https://www.youtube.com/watch?v=1tavDv5hXpo&feature=youtu.be&t=6m17s">Here's a good explanation</a> and it is worth it watching it until the first demo that starts at 9:40, there you can see how springs adapt without curves and durations.
+
+In short, durations and easings are the number one reason UI animation is hard (and usually looks bad). This is why our focus is on physics first and foremost, where duration mathematically doesn't exist since springs are adaptive, or in other words, they work with energetic load and momentum instead of hardcoded values.
+</p>
+
+<p>
+<img style={{ width: 340, float: 'left', margin: '10px 30px 30px 0px' }} src="https://www.wikihow.com/images/thumb/5/51/Do-Cool-Tricks-With-a-Slinky-Step-5-Version-4.jpg/aid283122-v4-728px-Do-Cool-Tricks-With-a-Slinky-Step-5-Version-4.jpg.webp" />
+Think of it like this, if you cause an animation and abort somewhere near the middle, a spring will fluidly move back according to the energy it spent getting there as if you would actually pull back a physical spring mid-momentum, whereas in a duration-based animation it would stop abruptly and naively move back taking the hard-coded time it would have spent getting to end-state using the same curve.
+
+It can be odd in the beginning thinking of animation not in terms of time, but once you let go things will start to make sense and creating fluid interfaces will be easier than ever.
+</p>
+
 ## Render props
 
 Don't like the way render props wrap your code and create nested structures? By default we support both render and children, so you can create higher-order components like so:

doczrc.js

@@ -33,7 +33,7 @@ export default {
           '-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif',
       },
       h1: {
-        fontSize: '6em',
+        fontSize: '4em',
         fontWeight: 800,
       },
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spring",
-  "version": "5.9.0-beta.2",
+  "version": "5.9.0-beta.3",
   "description": "A set of spring-physics based animation primitives",
   "main": "dist/web.cjs.js",
   "module": "dist/web.js",

src/addons/TimingAnimation.js

@@ -18,6 +18,7 @@ let TimingAnimation = class TimingAnimation extends Animation {
     this._to = config.to
     this._easing = config.easing !== undefined ? config.easing : easeInOut
     this._duration = config.duration !== undefined ? config.duration : 500
+    this._delay = config.delay !== undefined ? config.delay : 0
   }
 
   start(fromValue, onUpdate, onEnd) {