diff --git a/examples/interactive-docs/index.html b/examples/interactive-docs/index.html
index abb928c..c64fb2a 100644
--- a/examples/interactive-docs/index.html
+++ b/examples/interactive-docs/index.html
@@ -4,7 +4,11 @@
     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
     <title>Animated</title>
     <script>
-      function invariant(cond) { if (!cond) { throw new Error(arguments); }}
+      function invariant(cond) {
+        if (!cond) {
+          throw new Error(arguments);
+        }
+      }
       var module = {};
     </script>
     <script>
@@ -17,7 +21,9 @@
         var hasOwnProperty = Object.prototype.hasOwnProperty;
         for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
           var nextSource = arguments[nextIndex];
-          if (nextSource == null) { continue; }
+          if (nextSource == null) {
+            continue;
+          }
           var from = Object(nextSource);
           for (var key in from) {
             if (hasOwnProperty.call(from, key)) {
@@ -124,125 +130,141 @@
       }
     </style>
     <script>
-    var TOTAL_EXAMPLES = 0;
-    function evalLastScript() {
-      var scripts = document.querySelectorAll('script[type="text/babel"]');
-      eval(Babel.transform(
-        scripts[scripts.length - 1].innerText,
-        { presets: ['es2015', 'react'] }
-      ).code);
-    }
-
-    function example() {
-      var scripts = document.getElementsByTagName('script');
-      var last = scripts[scripts.length - 2];
-      last.className = 'Example' + (++TOTAL_EXAMPLES);
-      evalLastScript();
-    }
+      var TOTAL_EXAMPLES = 0;
+      function evalLastScript() {
+        var scripts = document.querySelectorAll('script[type="text/babel"]');
+        eval(
+          Babel.transform(scripts[scripts.length - 1].innerText, {
+            presets: ['es2015', 'react'],
+          }).code
+        );
+      }
+
+      function example() {
+        var scripts = document.getElementsByTagName('script');
+        var last = scripts[scripts.length - 2];
+        last.className = 'Example' + ++TOTAL_EXAMPLES;
+        evalLastScript();
+      }
     </script>
     <script type="text/babel">
-    window.HorizontalPan = function(anim, config) {
-      config = config || {};
-      return {
-        onMouseDown: function(event) {
-          anim.stopAnimation(startValue => {
-            config.onStart && config.onStart();
-            var startPosition = event.clientX;
-            var lastTime = Date.now();
-            var lastPosition = event.clientX;
-            var velocity = 0;
-
-            function updateVelocity(event) {
-              var now = Date.now();
-              if (event.clientX === lastPosition || now === lastTime) {
-                return;
+      window.HorizontalPan = function(anim, config) {
+        config = config || {};
+        return {
+          onMouseDown: function(event) {
+            anim.stopAnimation(startValue => {
+              config.onStart && config.onStart();
+              var startPosition = event.clientX;
+              var lastTime = Date.now();
+              var lastPosition = event.clientX;
+              var velocity = 0;
+
+              function updateVelocity(event) {
+                var now = Date.now();
+                if (event.clientX === lastPosition || now === lastTime) {
+                  return;
+                }
+                velocity = (event.clientX - lastPosition) / (now - lastTime);
+                lastTime = now;
+                lastPosition = event.clientX;
               }
-              velocity = (event.clientX - lastPosition) / (now - lastTime);
-              lastTime = now;
-              lastPosition = event.clientX;
-            }
 
-            var moveListener, upListener;
-            window.addEventListener('mousemove', moveListener = (event) => {
-              var value = startValue + (event.clientX - startPosition);
-              anim.setValue(value);
-              updateVelocity(event);
-            });
-            window.addEventListener('mouseup', upListener = (event) => {
-              updateVelocity(event);
-              window.removeEventListener('mousemove', moveListener);
-              window.removeEventListener('mouseup', upListener);
-              config.onEnd && config.onEnd({velocity});
+              var moveListener, upListener;
+              window.addEventListener(
+                'mousemove',
+                (moveListener = event => {
+                  var value = startValue + (event.clientX - startPosition);
+                  anim.setValue(value);
+                  updateVelocity(event);
+                })
+              );
+              window.addEventListener(
+                'mouseup',
+                (upListener = event => {
+                  updateVelocity(event);
+                  window.removeEventListener('mousemove', moveListener);
+                  window.removeEventListener('mouseup', upListener);
+                  config.onEnd && config.onEnd({ velocity });
+                })
+              );
             });
-          });
-        }
-      }
-    };
-
-    var EXAMPLE_COUNT = 0;
-    window.examplify = function(Component) {
-      if (EXAMPLE_COUNT) {
-        var previousScript = document.getElementsByClassName('Example' + EXAMPLE_COUNT)[0].innerText;
-      } else {
-        var previousScript = `
-        examplify(React.createClass({
-          getInitialState: function() {
-            return {
-              anim: new Animated.Value(0), // ignore
-            };
           },
-          render: function() {
-            return (
-              <Animated.div // ignore
-                style={{left: this.state.anim}} // ignore
-                className="circle"
-              />
+        };
+      };
+
+      var EXAMPLE_COUNT = 0;
+      window.examplify = function(Component) {
+        if (EXAMPLE_COUNT) {
+          var previousScript = document.getElementsByClassName(
+            'Example' + EXAMPLE_COUNT
+          )[0].innerText;
+        } else {
+          var previousScript = `
+            examplify(
+              React.createClass({
+                getInitialState: function() {
+                  return {
+                    anim: new Animated.Value(0), // ignore
+                  };
+                },
+                render: function() {
+                  return (
+                    <Animated.div // ignore
+                      style={{ left: this.state.anim }} // ignore
+                      className="circle"
+                    />
+                  );
+                },
+              })
             );
-          },
-        }));
-        `;
-      }
+          `;
+        }
 
-      var script = document.getElementsByClassName('Example' + ++EXAMPLE_COUNT)[0];
-
-      var previousLines = {};
-      previousScript.split(/\n/g).forEach(line => { previousLines[line.trim()] = 1; });
-      var code = document.createElement('div');
-      script.parentNode.insertBefore(code, script);
-
-      var Example = React.createClass({
-        render() {
-          return (
-            <div className="code">
-              <div className="example">
-                <button
-                  className="reset"
-                  onClick={() => this.forceUpdate()}>
-                  Reset
-                </button>
-                <Component key={Math.random()} />
+        var script = document.getElementsByClassName('Example' + ++EXAMPLE_COUNT)[0];
+
+        var previousLines = {};
+        previousScript.split(/\n/g).forEach(line => {
+          previousLines[line.trim()] = 1;
+        });
+        var code = document.createElement('div');
+        script.parentNode.insertBefore(code, script);
+
+        var Example = React.createClass({
+          render() {
+            const exampleLines = script.innerText
+              .trim()
+              .split(/\n/)
+              .slice(1, -1);
+            const matchIndentation = exampleLines[0].match(/(^\s*)/);
+            const indentation = matchIndentation[0];
+            return (
+              <div className="code">
+                <div className="example">
+                  <button className="reset" onClick={() => this.forceUpdate()}>
+                    Reset
+                  </button>
+                  <Component key={Math.random()} />
+                </div>
+                <hr />
+                {exampleLines.map((line, index, arr) => {
+                  const isLastLine = index === arr.length - 1;
+                  return (
+                    <pre
+                      key={index}
+                      className={!previousLines[line.trim()] ? 'highlight' : null}
+                    >
+                      {line.replace(indentation, '')}
+                      {isLastLine ? ';' : ''}
+                    </pre>
+                  );
+                })}
               </div>
-              <hr />
-              <pre>{'React.createClass({'}</pre>
-              {script.innerText
-                .trim()
-                .split(/\n/g)
-                .slice(1, -1)
-                .map(line =>
-                  <pre
-                    className={!previousLines[line.trim()] && 'highlight'}>
-                    {line}
-                  </pre>
-                )
-              }
-              <pre>{'});'}</pre>
-            </div>
-          );
-        }
-      })
+            );
+          },
+        });
 
-      ReactDOM.render(<Example />, code);
-    }
+        ReactDOM.render(<Example />, code);
+      };
     </script><script>evalLastScript();</script>
   </head>
 
@@ -257,21 +279,20 @@ <h2>Animated.Value</h2>
   <p>The basic building block of this library is <code>Animated.Value</code>. This is a variable that's going to drive the animation. You use it like a normal value in <code>style</code> attribute. Only animated components such as <code>Animated.div</code> will understand it.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(100),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{left: this.state.anim}}
-        className="circle"
-      />
-    );
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(100),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div style={{ left: this.state.anim }} className="circle" />
+      );
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>setValue</h2>
@@ -281,26 +302,29 @@ <h2>setValue</h2>
 <p>The <code>Animated.div</code> component when rendered tracks which animated values it received. This way, whenever that value changes, we don't need to re-render the entire component, we can directly update the specific style attribute that changed.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{left: this.state.anim}}
