From d0188cb4389a169ef28a5a759d8bc8d418cfd4a8 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Sun, 1 Mar 2020 10:21:30 +0100
Subject: [PATCH] add code animation example to demo.html

---
 demo.html                       | 57 +++++++++++++++----------
 test/examples/auto-animate.html | 73 +++++++++++++++++++++------------
 2 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/demo.html b/demo.html
index c3644e5..def4d26 100644
--- a/demo.html
+++ b/demo.html
@@ -88,6 +88,42 @@
 					</p>
 				</section>
 
+				<section data-auto-animate>
+					<h2 data-id="code-title">Pretty Code</h2>
+					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
+						import React, { useState } from 'react';
+
+						function Example() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+						    ...
+						  );
+						}
+					</code></pre>
+					<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
+				</section>
+
+				<section data-auto-animate>
+					<h2 data-id="code-title">With animations</h2>
+					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4|4,8-11">
+						import React, { useState } from 'react';
+
+						function Example() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+						    &lt;div&gt;
+						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+						        Click me
+						      &lt;/button&gt;
+						    &lt;/div&gt;
+						  );
+						}
+					</code></pre>
+				</section>
+
 				<section>
 					<h2>Point of View</h2>
 					<p>
@@ -239,27 +275,6 @@
 					</div>
 				</section>
 
-				<section>
-					<h2>Pretty Code</h2>
-					<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
-						import React, { useState } from 'react';
-
-						function Example() {
-						  const [count, setCount] = useState(0);
-
-						  return (
-						    &lt;div&gt;
-						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
-						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
-						        Click me
-						      &lt;/button&gt;
-						    &lt;/div&gt;
-						  );
-						}
-					</code></pre>
-					<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
-				</section>
-
 				<section>
 					<h2>Marvelous List</h2>
 					<ul>
diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html
index c353748..b4bc193 100644
--- a/test/examples/auto-animate.html
+++ b/test/examples/auto-animate.html
@@ -31,9 +31,9 @@
 				</section>
 				<section data-auto-animate data-auto-animate-unmatched="fade">
 					<h3>Auto-Animate Example</h3>
-					<p style="opacity: 0.2; margin-top: 200px;">This will fade out</p>
+					<p style="opacity: 0.2; margin-top: 100px;">This will fade out</p>
 					<p>This element is unmatched</p>
-					<img src="assets/image1.png" style="height: 100px;">
+					<img src="assets/image1.png" style="height: 150px;">
 					<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
 						function Example() {
 						  New line!
@@ -49,34 +49,53 @@
 					<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
 				</section>
 
-				<section data-auto-animate>
-					<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
-						import React, { useState } from 'react';
+				<section>
+					<section data-auto-animate>
+						<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
+							import React, { useState } from 'react';
 
-						function Example() {
-						  const [count, setCount] = useState(0);
+							function Example() {
+							  const [count, setCount] = useState(0);
 
-						  return (
-						    ...
-						  );
-						}
-					</code></pre>
-				</section>
-				<section data-auto-animate>
-					<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
-						function Example() {
-						  const [count, setCount] = useState(0);
+							  return (
+							    ...
+							  );
+							}
+						</code></pre>
+					</section>
+					<section data-auto-animate>
+						<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
+							function Example() {
+							  const [count, setCount] = useState(0);
 
-						  return (
-						    &lt;div&gt;
-						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
-						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
-						        Click me
-						      &lt;/button&gt;
-						    &lt;/div&gt;
-						  );
-						}
-					</code></pre>
+							  return (
+							    &lt;div&gt;
+							      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+							      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+							        Click me
+							      &lt;/button&gt;
+							    &lt;/div&gt;
+							  );
+							}
+						</code></pre>
+					</section>
+					<section data-auto-animate>
+						<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
+							function Example() {
+							  // A comment!
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    &lt;div&gt;
+							      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+							      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+							        Click me
+							      &lt;/button&gt;
+							    &lt;/div&gt;
+							  );
+							}
+						</code></pre>
+					</section>
 				</section>
 
 				<section>