From a3cd500154039562fa66ef38feddac13b907be76 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Fri, 31 Jan 2020 11:51:31 +0100
Subject: [PATCH] auto-animate works on vertically centered decks

---
 js/reveal.js                    | 25 +++++++++++++++++--------
 test/examples/auto-animate.html |  2 +-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/js/reveal.js b/js/reveal.js
index 28fb35a..958ebae 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3789,16 +3789,21 @@
 
 		if( config.autoAnimate ) {
 
-			var prevTargets = {};
+			// If our slides are centered vertically, we need to
+			// account for their difference in position when
+			// calculating deltas for animated elements
+			var offsetY = config.center ? fromSlide.offsetTop - toSlide.offsetTop : 0;
 
-			toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( element ) {
-				prevTargets[ element.getAttribute( 'data-id' ) ] = element;
+			var fromTargets = {};
+
+			toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
+				fromTargets[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
 			} );
 
-			toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( element ) {
-				var previousElement = prevTargets[ element.getAttribute( 'data-id' ) ];
-				if( previousElement ) {
-					autoAnimateElement( previousElement, element );
+			toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
+				var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ];
+				if( fromElement ) {
+					autoAnimateElement( fromElement, toElement, offsetY );
 				}
 			} );
 
@@ -3813,7 +3818,7 @@
 	 * @param  {HTMLElement} from
 	 * @param  {HTMLElement} to
 	 */
-	function autoAnimateElement( from, to ) {
+	function autoAnimateElement( from, to, offsetY ) {
 
 		var fromProps = getAutoAnimatableProperties( from ),
 			toProps = getAutoAnimatableProperties( to );
@@ -3825,6 +3830,10 @@
 			scaleY: fromProps.height / toProps.height
 		};
 
+		// Correction applied to account for varying vertical
+		// positions in decks with vertical centering
+		if( typeof offsetY === 'number' ) delta.y += offsetY;
+
 		to.style.transition = 'none';
 		to.style.transform = 'translate('+delta.x+'px, '+delta.y+'px) scale('+delta.scaleX+','+delta.scaleY+')';
 		to.classList.add( 'auto-animate-target' );
diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html
index 87293d3..646f562 100644
--- a/test/examples/auto-animate.html
+++ b/test/examples/auto-animate.html
@@ -22,7 +22,7 @@
 					<h3 data-id="opacity-test">Opacity 1.0</h2>
 				</section>
 				<section data-auto-animate>
-					<h3 data-id="opacity-test" style="opacity: 0.2;">Opacity 0.2</h2>
+					<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h2>
 				</section>
 
 				<section data-auto-animate style="height: 600px">