-        className="circle"
-        onClick={this.handleClick}>
-        Click
-      </Animated.div>
-    );
-  },
-  handleClick: function() {
-    this.state.anim.setValue(400);
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{ left: this.state.anim }}
+          className="circle"
+          onClick={this.handleClick}
+        >
+          Click
+        </Animated.div>
+      );
+    },
+    handleClick: function() {
+      this.state.anim.setValue(400);
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>Animated.timing</h2>
@@ -310,26 +334,29 @@ <h2>Animated.timing</h2>
 <p>On every frame (via <code>requestAnimationFrame</code>), the <code>timing</code> animation is going to figure out the new value based on the current time, update the animated value which in turn is going to update the corresponding DOM node.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{left: this.state.anim}}
-        className="circle"
-        onClick={this.handleClick}>
-        Click
-      </Animated.div>
-    );
-  },
-  handleClick: function() {
-    Animated.timing(this.state.anim, {toValue: 400}).start();
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{ left: this.state.anim }}
+          className="circle"
+          onClick={this.handleClick}
+        >
+          Click
+        </Animated.div>
+      );
+    },
+    handleClick: function() {
+      Animated.timing(this.state.anim, { toValue: 400 }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>Interrupt Animations</h2>
@@ -339,30 +366,33 @@ <h2>Interrupt Animations</h2>
 <p>There are multiple challenges to implement this correctly. You need to stop the current animation, grab the current value and restart an animation from there. As this is pretty tedious to do manually, <code>Animated</code> will do that automatically for you.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(1),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{transform: [{scale: this.state.anim}]}}
-        className="circle"
-        onMouseDown={this.handleMouseDown}
-        onMouseUp={this.handleMouseUp}>
-        Press
-      </Animated.div>
-    );
-  },
-  handleMouseDown: function() {
-    Animated.timing(this.state.anim, { toValue: 0.8 }).start();
-  },
-  handleMouseUp: function() {
-    Animated.timing(this.state.anim, { toValue: 1 }).start();
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(1),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{ transform: [{ scale: this.state.anim }] }}
+          className="circle"
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+        >
+          Press
+        </Animated.div>
+      );
+    },
+    handleMouseDown: function() {
+      Animated.timing(this.state.anim, { toValue: 0.8 }).start();
+    },
+    handleMouseUp: function() {
+      Animated.timing(this.state.anim, { toValue: 1 }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>Animated.spring</h2>
@@ -374,30 +404,33 @@ <h2>Animated.spring</h2>
 <p>It turns out that this model is useful in a very wide range of animations. I highly recommend you to always start with a <code>spring</code> animation instead of a <code>timing</code> animation. It will make your interface feels much better.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(1),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{transform: [{scale: this.state.anim}]}}
-        className="circle"
-        onMouseDown={this.handleMouseDown}
-        onMouseUp={this.handleMouseUp}>
-        Press
-      </Animated.div>
-    );
-  },
-  handleMouseDown: function() {
-    Animated.spring(this.state.anim, { toValue: 0.8 }).start();
-  },
-  handleMouseUp: function() {
-    Animated.spring(this.state.anim, { toValue: 1 }).start();
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(1),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{ transform: [{ scale: this.state.anim }] }}
+          className="circle"
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+        >
+          Press
+        </Animated.div>
+      );
+    },
+    handleMouseDown: function() {
+      Animated.spring(this.state.anim, { toValue: 0.8 }).start();
+    },
+    handleMouseUp: function() {
+      Animated.spring(this.state.anim, { toValue: 1 }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>interpolate</h2>
@@ -409,39 +442,42 @@ <h2>interpolate</h2>
 <p>In the following example, we're going to model the animation with a variable where 1 means fully visible and 0 means fully hidden. We can pass it directly to the scale attribute as the ranges match. But for the rotation, we need to convert [0 ; 1] range to [260deg ; 0deg]. This is where <code>interpolate()</code> comes handy.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(1),
-    };
-  },
-  componentWillMount: function() {
-    this.interpolate = this.state.anim.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['260deg', '0deg']
-    });
-
-    this.interpolate.addListener(v => console.log(v));
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{
-          transform: [
-            {rotate: this.interpolate},
-            {scale: this.state.anim},
-          ]
-        }}
-        className="circle"
-        onClick={this.handleClick}>
-        Click
-      </Animated.div>
-    );
-  },
-  handleClick: function() {
-    Animated.spring(this.state.anim, {toValue: 0}).start();
-  }
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(1),
+      };
+    },
+    componentWillMount: function() {
+      this.interpolate = this.state.anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['260deg', '0deg'],
+      });
+
+      this.interpolate.addListener(v => console.log(v));
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{
+            transform: [
+              { rotate: this.interpolate },
+              { scale: this.state.anim },
+            ],
+          }}
+          className="circle"
+          onClick={this.handleClick}
+        >
+          Click
+        </Animated.div>
+      );
+    },
+    handleClick: function() {
+      Animated.spring(this.state.anim, { toValue: 0 }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>stopAnimation</h2>
@@ -453,40 +489,44 @@ <h2>stopAnimation</h2>
 <p>There's however one exception: when you want to stop the current animation. You need to know where it stopped in order to continue from there. We cannot know the value synchronously so we give it via a callback in <code>stopAnimation</code>. It will not suffer from beign out of sync since the animation is no longer running.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0)
-    };
-  },
-  render: function() {
-    return (
-      <div>
-        <button onClick={() => this.handleClick(-1)}>&lt;</button>
-        <Animated.div
-          style={{
-            transform: [
-              {rotate: this.state.anim.interpolate({
-                inputRange: [0, 4],
-                outputRange: ['0deg', '360deg']
-              })},
-            ],
-            position: 'relative'
-          }}
-          className="circle"
-        />
-        <button onClick={() => this.handleClick(+1)}>&gt;</button>
-      </div>
-    );
-  },
-  handleClick: function(delta) {
-    this.state.anim.stopAnimation(value => {
-      Animated.spring(this.state.anim, {
-        toValue: Math.round(value) + delta
-      }).start();
-    });
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    render: function() {
+      return (
+        <div>
+          <button onClick={() => this.handleClick(-1)}>&lt;</button>
+          <Animated.div
+            style={{
+              transform: [
+                {
+                  rotate: this.state.anim.interpolate({
+                    inputRange: [0, 4],
+                    outputRange: ['0deg', '360deg'],
+                  }),
+                },
+              ],
+              position: 'relative',
+            }}
+            className="circle"
+          />
+          <button onClick={() => this.handleClick(+1)}>&gt;</button>
+        </div>
+      );
+    },
+    handleClick: function(delta) {
+      this.state.anim.stopAnimation(value => {
+        Animated.spring(this.state.anim, {
+          toValue: Math.round(value) + delta,
+        }).start();
+      });
+    },
+  })
+);
 </script><script>example();</script>
 
 
