reveal.js-appearance 1.1.3 → 1.2.1

package/markdown.md

@@ -0,0 +1,156 @@
+# Appearance <!-- .element: class="animate__flipInX slow" -->
+### for Reveal.js <!-- .element: class="animate__flipInX slow" -->
+
+Using Markdown <!-- .element: class="animate__flipInX slow" -->
+
+---
+
+## Why?
+
+----
+
+In Powerpoint you can make slides with items that appear automatically and sequentially with effects. Appearance is a plugin for Reveal.js that does the same.
+
+Appearance is easy to set up. It uses [Animate.css](https://animate.style) by Daniel Eden for the animations, with some changes to allow for a non-animated state.
+
+---
+
+## Examples
+Let's check out what Appearance does:
+
+----
+
+## Let text appear
+
+* Add it to any text element <!-- .element: class="animate__bounceInLeft" -->
+* Like list items, or headers. <!-- .element: class="animate__bounceInLeft" -->
+* It adds some impact. <!-- .element: class="animate__bounceInLeft" -->
+
+
+```html []
+* Add it to any text element <!-- .element: class="animate__bounceInLeft" -->
+* Like list items, or headers. <!-- .element: class="animate__bounceInLeft" -->
+* It adds some impact. <!-- .element: class="animate__bounceInLeft" -->
+```
+
+----
+
+## Let images appear
+
+![](img/1.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/2.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/3.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/4.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/5.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+
+```html []
+![](img/1.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/2.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/3.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/4.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/5.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+```
+
+----
+
+## Inside fragments
+
+Like this *(click next)<!-- .element: class="animate__fadeInDown animate__faster" -->*:
+<!-- .element: class="animate__fadeInDown" -->
+
+![](img/1.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/2.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/3.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/4.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/5.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+<!-- .element: class="fragment" -->
+
+```html []
+![](img/1.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/2.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/3.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/4.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+![](img/5.jpg) <!-- .element: class="animate__flipInX demoimg" -->
+<!-- .element: class="fragment" -->
+```
+
+---
+
+## Auto-appear
+You can simplify the addition of animation classes:
+
+----
+
+
+Sometimes (for example with Markdown), adding classes to elements is a chore. 
+
+Appearance can automatically add animation classes to specific elements (tags or other selectors) in the presentation (with the option `autoappear`) or per slide (with `data-autoappear`).
+
+----
+
+### Global auto-appear mode
+* This is list item 1
+* This is list item 2
+
+```html []
+### Global auto-appear mode
+* This is list item 1
+* This is list item 2
+```
+
+```html []
+<script>
+	//...
+	appearance: {
+		autoappear: true,
+		autoelements: {'ul li': 'animate__fadeInLeft'}
+	},
+	plugins: [ RevealMarkdown, Appearance ]
+</script>
+```
+
+This shows how to globally set elements to appear.<!-- .element: class="small" -->
+
+----
+
+### Local auto-appear
+<!-- .slide: data-autoappear="true" -->
+* This is list item 1
+* This is list item 2
+
+```html []
+<!-- .slide: data-autoappear="true" -->
+### Local auto-appear
+* This is list item 1
+* This is list item 2
+```
+
+```html []
+<script>
+	//...
+	appearance: {
+		autoappear: false,
+		autoelements: {'ul li': 'animate__fadeInLeft'}
+	},
+	plugins: [ RevealMarkdown, Appearance ]
+</script>
+```
+
+Local auto-appear uses a data-attribute per slide.<!-- .element: class="small" -->
+
+----
+
+<!-- .slide: data-autoappear="{'ul li':'animate__fadeInRight','h3':['animate__fadeInDown, animate__slow','100ms']}" -->
+### Local auto-appear, specified
+
+You can also add a JSON object to the slide’s auto-appear data-attribute, with specific elements, their animations class/classes and optional delay.<!-- .element: class="small" -->
+
+* This is list item 1
+* This is list item 2
+
+```html []
+<!-- .slide: data-autoappear="{'ul li':'animate__fadeInRight','h3':['animate__fadeInDown, animate__slow','100ms']}" -->
+### Local auto-appear, specified
+* This is list item 1
+* This is list item 2
+```

package/package.json

@@ -1,6 +1,8 @@
 {
     "name": "reveal.js-appearance",
-    "version": "1.1.3",
+    "version": "1.2.1",
+    "main": "plugin/appearance/appearance.js",
+    "module": "plugin/appearance/appearance.esm.js",
     "description": "An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.",
     "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects, powerpoint",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
@@ -9,8 +11,11 @@
         "url": "https://github.com/Martinomagnifico/reveal.js-appearance.git"
     },
     "author": "Martijn De Jongh",
-    "license": "MIT, Copyright (C) 2022 Martijn De Jongh",
+    "license": "MIT, Copyright (C) 2023 Martijn De Jongh",
     "peerDependencies": {
         "reveal.js": "^4.2"
+    },
+    "dependencies": {
+        "animate.css": "^4.1.1"
     }
 }

package/plugin/appearance/appearance.css

@@ -1,3 +1,19 @@
+/*
+ ****************************************************************
+ * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
+ * https://github.com/Martinomagnifico
+ *
+ * Appearance.js for Reveal.js
+ * Version 1.2.0
+ * 
+ * @license 
+ * MIT licensed
+ *
+ * Thanks to:
+ *  - Hakim El Hattab, Reveal.js
+ *  - Daniel Eden, Animate.css
+ *****************************************************************
+*/
 /* Animate.css overrides */
 section:not(.stack):not([data-appearance-can-start]) .animate__animated, section:not(.stack):not([data-appearance-can-start]) .animated {
   opacity: 0;
@@ -11,7 +27,7 @@ section:not(.stack):not([data-appearance-can-start]) .animate__animated, section
   opacity: 1;
 }
 
-.fragment:not(.visible) .animate__animated, .fragment:not(.visible) .animated {
+.fragment:not(.visible) .animate__animated, .fragment:not(.visible) .animated, .fragment:not(.visible).animate__animated, .fragment:not(.visible).animated {
   opacity: 0;
   -webkit-animation: none;
           animation: none;
@@ -288,10 +304,22 @@ span.animate__animated, span.animated {
           animation-duration: calc(var(--animate-duration) * 3);
 }
 
-.print-pdf {
-  color: black;
+.print-pdf .animated, .print-pdf .animate__animated,
+.print-pdf section:not(.stack):not([data-appearance-can-start]) .animated,
+.print-pdf section:not(.stack):not([data-appearance-can-start]) .animate__animated {
+  opacity: 1;
+  visibility: visible;
+  -webkit-animation: none;
+          animation: none;
 }
-.print-pdf .animated, .print-pdf .animate__animated {
+.print-pdf .reveal .fragment {
+  opacity: 1;
+}
+
+.reveal.sv .animated, .reveal.sv .animate__animated,
+.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animated,
+.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animate__animated {
+  opacity: 1;
   visibility: visible;
   -webkit-animation: none;
           animation: none;