From 464a19972edffae363387feeb745c55d3b67d649 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Marohni=C4=87?= <matija.marohnic@gmail.com>
Date: Sat, 31 Mar 2018 13:45:24 +0200
Subject: [PATCH 1/4] Add note about animation timing in the docs

Closes #284
---
 src/Transition.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/Transition.js b/src/Transition.js
index cbe077cc..e42249b1 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -55,10 +55,10 @@ export const EXITING = 'exiting';
  * component (such as by adding styles or classes) when it changes states.
  *
  * There are 4 main states a Transition can be in:
- *  - `entering`
- *  - `entered`
- *  - `exiting`
- *  - `exited`
+ *  - `'entering'`
+ *  - `'entered'`
+ *  - `'exiting'`
+ *  - `'exited'`
  *
  * Transition state is toggled via the `in` prop. When `true` the component begins the
  * "Enter" stage. During this stage, the component will shift from its current transition state,
@@ -87,6 +87,14 @@ export const EXITING = 'exiting';
  *
  * When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
  *
+ * ## Timing
+ *
+ * Timing is often the trickiest part of animation, mistakes can result in slight delays
+ * that are hard to pin down. A common example is when you want to add an exit transition,
+ * you should set the desired final styles when the state is `'exiting'`. That's when the
+ * transition to those styles will start and, if you matched the `timeout` prop with the
+ * CSS Transition duration, it will end exactly when the state changes to `'exited'`.
+ *
  * > **Note**: For simpler transitions the `Transition` component might be enough, but
  * > take into account that it's platform-agnostic, while the `CSSTransition` component
  * > [forces reflows](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)

From 54f7f683db509d0104937f6d7d1fc822dfa97993 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Marohni=C4=87?= <matija.marohnic@gmail.com>
Date: Tue, 3 Apr 2018 17:09:25 +0200
Subject: [PATCH 2/4] Add missing space in a code snippet

---
 src/Transition.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Transition.js b/src/Transition.js
index e42249b1..380bdd70 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -66,7 +66,7 @@ export const EXITING = 'exiting';
  * it's complete. Let's take the following example:
  *
  * ```jsx
- * state= { in: false };
+ * state = { in: false };
  *
  * toggleEnterState = () => {
  *   this.setState({ in: true });

From a0589f959c3529b63e1f3b1fd1c1be95d0863a7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Marohni=C4=87?= <matija.marohnic@gmail.com>
Date: Tue, 3 Apr 2018 17:09:54 +0200
Subject: [PATCH 3/4] Remove padding from code elements

It creates unnecessary gaps.
---
 www/src/css/bootstrap.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/www/src/css/bootstrap.scss b/www/src/css/bootstrap.scss
index 47224865..f4fed7cc 100644
--- a/www/src/css/bootstrap.scss
+++ b/www/src/css/bootstrap.scss
@@ -16,6 +16,7 @@ pre {
 }
 
 code {
+  padding: 0;
   background: transparent;
   color: $hue-3;
   a & {

From 8e989ddf651969e065e919411c17ae693a5688f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Marohni=C4=87?= <matija.marohnic@gmail.com>
Date: Tue, 3 Apr 2018 17:41:00 +0200
Subject: [PATCH 4/4] Add short description of the library

---
 www/src/pages/index.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index fb3138c6..3a6831c0 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -24,6 +24,17 @@ class Index extends React.Component {
     return (
       <div>
         <h1>React Transition Group</h1>
+        <blockquote>
+          <p>
+            Exposes simple components useful for defining entering and exiting
+            transitions. React Transition Group is not an animation library like{' '}
+            <a href="https://github.com/chenglou/react-motion">React-Motion</a>,
+            it does not animate styles by itself. Instead it exposes transition
+            stages, manages classes and group elements and manipulates the DOM
+            in useful ways, making the implementation of actual visual
+            transitions much easier.
+          </p>
+        </blockquote>
         <section>
           <h2>Getting Started</h2>
           <p />