@@ -503,23 +543,26 @@ <h2>HorizontalPan</h2>
 <p>We introduce a little helper called <code>HorizontalPan</code> which handles all this annoying code for us. It takes an <code>Animated.Value</code> as first argument and returns the event handlers required for it to work. We just have to bind this value to the <code>left</code> attribute and we're good to go.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{left: this.state.anim}}
-        className="circle"
-        {...HorizontalPan(this.state.anim)}>
-        Drag
-      </Animated.div>
-    );
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{ left: this.state.anim }}
+          className="circle"
+          {...HorizontalPan(this.state.anim)}
+        >
+          Drag
+        </Animated.div>
+      );
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>Animated.decay</h2>
@@ -529,28 +572,31 @@ <h2>Animated.decay</h2>
 <p>In order to implement this effect, we are using a second real-world simulation: an object moving on an icy surface. All it needs is two values: the current velocity and a deceleration coefficient. It is implemented by <code>Animated.decay</code>.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0),
-    };
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{left: this.state.anim}}
-        className="circle"
-        {...HorizontalPan(this.state.anim, {
-          onEnd: this.handleEnd
-        })}>
-        Throw
-      </Animated.div>
-    );
-  },
-  handleEnd: function({velocity}) {
-    Animated.decay(this.state.anim, {velocity}).start();
-  }
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{ left: this.state.anim }}
+          className="circle"
+          {...HorizontalPan(this.state.anim, {
+            onEnd: this.handleEnd,
+          })}
+        >
+          Throw
+        </Animated.div>
+      );
+    },
+    handleEnd: function({ velocity }) {
+      Animated.decay(this.state.anim, { velocity }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>Animation Chaining</h2>
@@ -558,37 +604,41 @@ <h2>Animation Chaining</h2>
 <p>The target for an animation is usually a number but sometimes it is convenient to use another value as a target. This way, the first value will track the second. Using a spring animation, we can get a nice trailing effect.</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0));
