v1.0.9

Author: Martino

demo.html

@@ -23,8 +23,8 @@
                 <h1 class="animated flipInX slow">Appearance</h1>
                 <h3 class="animated flipInX slow" data-delay="700">for Reveal.js</h3>
             </section>
-            <section class="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result. It's easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small><br><br><small>We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Reveal versions lower than 4 have no "slidetransitionend" event, so we need the Transit.js plugin that handles that.</small>
-                <p>Let's check out what appearance.js does:</p>
+            <section class="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same. </small><br><br><small>Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small>
+                <p>Let's check out what Appearance does:</p>
             </section>
             <section class="center">
                 <h3>Let text appear</h3>
@@ -71,10 +71,10 @@ <h3>Inside fragments</h3>
                     </div>
                 </section>
                 <section class="center" data-auto-animate>
-                    <h3>Set the event for Appearance</h3>
+                    <h3>Change when Appearance starts</h3>
                 </section>
-                <section class="center" data-auto-animate>
-                    <h3>Set the event for Appearance</h3>
+                <section class="center" data-auto-animate data-appearevent="auto">
+                    <h3>Change when Appearance starts</h3>
                     <div>
                         <p class="animated fadeInUp">You can use any of the following events:</p>
                     </div>
@@ -83,9 +83,7 @@ <h3>Set the event for Appearance</h3>
                         <li class="animated bounceInLeft"><em>slidechanged</em> (with the transition)</li>
                         <li class="animated bounceInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
                     </ul>
-                    <div>
-                        <p class="animated fadeInUp">This can also be set per-slide with data-attributes</p><small class="animated fadeInUp">Reveal forces opacity changes on unmatched autoanimate items, while Appearance does the same. To avoid getting animation stutter, make sure that your Appearance items are nested in a parent that does not use an animation class.</small>
-                    </div>
+                    <div><br><small class="animated fadeInUp">This can also be set per-slide with data-attributes.</small></div>
                 </section>
             </section>
             <section class="center" data-transition="convex-in fade-out">
@@ -115,6 +113,13 @@ <h3>Thanks</h3>
         Reveal.initialize({
             transition: "convex",
             history: true,
+            appearance: {
+                baseclass: "animated",
+                visibleclass: "in",
+                hideagain: true,
+                delay: 300,
+                appearevent: "slidetransitionend"
+            },
             plugins: [
                 Appearance
             ]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "reveal.js-appearance",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "A plugin for Reveal.js 4 that adds appearance effects to elements",
     "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",

plugin/appearance/appearance.esm.js

@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Appearance.js for Reveal.js 
- * Version 1.0.8
+ * Version 1.0.9
  * 
  * @license 
  * MIT licensed
@@ -125,11 +125,11 @@ var Plugin = function Plugin() {
       var slides = fromTo(event);
 
       if (slides.to.dataset.appearevent == "auto") {
-        slides.to.dataset.appearevent == "autoanimate";
+        slides.to.dataset.appearevent = "autoanimate";
       }
 
       if (options.appearevent == "auto") {
-        options.appearevent == "autoanimate";
+        options.appearevent = "autoanimate";
       }
 
       if (!slides.to.dataset.eventdone) {
@@ -154,8 +154,7 @@ var Plugin = function Plugin() {
           showAppearances(slides.to);
           slides.to.dataset.eventdone = true;
         } else if (event.type == 'overviewhidden') {
-          document.body.dataset.exitoverview = true; // This hack is because Reveal does not give the correct clicked slide from the overviewhidden event
-
+          document.body.dataset.exitoverview = true;
           setTimeout(function () {
             document.body.removeAttribute('data-exitoverview');
           }, 500);

plugin/appearance/appearance.js

@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Appearance.js for Reveal.js 
- * Version 1.0.8
+ * Version 1.0.9
  * 
  * @license 
  * MIT licensed
@@ -131,11 +131,11 @@
 	      var slides = fromTo(event);
 
 	      if (slides.to.dataset.appearevent == "auto") {
-	        slides.to.dataset.appearevent == "autoanimate";
+	        slides.to.dataset.appearevent = "autoanimate";
 	      }
 
 	      if (options.appearevent == "auto") {
-	        options.appearevent == "autoanimate";
+	        options.appearevent = "autoanimate";
 	      }
 
 	      if (!slides.to.dataset.eventdone) {
@@ -160,8 +160,7 @@
 	          showAppearances(slides.to);
 	          slides.to.dataset.eventdone = true;
 	        } else if (event.type == 'overviewhidden') {
-	          document.body.dataset.exitoverview = true; // This hack is because Reveal does not give the correct clicked slide from the overviewhidden event
-
+	          document.body.dataset.exitoverview = true;
 	          setTimeout(function () {
 	            document.body.removeAttribute('data-exitoverview');
 	          }, 500);

plugin/appearance/plugin-src.js

@@ -6,7 +6,6 @@ const Plugin = () => {
 
 	const appear = function (deck, options) {
 
-
 		const debugLog = function(text) {
 			if (options.debug) console.log(text);
 		}
@@ -67,8 +66,8 @@ const Plugin = () => {
 
 			let slides = fromTo(event);
 
-			if (slides.to.dataset.appearevent == "auto") {slides.to.dataset.appearevent == "autoanimate"}
-			if (options.appearevent == "auto") {options.appearevent == "autoanimate"}
+			if (slides.to.dataset.appearevent == "auto") {slides.to.dataset.appearevent = "autoanimate"}
+			if (options.appearevent == "auto") {options.appearevent = "autoanimate"}
 
 			if ( !slides.to.dataset.eventdone ) {
 
@@ -82,6 +81,7 @@ const Plugin = () => {
 					showAppearances(slides.to);
 
 				} else if (event.type == options.appearevent) {
+					
 					slides.to.dataset.eventdone = true;
 					showAppearances(slides.to);
 
@@ -100,7 +100,6 @@ const Plugin = () => {
 
 					document.body.dataset.exitoverview = true;
 
-					// This hack is because Reveal does not give the correct clicked slide from the overviewhidden event
 					setTimeout(function () {
 						document.body.removeAttribute('data-exitoverview')
 					}, 500)