auto-animate example in demo

css/layout.scss

@@ -0,0 +1,49 @@
+/**
+ * Layout helpers.
+ */
+
+// Stretch an element vertically based on available space
+.reveal .stretch,
+.reveal .r-stretch {
+	max-width: none;
+	max-height: none;
+}
+
+.reveal pre.stretch code,
+.reveal pre.r-stretch code {
+	height: 100%;
+	max-height: 100%;
+	box-sizing: border-box;
+}
+
+// Stack multiple elements on top of each other
+.reveal .r-stack {
+	display: grid;
+}
+
+.reveal .r-stack > * {
+	grid-area: 1/1;
+	margin: auto;
+}
+
+// Horizontal and vertical stacks
+.reveal .r-vstack,
+.reveal .r-hstack {
+	display: flex;
+}
+
+.reveal .r-vstack {
+	flex-direction: column;
+}
+
+.reveal .r-hstack {
+	flex-direction: row;
+}
+
+.reveal .items-center {
+	align-items: center;
+}
+
+.reveal .justify-center {
+	justify-content: center;
+}

css/reveal.scss

@@ -6,6 +6,7 @@
  * Copyright (C) Hakim El Hattab, https://hakim.se
  */
 
+@import 'layout';
 
 /*********************************************
  * GLOBAL STYLES
@@ -213,30 +214,6 @@ html.reveal-full-page {
 	position: relative;
 }
 
-// Layout helper: Stretch an element vertically based on available space
-.reveal .stretch,
-.reveal .r-stretch {
-	max-width: none;
-	max-height: none;
-}
-
-.reveal pre.stretch code,
-.reveal pre.r-stretch code {
-	height: 100%;
-	max-height: 100%;
-	box-sizing: border-box;
-}
-
-// Layout helper: Stack multiple elements on top of each other
-.reveal .r-stack {
-	display: grid;
-}
-
-.reveal .r-stack > * {
-	grid-area: 1/1;
-	margin: auto;
-}
-
 
 /*********************************************
  * CONTROLS

demo.html

@@ -137,6 +137,32 @@ <h2>Point of View</h2>
 					</p>
 				</section>
 
+				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
+					<h2>Auto-Animate</h2>
+					<p>Automatically animate matching elements across slides with <a href="https://revealjs.netlify.app/auto-animate/">Auto-Animate</a>.</p>
+					<div class="r-hstack justify-center">
+						<div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
+						<div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
+						<div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
+					</div>
+				</section>
+				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
+					<div class="r-hstack justify-center">
+						<div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
+						<div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
+						<div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
+					</div>
+					<h2 style="margin-top: 20px;">Auto-Animate</h2>
+				</section>
+				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
+					<div class="r-stack">
+						<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
+						<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
+						<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
+					</div>
+					<h2 style="margin-top: 20px;">Auto-Animate</h2>
+				</section>
+
 				<section>
 					<h2>Touch Optimized</h2>
 					<p>

gulpfile.js

@@ -260,7 +260,7 @@ gulp.task('serve', () => {
     ], gulp.series('css-themes'))
 
     gulp.watch([
-        'css/reveal.scss',
+        'css/*.scss',
         'css/print/*.{sass,scss,css}'
     ], gulp.series('css-core'))