-    Animated.spring(anims[0], {toValue: anims[1]}).start();
-    Animated.spring(anims[1], {toValue: anims[2]}).start();
-    Animated.spring(anims[2], {toValue: anims[3]}).start();
-    Animated.spring(anims[3], {toValue: anims[4]}).start();
-    return {
-      anims: anims,
-    };
-  },
-  render: function() {
-    return (
-      <div>
-        {this.state.anims.map((anim, i) =>
-          <Animated.div
-            style={{left: anim}}
-            className="circle"
-            {...(i === 4 && HorizontalPan(anim, {
-              onEnd: this.handleEnd
-            }))}>
-            {i === 4 && 'Drag'}
-          </Animated.div>
-        )}
-      </div>
-    );
-  },
-  handleEnd: function({velocity}) {
-    Animated.decay(this.state.anims[4], {velocity}).start();
-  }
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0));
+      Animated.spring(anims[0], { toValue: anims[1] }).start();
+      Animated.spring(anims[1], { toValue: anims[2] }).start();
+      Animated.spring(anims[2], { toValue: anims[3] }).start();
+      Animated.spring(anims[3], { toValue: anims[4] }).start();
+      return {
+        anims: anims,
+      };
+    },
+    render: function() {
+      return (
+        <div>
+          {this.state.anims.map((anim, i) => (
+            <Animated.div
+              style={{ left: anim }}
+              className="circle"
+              {...i === 4 &&
+                HorizontalPan(anim, {
+                  onEnd: this.handleEnd,
+                })}
+            >
+              {i === 4 && 'Drag'}
+            </Animated.div>
+          ))}
+        </div>
+      );
+    },
+    handleEnd: function({ velocity }) {
+      Animated.decay(this.state.anims[4], { velocity }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <h2>addListener</h2>
@@ -596,61 +646,66 @@ <h2>addListener</h2>
 <p>As I said earlier, if you track a spring</p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(i * 100));
-    anims[0].addListener(this.handleChange);
-    return {
-      selected: null,
-      anims: anims,
-    };
-  },
-  render: function() {
-    return (
-      <div>
-        {this.state.anims.map((anim, i) =>
-          <Animated.div
-            style={{
-              left: anim,
-              opacity: i === 0 || i === this.state.selected ? 1 : 0.5
-            }}
-            className="circle"
-            {...(i === 0 && HorizontalPan(anim, { onEnd: this.handleEnd }))}>
-            {i === 0 && 'Drag'}
-            {i === this.state.selected && 'Selected!'}
-          </Animated.div>
-        )}
-      </div>
-    );
-  },
-  handleChange: function({value}) {
-    var selected = null;
-    this.state.anims.forEach((_, i) => {
-      if (i !== 0 && i * 100 - 50 < value && value <= i * 100 + 50) {
-        selected = i;
-      }
-    });
-    if (selected !== this.state.selected) {
-      this.select(selected)
-    }
-  },
-  select(selected) {
-    this.setState({selected}, () => {
-      this.state.anims.forEach((anim, i) => {
-        if (i === 0) { return; }
-        if (selected === i) {
-          Animated.spring(anim, {toValue: this.state.anims[0]}).start();
-        } else {
-          Animated.spring(anim, {toValue: i * 100}).start();
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(i * 100));
+      anims[0].addListener(this.handleChange);
+      return {
+        selected: null,
+        anims: anims,
+      };
+    },
+    render: function() {
+      return (
+        <div>
+          {this.state.anims.map((anim, i) => (
+            <Animated.div
+              style={{
+                left: anim,
+                opacity: i === 0 || i === this.state.selected ? 1 : 0.5,
+              }}
+              className="circle"
+              {...i === 0 && HorizontalPan(anim, { onEnd: this.handleEnd })}
+            >
+              {i === 0 && 'Drag'}
+              {i === this.state.selected && 'Selected!'}
+            </Animated.div>
+          ))}
+        </div>
+      );
+    },
+    handleChange: function({ value }) {
+      var selected = null;
+      this.state.anims.forEach((_, i) => {
+        if (i !== 0 && i * 100 - 50 < value && value <= i * 100 + 50) {
+          selected = i;
         }
       });
-    });
-  },
-  handleEnd() {
-    this.select(null);
-    Animated.spring(this.state.anims[0], {toValue: 0}).start();
-  }
-}));
+      if (selected !== this.state.selected) {
+        this.select(selected);
+      }
+    },
+    select(selected) {
+      this.setState({ selected }, () => {
+        this.state.anims.forEach((anim, i) => {
+          if (i === 0) {
+            return;
+          }
+          if (selected === i) {
+            Animated.spring(anim, { toValue: this.state.anims[0] }).start();
+          } else {
+            Animated.spring(anim, { toValue: i * 100 }).start();
+          }
+        });
+      });
+    },
+    handleEnd() {
+      this.select(null);
+      Animated.spring(this.state.anims[0], { toValue: 0 }).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 
@@ -659,175 +714,199 @@ <h2>Animated.sequence</h2>
 <p>It is very common to animate </p>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
-    };
-  },
-  render: function() {
-    return (
-      <div>
-        {this.state.anims.map((anim, i) =>
-          <Animated.div
-            style={{opacity: anim, position: 'relative'}}
-            className="circle"
-            onClick={i === 0 && this.handleClick}>
-            {i === 0 && 'Click'}
-          </Animated.div>
-        )}
-      </div>
-    );
-  },
-  handleClick: function() {
-    this.state.anims.forEach(anim => { anim.setValue(0.2); });
-    Animated.sequence(
-      this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
-    ).start();
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
+      };
+    },
+    render: function() {
+      return (
+        <div>
+          {this.state.anims.map((anim, i) => (
+            <Animated.div
+              style={{ opacity: anim, position: 'relative' }}
+              className="circle"
+              onClick={i === 0 && this.handleClick}
+            >
+              {i === 0 && 'Click'}
+            </Animated.div>
+          ))}
+        </div>
+      );
+    },
+    handleClick: function() {
+      this.state.anims.forEach(anim => {
+        anim.setValue(0.2);
+      });
+      Animated.sequence(
+        this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
+      ).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
-    };
-  },
-  render: function() {
-    return (
-      <div>
-        {this.state.anims.map((anim, i) =>
-          <Animated.div
-            style={{opacity: anim, position: 'relative'}}
-            className="circle"
-            onClick={i === 0 && this.handleClick}>
-            {i === 0 && 'Click'}
-          </Animated.div>
-        )}
-      </div>
-    );
-  },
-  handleClick: function() {
-    this.state.anims.forEach(anim => { anim.setValue(0.2); });
-    Animated.stagger(
-      100,
-      this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
-    ).start();
-  },
-}));
-</script><script>example();</script>
-
-<script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
-    };
-  },
-  render: function() {
-    return (
-      <div>
-        {this.state.anims.map((anim, i) =>
-          <Animated.div
-            style={{opacity: anim, position: 'relative'}}
-            className="circle"
-            onClick={i === 0 && this.handleClick}>
-            {i === 0 && 'Click'}
-          </Animated.div>
-        )}
-      </div>
-    );
-  },
-  handleClick: function() {
-    this.state.anims.forEach(anim => { anim.setValue(0.2); });
-    Animated.sequence([
-      Animated.parallel(
-        this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
-      ),
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
+      };
+    },
+    render: function() {
+      return (
+        <div>
+          {this.state.anims.map((anim, i) => (
+            <Animated.div
+              style={{ opacity: anim, position: 'relative' }}
+              className="circle"
+              onClick={i === 0 && this.handleClick}
+            >
+              {i === 0 && 'Click'}
+            </Animated.div>
+          ))}
+        </div>
+      );
+    },
+    handleClick: function() {
+      this.state.anims.forEach(anim => {
+        anim.setValue(0.2);
+      });
       Animated.stagger(
         100,
-        this.state.anims.map(anim => Animated.spring(anim, { toValue: 0.2 }))
-      ),
-    ]).start();
-  },
-}));
+        this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
+      ).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0),
-    };
-  },
-  handleClick: function() {
-    var rec = () => {
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
+      };
+    },
+    render: function() {
+      return (
+        <div>
+          {this.state.anims.map((anim, i) => (
+            <Animated.div
+              style={{ opacity: anim, position: 'relative' }}
+              className="circle"
+              onClick={i === 0 && this.handleClick}
+            >
+              {i === 0 && 'Click'}
+            </Animated.div>
+          ))}
+        </div>
+      );
+    },
+    handleClick: function() {
+      this.state.anims.forEach(anim => {
+        anim.setValue(0.2);
+      });
       Animated.sequence([
-        Animated.timing(this.state.anim, {toValue: -1, duration: 150}),
-        Animated.timing(this.state.anim, {toValue: 1, duration: 150}),
-      ]).start(rec);
-    };
-    rec();
-  },
-  render: function() {
-    return (
-      <Animated.div
-        style={{
-          left: this.state.anim.interpolate({
-            inputRange: [-1, -0.5, 0.5, 1],
-            outputRange: [0, 5, 0, 5]
-          }),
-          transform: [
-            {rotate: this.state.anim.interpolate({
-              inputRange: [-1, 1],
-              outputRange: ['-10deg', '10deg']
-            })}
-          ]
-        }}
-        className="circle"
-        onClick={this.handleClick}>
-        Click
-      </Animated.div>
-    );
-  },
-}));
+        Animated.parallel(
+          this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
+        ),
+        Animated.stagger(
+          100,
+          this.state.anims.map(anim => Animated.spring(anim, { toValue: 0.2 }))
+        ),
+      ]).start();
+    },
+  })
+);
 </script><script>example();</script>
 
 <script type="text/babel">
