demo and auto-animate example updates

demo.html

@@ -242,9 +242,9 @@
 				<section>
 					<h2>Pretty Code</h2>
 					<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
-import React, { useState } from 'react';
+						import React, { useState } from 'react';
 
-function Example() {
+						function Example() {
 						  const [count, setCount] = useState(0);
 
 						  return (
@@ -255,9 +255,9 @@ function Example() {
 						      &lt;/button&gt;
 						    &lt;/div&gt;
 						  );
-}
+						}
 					</code></pre>
-					<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
+					<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
 				</section>
 
 				<section>

js/reveal.js

@@ -3879,40 +3879,6 @@
 
 	}
 
-	/**
-	 * Returns the auto-animate options for the given element.
-	 *
-	 * @param {HTMLElement} element Element to pick up options
-	 * from, either a slide or an animation target
-	 * @param {Object} [inheritOptions] optional set of options
-	 * to inherit as a base
-	 */
-	function getAutoAnimateOptions( element, inheritOptions ) {
-
-		var options = {
-			easing: config.autoAnimateEasing,
-			duration: config.autoAnimateDuration,
-			delay: 0
-		};
-
-		if( inheritOptions ) extend( options, inheritOptions );
-
-		if( element.dataset.autoAnimateEasing ) {
-			options.easing = element.dataset.autoAnimateEasing;
-		}
-
-		if( element.dataset.autoAnimateDuration ) {
-			options.duration = parseFloat( element.dataset.autoAnimateDuration );
-		}
-
-		if( element.dataset.autoAnimateDelay ) {
-			options.delay = parseFloat( element.dataset.autoAnimateDelay );
-		}
-
-		return options;
-
-	}
-
 	/**
 	 * Auto-animates the properties of an element from their original
 	 * values to their new state.
@@ -3932,11 +3898,11 @@
 		to.dataset.autoAnimateTarget = id;
 
 		// Each element may override any of the auto-animate options
-		// like transition easing, duration and delay
+		// like transition easing, duration and delay via data-attributes
 		var options = getAutoAnimateOptions( to, slideOptions );
 
-		// Individual transition settings can be overridden via
+		// If we're using a custom element matcher the element options
-		// element options
+		// may contain additional transition overrides
 		if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;
 		if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;
 		if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;
@@ -3994,10 +3960,46 @@
 
 	}
 
+	/**
+	 * Returns the auto-animate options for the given element.
+	 *
+	 * @param {HTMLElement} element Element to pick up options
+	 * from, either a slide or an animation target
+	 * @param {Object} [inheritOptions] optional set of options
+	 * to inherit as a base
+	 */
+	function getAutoAnimateOptions( element, inheritOptions ) {
+
+		var options = {
+			easing: config.autoAnimateEasing,
+			duration: config.autoAnimateDuration,
+			delay: 0
+		};
+
+		if( inheritOptions ) extend( options, inheritOptions );
+
+		if( element.dataset.autoAnimateEasing ) {
+			options.easing = element.dataset.autoAnimateEasing;
+		}
+
+		if( element.dataset.autoAnimateDuration ) {
+			options.duration = parseFloat( element.dataset.autoAnimateDuration );
+		}
+
+		if( element.dataset.autoAnimateDelay ) {
+			options.delay = parseFloat( element.dataset.autoAnimateDelay );
+		}
+
+		return options;
+
+	}
+
 	/**
 	 * Returns an object containing all of the properties
-	 * that can be auto-animated for the given element
+	 * that can be auto-animated for the given element and
-	 * and their respective values.
+	 * their current computed values.
+	 *
+	 * @param {String} direction 'from' or 'to'
 	 */
 	function getAutoAnimatableProperties( direction, element, elementOptions ) {
 
@@ -4070,7 +4072,7 @@
 	 * Identifies matching elements between slides.
 	 *
 	 * You can specify a custom matcher function by using
-	 * the autoAnimateMatcher config option.
+	 * the `autoAnimateMatcher` config option.
 	 */
 	function findAutoAnimatePairs( fromSlide, toSlide ) {
 

test/examples/auto-animate.html

@@ -20,32 +20,32 @@
 			<div class="slides">
 
 				<section data-auto-animate>
-					<h3>Auto-Matched Content (no IDs)</h3>
+					<h3>Auto-Animate Example</h3>
 					<p>This will fade out</p>
 					<img src="assets/image1.png" style="height: 100px;">
-					<pre><code class="hljs">
+					<pre><code class="hljs" data-trim>
-function Example() {
+						function Example() {
 						  const [count, setCount] = useState(0);
-}
+						}
 					</code></pre>
 				</section>
 				<section data-auto-animate data-auto-animate-unmatched="fade">
-					<h3>Auto-Matched Content (no IDs)</h3>
+					<h3>Auto-Animate Example</h3>
 					<p style="opacity: 0.2; margin-top: 200px;">This will fade out</p>
 					<p>This element is unmatched</p>
 					<img src="assets/image1.png" style="height: 100px;">
-					<pre><code class="hljs">
+					<pre><code class="hljs" data-trim>
-function Example() {
+						function Example() {
 						  const [count, setCount] = useState(0);
-}
+						}
 					</code></pre>
 				</section>
 
 				<section data-auto-animate>
-					<h3 data-id="text-props" style="background: #555; line-height: 1em; letter-spacing: 0em;">Text props</h3>
+					<p data-id="text-props" style="background: #555; line-height: 1em; letter-spacing: 0em;">Line Height & Letter Spacing</p>
 				</section>
 				<section data-auto-animate>
-					<h3 data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Text props</h3>
+					<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>
@@ -80,7 +80,6 @@ function Example() {
 					<div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
 					<div data-id="3" style="background: white; position: absolute; top: 150px; left: 56%; width: 60px; height: 60px;"></div>
 					<div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
-					<!-- <p data-id="2" style="margin-top: 200px; border: 2px solid #999;">Text</p> -->
 				</section>
 				<section data-auto-animate style="height: 600px">
 					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h2>
@@ -89,7 +88,6 @@ function Example() {
 					<div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
 					<div data-id="3" style="background: yellow; position: absolute; bottom: 190px; left: 56%; width: 60px; height: 260px;"></div>
 					<div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
-					<!-- <p data-id="2" style="margin-top: 200px; border: 2px solid #999; width: 50%;">Text</p> -->
 				</section>
 				<section data-auto-animate style="height: 600px">
 					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
@@ -98,7 +96,6 @@ function Example() {
 					<div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div>
 					<div data-id="3" style="background: yellow; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;"></div>
 					<div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div>
-					<!-- <p data-id="2" style="margin-top: 200px; border: 2px solid #999;">Text</p> -->
 				</section>
 				<section data-auto-animate style="height: 600px">
 					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
@@ -107,7 +104,6 @@ function Example() {
 					<div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
 					<div data-id="3" style="background: magenta; position: absolute; top: 250px; left: 56%; width: 60px; height: 60px;"></div>
 					<div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
-					<!-- <p data-id="2" style="margin-top: 200px; border: 2px solid #999;">Text</p> -->
 				</section>
 
 			</div>