-examplify(React.createClass({
-  getInitialState: function() {
-    return {
-      anim: new Animated.Value(0)
-    };
-  },
-  render: function() {
-    return (
-      <div
-        style={{overflow: 'scroll', height: 60}}
-        onScroll={Animated.event([
-          {target: {scrollLeft: this.state.anim}}
-        ])}>
-        <div style={{width: 1000, height: 1}} />
-        {[0, 1, 2, 3, 4].map(i =>
-          <Animated.div
-            style={{
-              left: this.state.anim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, (i + 1)]
-              }),
-              pointerEvents: 'none',
-            }}
-            className="circle">
-            {i === 4 && 'H-Scroll'}
-          </Animated.div>
-        )}
-      </div>
-    );
-  },
-}));
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    handleClick: function() {
+      var rec = () => {
+        Animated.sequence([
+          Animated.timing(this.state.anim, { toValue: -1, duration: 150 }),
+          Animated.timing(this.state.anim, { toValue: 1, duration: 150 }),
+        ]).start(rec);
+      };
+      rec();
+    },
+    render: function() {
+      return (
+        <Animated.div
+          style={{
+            left: this.state.anim.interpolate({
+              inputRange: [-1, -0.5, 0.5, 1],
+              outputRange: [0, 5, 0, 5],
+            }),
+            transform: [
+              {
+                rotate: this.state.anim.interpolate({
+                  inputRange: [-1, 1],
+                  outputRange: ['-10deg', '10deg'],
+                }),
+              },
+            ],
+          }}
+          className="circle"
+          onClick={this.handleClick}
+        >
+          Click
+        </Animated.div>
+      );
+    },
+  })
+);
+</script><script>example();</script>
+
+<script type="text/babel">
+examplify(
+  React.createClass({
+    getInitialState: function() {
+      return {
+        anim: new Animated.Value(0),
+      };
+    },
+    render: function() {
+      return (
+        <div
+          style={{ overflow: 'scroll', height: 60 }}
+          onScroll={Animated.event([
+            { target: { scrollLeft: this.state.anim } },
+          ])}
+        >
+          <div style={{ width: 1000, height: 1 }} />
+          {[0, 1, 2, 3, 4].map(i => (
+            <Animated.div
+              style={{
+                left: this.state.anim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0, i + 1],
+                }),
+                pointerEvents: 'none',
+              }}
+              className="circle"
+            >
+              {i === 4 && 'H-Scroll'}
+            </Animated.div>
+          ))}
+        </div>
+      );
+    },
+  })
+);
 </script><script>example();</script>
 
   </div>