reveal.js-appearance 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.1.2] - 2022-06-26
+### Added
+- Added auto-loading of styles.
+
+### Changed
+- Changed the internal delay mechanism to use CSS animation delay in combination to adding the trigger on the parent, not each animated element. This will improve the performance.
+- ***Breaking change***: Moved to Animate.css version 4, but added a compatibility mode
 
 ## [1.1.1] - 2021-11-27
 ### Added

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Martijn De Jongh (Martino)
+Copyright (c) 2022 Martijn De Jongh (Martino)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -6,14 +6,15 @@ A plugin for [Reveal.js](https://revealjs.com) 4 that adds appearance effects to
 
 [![Screenshot](https://martinomagnifico.github.io/reveal.js-appearance/screenshot.png)](https://martinomagnifico.github.io/reveal.js-appearance/demo.html)
 
-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. 
+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 to allow for a non-animated state. 
 
 [Demo](https://martinomagnifico.github.io/reveal.js-appearance/demo.html)
 
-We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Then the animations will start automatically if the HTML is set up to use Appearance.
+The animations will start automatically after or at each slide or fragment change if the HTML is set up to use Appearance.
 
 Version 1.1.1 adds an `autoappear` mode for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
 
+Appearance v1.1.2 brought some **breaking changes**, please refer to the [migration guide](#migration-guide) before updating from v1.1.1 and under. It also changed the internal delay mechanism to use CSS animation delay in combination to adding the trigger on the parent, not each animated element. This will improve the performance.
 
 
 ## Installation
@@ -68,40 +69,33 @@ If you're using ES modules, you can add it like this:
 ```
 
 ### Styling
+Since version 1.1.2, the styling of Appearance is automatically inserted, either loaded through NPM or from the plugin folder. Two files are inserted: The first one is Animate.css by Daniel Eden for the basic animations, we add it through a CDN. The second file adds to the first stylesheet to allow for a non-animated state.
 
-You now need to add TWO stylesheets to your presentation. 
-
-* The first one is Animate.css by Daniel Eden for the basic animations, and we can add it through a CDN.
-* The second file is included with Appearance. It adds to the first stylesheet to allow for a non-animated state.
-
-```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
-<link rel="stylesheet" href="plugin/appearance/appearance.css">
-```
+If you want to change the Appearance style, you can simply make your own style and use that stylesheet instead. Linking to your custom styles can be managed through the `csspath` option of Appearance.
 
 
 
 ### HTML
 
-It is easy to set up your HTML structure for Appearance: 
+It is easy to set up your HTML structure for Appearance. Each element that you want to animate uses a base class and an animation class. ***You only have to add an animation class*** because the base class is automatically added to any element with an animation class. The names of these animation classes are defined by [Animate.css](https://animate.style). In the example below, you can see that the animation class is `animate__bounceInLeft`:  
 
 ```html
 <ul>
-	<li class="animated bounceInLeft">Add it to any text element</li>
-	<li class="animated bounceInLeft">Like list items, or headers.</li>
-	<li class="animated bounceInLeft">It adds some attention.</li>
+    <li class="animate__bounceInLeft">Add it to any text element</li>
+    <li class="animate__bounceInLeft">Like list items, or headers.</li>
+    <li class="animate__bounceInLeft">It adds some attention.</li>
 </ul>
 ```
 When you are working with Markdown, this can be a chore so if you do not want to add all these classes, you can set the option `autoappear` to `true` (see Configuration below) and let Appearance do the heavy work. You do not need to add any markup and it will stay like this:
 
 ```html
 <ul>
-	<li>Add it to any text element</li>
+    <li>Add it to any text element</li>
 	<li>Like list items, or headers.</li>
 	<li>It adds some attention.</li>
 </ul>
 ```
-or this:
+or like this in Markdown:
 
 ```markdown
 * Add it to any text element
@@ -117,28 +111,34 @@ There are a few options that you can change from the Reveal.js options. The valu
 
 ```javascript
 Reveal.initialize({
-	// ...
-	appearance: {
-		baseclass: 'animated',
-		visibleclass: 'in',
-		hideagain: true,
-		delay: 300,
-		appearevent: 'slidetransitionend',
-		autoappear: false,
-		autoelements: false
-	},
-	plugins: [ Appearance ]
+  // ...
+  appearance: {
+    hideagain: true,
+    delay: 300,
+    appearevent: 'slidetransitionend',
+    autoappear: false,
+    autoelements: false,
+    csspath: '',
+    animatecsspath: {
+      link : 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
+      compat : 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css',
+    },
+    compatibility: false,
+    compatibilitybaseclass: 'animated'
+  },
+  plugins: [ Appearance ]
 });
 ```
 
-* **`baseclass`**: The baseclass uses the baseclass from Animate.css. Change it if you like. 
-* **`visibleclass`**: Use a specific class for the visible state. 
 * **`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back.
 * **`delay`**: Base time in ms between appearances.
 * **`appearevent`**: Use a specific event at which Appearance starts.
 * **`autoappear`**: Use this when you do not want to add classes to each item that you want to appear, and just let Appearance add animation classes to (all of) the provided elements in the presentation. See "Using 'autoappear'" mode below.
 * **`autoelements`**: These are the elements that `autoappear` will target. Each element has a selector and an animation class. If `autoappear` is off, the elements will still get animation if the section contains a `data-autoappear` attribute.
-
+* **`csspath`**: Appearance will automatically load the styling of the plugin. If you want to customise the styling, you can link to your own CSS file here.
+* **`animatecsspath`**: Appearance will also automatically load the styling of Animate.css via a CDN. Note that Animeta.css has two links, the first (CDN) one is for version 4, the second (old) one is the version 3 compatibility CDN link.
+* **`compatibility`**: This setting can let you use your current markup. However, because this also uses the Animate.css compatibility CSS, and it is likely that they will not support this in the future, please update your markup as shown above.
+* **`compatibilitybaseclass`**: This is the baseclass to use if you don't change your markup. 
 
 ### Changing the 'appearevent'
 When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended. 
@@ -147,7 +147,7 @@ There are cases however, where  there is hardly any transition, for example, whe
 
 * *slidetransitionend* (default, Appearance will start animating elements after the transition)
 * *slidechanged* (Appearance will start together with the transition)
-* *auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*) 
+* *auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*)
 
 These same event triggers can be set through the data-attribute `data-appearevent`. 
 
@@ -155,14 +155,14 @@ When using Appearance inside an autoanimate slide, and changing the appearevent
 
 
 ### Using 'autoappear' mode
-Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation.
+Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements, or tags, in the presentation.
 
-With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector will get an animation. These selectors and the animations can be set in the configuration options like this: 
+With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector (and that are not already classed with your base animation class, like 'animated') will subsequently get this class, and thus an animation. These selectors and the animations can be set in the configuration options like this:  
 
 ```javascript
 autoelements: {
-	'ul li': 'fadeInLeft',
-	'ol li': 'fadeInRight'
+	'ul li': 'animate__fadeInLeft',
+	'ol li': 'animate__fadeInRight'
 }
 ```
 You can add any selector and animation class to this object.
@@ -176,19 +176,45 @@ With the option `autoappear` set to `false`, the above still works, but only on
 It is easy to change the effects for Appearance. Here's how to change the delay per-element: 
 
 ```html
-<img class="animated fadeInDown" data-src="1.jpg" data-delay="200">
-<img class="animated fadeInDown" data-src="2.jpg" data-delay="160">
-<img class="animated fadeInDown" data-src="3.jpg" data-delay="120">
+<img class="animate__fadeInDown" data-src="1.jpg" data-delay="200">
+<img class="animate__fadeInDown" data-src="2.jpg" data-delay="160">
+<img class="animate__fadeInDown" data-src="3.jpg" data-delay="120">
 ```
 or the speed of each animation, using the tempo classes from Animate.css:
 
 ```html
-<img class="animated fadeInDown slower" data-src="1.jpg">
-<img class="animated fadeInDown slow" data-src="2.jpg">
-<img class="animated fadeInDown fast" data-src="3.jpg">
-<img class="animated fadeInDown faster" data-src="4.jpg">
+<img class="animate__fadeInDown slower" data-src="1.jpg">
+<img class="animate__fadeInDown slow" data-src="2.jpg">
+<img class="animate__fadeInDown fast" data-src="3.jpg">
+<img class="animate__fadeInDown faster" data-src="4.jpg">
 ```
 
+## Migration guide
+Appearance v1.1.2 is an update to stay current with the latest version of Animate.css, which itself brought breaking changes in version 4. Animate.css v4 added a prefix for all of the Animate.css classes, defaulting to `animate__` . Appearance will now automatically add the Animate.css base class (`animate__animated`) to any element with a Animate.css animation class.
+
+You have two options to migrate to the new version:
+
+### Adjust your markup
+
+If in Appearance v1.1.1 you used this:
+
+```html
+<img class="animated fadeInDown" data-src="1.jpg">
+```
+ 
+you should now use this:
+
+```html
+<img class="animate__fadeInDown" data-src="1.jpg">
+```
+which is the only change in the markup. 
+
+### Turn on compatibility mode
+
+If you turn in compatibility mode in Appearance, you can keep using your current markup. However, because this also uses the Animate.css compatibility CSS, this might break your presentations in the future, so it is not recommended. See the options above for compatibility mode and the compatibility base class.
+
+
+
 ## Like it?
 If you like it, please star this repo! 
 
@@ -198,4 +224,4 @@ And if you want to show off what you made with it, please do :-)
 ## License
 MIT licensed
 
-Copyright (C) 2021 Martijn De Jongh (Martino)
+Copyright (C) 2022 Martijn De Jongh (Martino)

package/css/demo.css

@@ -1,21 +1,85 @@
 .slides {
   opacity: 0;
-  -webkit-transition: opacity .5s ease;
-  -o-transition: opacity .5s ease;
-  transition: opacity .5s ease; }
+  -webkit-transition: opacity 0.5s ease;
+  -o-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
+}
 
 .reveal.ready .slides {
-  opacity: 1; }
+  opacity: 1;
+}
 
 .backgrounds {
-  background: #1a1626; }
+  background: #1a1626;
+}
+
+.reveal.overview section {
+  background: #1a1626;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.slides {
+  opacity: 0;
+  -webkit-transition: opacity 0.5s ease;
+  -o-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
+}
+.reveal.ready .slides {
+  opacity: 1;
+}
+
+.reveal .padded img {
+  border: none;
+  margin: 0;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.row {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: 30px;
+}
+
+.reveal .slides > section,
+.reveal .slides > section > section {
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-perspective: 1000px;
+          perspective: 1000px;
+}
+
+small {
+  margin: 1.5rem 0 2rem 0;
+}
+
+.small {
+  font-size: 75%;
+}
+
+small code {
+  font-size: 75%;
+  background: #222D2F;
+  color: #ddd;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+}
 
 a.github-corner {
   position: absolute;
   z-index: 1;
   width: clamp(50px, 8vmax, 80px);
   line-height: 0;
-  color: rgba(255, 255, 255, 0.5); }
+  color: rgba(255, 255, 255, 0.5);
+}
 
 a.github-corner:hover {
-  color: white; }
+  color: white;
+}

package/demo.html

@@ -12,8 +12,6 @@
     <link rel="stylesheet" href="../dist/reveal.css">
     <link rel="stylesheet" href="../dist/theme/black.css">
     <link rel="stylesheet" href="css/demo.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
-    <link rel="stylesheet" href="plugin/appearance/appearance.css">
 </head>
 
 <body>
@@ -23,54 +21,69 @@
             </svg></a>
         <div class="slides">
             <section class="center">
-                <h1 class="animated flipInX slow">Appearance</h1>
-                <h3 class="animated flipInX slow" data-delay="700">for Reveal.js</h3>
+                <h1 class="animate__flipInX animate__slow">Appearance</h1>
+                <h3 class="animate__flipInX animate__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. Appearance is a plugin for Reveal.js that does the same. </small><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>
+            <section class="center"><small>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. </small><small>Appearance is easy to set up. It uses <a href="https://animate.style" target="_blank">Animate.css</a> by Daniel Eden for the animations, with some changes 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>
                 <ul>
-                    <li class="animated bounceInLeft">Add it to any text element</li>
-                    <li class="animated bounceInLeft">Like list items, or headers.</li>
-                    <li class="animated bounceInLeft">It adds some impact.</li>
+                    <li class="animate__bounceInLeft">Add it to any text element</li>
+                    <li class="animate__bounceInLeft">Like list items, or headers.</li>
+                    <li class="animate__bounceInLeft">It adds some impact.</li>
                 </ul>
             </section>
             <section class="center">
                 <h3>Let images appear</h3>
-                <div class="padded"><img class="animated flipInX" data-src="img/1.jpg"></div>
-                <div class="padded"><img class="animated flipInX" data-src="img/2.jpg"></div>
-                <div class="padded"><img class="animated flipInX" data-src="img/3.jpg"></div>
-                <div class="padded"><img class="animated flipInX" data-src="img/4.jpg"></div>
-                <div class="padded"><img class="animated flipInX" data-src="img/5.jpg"></div>
+                <div class="row">
+                    <div class="padded"><img class="animate__flipInX" data-src="img/1.jpg"></div>
+                    <div class="padded"><img class="animate__flipInX" data-src="img/2.jpg"></div>
+                    <div class="padded"><img class="animate__flipInX" data-src="img/3.jpg"></div>
+                    <div class="padded"><img class="animate__flipInX" data-src="img/4.jpg"></div>
+                    <div class="padded"><img class="animate__flipInX" data-src="img/5.jpg"></div>
+                </div>
             </section>
             <section class="center">
-                <h3>Change the delay</h3><small>Use data-delay="*" on each element, where the wildcard is the delay in microseconds</small>
-                <div class="padded"><img class="animated fadeInDown" data-src="img/1.jpg" data-delay="200"></div>
-                <div class="padded"><img class="animated fadeInDown" data-src="img/2.jpg" data-delay="160"></div>
-                <div class="padded"><img class="animated fadeInDown" data-src="img/3.jpg" data-delay="120"></div>
-                <div class="padded"><img class="animated fadeInDown" data-src="img/4.jpg" data-delay="80"></div>
-                <div class="padded"><img class="animated fadeInDown" data-src="img/5.jpg" data-delay="40"></div>
+                <h3>Change the delay</h3><small>Use <code>data-delay="*"</code> on each element, where the wildcard is the delay in microseconds from the appearance of the previous element.</small>
+                <div class="row">
+                    <div class="padded"><img class="animate__fadeInDown" data-src="img/1.jpg" data-delay="0"></div>
+                    <div class="padded"><img class="animate__fadeInDown" data-src="img/2.jpg" data-delay="200"></div>
+                    <div class="padded"><img class="animate__fadeInDown" data-src="img/3.jpg" data-delay="160"></div>
+                    <div class="padded"><img class="animate__fadeInDown" data-src="img/4.jpg" data-delay="120"></div>
+                    <div class="padded"><img class="animate__fadeInDown" data-src="img/5.jpg" data-delay="80"></div>
+                </div><small><code>data-delay</code> is automatically converted to CSS animation delay.</small>
             </section>
             <section>
                 <section class="center">
                     <h3>Change the animation speed</h3><small>Use the speed classes from Animate.css to change the speed of the animation:</small>
-                    <div class="padded"><img class="animated bounceIn slower" data-src="img/1.jpg"><br><small>slower</small></div>
-                    <div class="padded"><img class="animated bounceIn slow" data-src="img/2.jpg"><br><small>slow</small></div>
-                    <div class="padded"><img class="animated bounceIn" data-src="img/3.jpg"><br><small></small></div>
-                    <div class="padded"><img class="animated bounceIn fast" data-src="img/4.jpg"><br><small>fast</small></div>
-                    <div class="padded"><img class="animated bounceIn faster" data-src="img/5.jpg"><br><small>faster</small></div>
+                    <div class="row">
+                        <div class="padded"><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__slower</code></small></div>
+                        <div class="padded"><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__slow</code></small></div>
+                        <div class="padded"><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"></small></div>
+                        <div class="padded"><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__fast</code></small></div>
+                        <div class="padded"><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__faster</code></small></div>
+                    </div>
+                    <div class="row">
+                        <div class="padded"><img class="animate__bounceIn animate__slower" data-src="img/1.jpg"></div>
+                        <div class="padded"><img class="animate__bounceIn animate__slow" data-src="img/2.jpg"></div>
+                        <div class="padded"><img class="animate__bounceIn" data-src="img/3.jpg"></div>
+                        <div class="padded"><img class="animate__bounceIn animate__fast" data-src="img/4.jpg"></div>
+                        <div class="padded"><img class="animate__bounceIn animate__faster" data-src="img/5.jpg"></div>
+                    </div>
                 </section>
                 <section class="center">
                     <h3>Inside fragments</h3>
-                    <p class="animated fadeIn">Like this <span class="animated fadeInDown faster" style="font-size: .8em">(click next)</span>:</p>
+                    <p class="animate__fadeInDown">Like this <span class="animate__fadeInDown animate__faster" style="font-size: .8em">(click next)</span>:</p>
                     <div class="fragment">
-                        <div class="padded"><img class="animated fadeInDown" data-src="img/1.jpg"></div>
-                        <div class="padded"><img class="animated fadeInDown" data-src="img/2.jpg"></div>
-                        <div class="padded"><img class="animated fadeInDown" data-src="img/3.jpg"></div>
-                        <div class="padded"><img class="animated fadeInDown" data-src="img/4.jpg"></div>
-                        <div class="padded"><img class="animated fadeInDown" data-src="img/5.jpg"></div>
+                        <div class="row">
+                            <div class="padded"><img class="animate__fadeInDown" data-src="img/1.jpg"></div>
+                            <div class="padded"><img class="animate__fadeInDown" data-src="img/2.jpg"></div>
+                            <div class="padded"><img class="animate__fadeInDown" data-src="img/3.jpg"></div>
+                            <div class="padded"><img class="animate__fadeInDown" data-src="img/4.jpg"></div>
+                            <div class="padded"><img class="animate__fadeInDown" data-src="img/5.jpg"></div>
+                        </div>
                     </div>
                 </section>
                 <section class="center" data-auto-animate>
@@ -82,38 +95,52 @@
                         <p class="animated fadeInUp">You can use any of the following events:</p>
                     </div>
                     <ul>
-                        <li class="animated fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
-                        <li class="animated fadeInLeft"><em>slidechanged</em> (with the transition)</li>
-                        <li class="animated fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
+                        <li class="animate__fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
+                        <li class="animate__fadeInLeft"><em>slidechanged</em> (with the transition)</li>
+                        <li class="animate__fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
                     </ul>
-                    <div><br><small class="animated fadeInUp">This can also be set per-slide with data-attributes.</small></div>
+                    <div><br><small class="animate__fadeInUp">This can also be set per-slide with data-attributes.</small></div>
                 </section>
             </section>
-            <section class="center" data-transition="convex-in fade-out" data-autoappear>
-                <h3>Autoappear mode</h3><small>Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation (with the option <code>autoappear</code>) or per slide (with <code>data-autoappear</code>).</small>
+            <section class="center" data-autoappear>
+                <h3>Autoappear mode</h3><small>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 <code>autoappear</code>) or per slide (with <code>data-autoappear</code>), like this slide.</small>
                 <ul>
                     <li>This is list item 1</li>
                     <li>This is list item 2</li>
                     <li>This is list item 3</li>
                 </ul>
             </section>
-            <section class="center" data-transition="convex-in fade-out">
+            <section class="center">
+                <h3>Animate.css animations</h3>
+                <p>Appearance supports the standard entrance/in animations that Animate.css offers. Some examples:</p>
+                <ul>
+                    <li class="small animate__backInDown" data-delay="0">.animate__backInDown</li>
+                    <li class="small animate__bounceInDown" data-delay="1000">.animate__bounceInDown</li>
+                    <li class="small animate__fadeInLeft" data-delay="1000">.animate__fadeInLeft</li>
+                    <li class="small animate__flipInX" data-delay="1000">.animate__flipInX</li>
+                    <li class="small animate__rotateIn" data-delay="1000">.animate__rotateIn</li>
+                    <li class="small animate__zoomInDown" data-delay="1000">.animate__zoomInDown</li>
+                    <li class="small animate__jackInTheBox" data-delay="1000">.animate__jackInTheBox</li>
+                </ul>
+            </section>
+            <section class="center">
                 <h3>Additional animations</h3>
                 <ul>
-                    <li class="animated skidLeft" data-delay="300">Appear with .skidLeft</li>
-                    <li class="animated skidLeftBig" data-delay="1000">Appear with .skidLeftBig</li>
-                    <li class="animated skidRight" data-delay="1000">Appear with .skidRight</li>
-                    <li class="animated skidRightBig" data-delay="1000">Appear with .skidRightBig</li>
-                    <li class="animated shrinkIn" data-delay="1000">Appear with .shrinkIn</li>
-                    <li class="animated shrinkInBlur" data-delay="1000">Appear with .shrinkInBlur</li>
+                    <li class="animate__skidLeft" data-delay="300">Appear with .animate__skidLeft</li>
+                    <li class="animated animate__skidLeftBig" data-delay="1000">Appear with .animate__skidLeftBig</li>
+                    <li class="animated animate__skidRight" data-delay="1000">Appear with .animate__skidRight</li>
+                    <li class="animated animate__skidRightBig" data-delay="1000">Appear with .animate__skidRightBig</li>
+                    <li class="animated animate__shrinkIn" data-delay="1000">Appear with .animate__shrinkIn</li>
+                    <li class="animated animate__shrinkInBlur" data-delay="1000">Appear with .animate__shrinkInBlur</li>
                 </ul>
             </section>
             <section class="center" data-transition="fade-in">
-                <h3>Thanks</h3>
+                <h3>Credits</h3>
                 <ul>
-                    <li class="animated fadeInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
-                    <li class="animated fadeInLeft">Daniel Eden for <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
-                    <li class="animated fadeInLeft">David Marby &amp; Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
+                    <li class="animate__fadeInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
+                    <li class="animate__fadeInLeft">Daniel Eden for <a href="https://animate.style" target="_blank">Animate.css</a></li>
+                    <li class="animate__fadeInLeft">David Marby &amp; Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
+                    <li class="animate__fadeInLeft">Photography by <a href="https://unsplash.com/photos/6WLGMivmV00" target="_blank">Michael Baird</a>, <a href="https://unsplash.com/photos/scwYrU5hCSM" target="_blank">Michael Quinn</a>, <a href="https://unsplash.com/photos/YoadQb46v6k" target="_blank">Craig Garner</a>, <a href="https://unsplash.com/photos/RlYsCMbF6EI" target="_blank">Grzegorz Mleczek</a> and <a href="https://unsplash.com/photos/9RqA6tnT0gA" target="_blank">Samuel Zeller</a>.</li>
                 </ul>
             </section>
         </div>
@@ -122,20 +149,17 @@
     <script src="plugin/appearance/appearance.js"></script>
     <script>
         Reveal.initialize({
-            transition: "convex",
+            transition: "slide",
             history: true,
             appearance: {
-                baseclass: "animated",
-                visibleclass: "in",
                 hideagain: true,
-                delay: 300,
-                appearevent: "slidetransitionend",
-                debug: true,
+                appearevent: "auto",
                 autoappear: false,
                 autoelements: {
-                    "ul li": "fadeInLeft",
-                    "ol li": "fadeInLeftRight"
-                }
+                    "ul li": "animate__fadeInLeft",
+                    "ol li": "animate__fadeInLeftRight"
+                },
+                compatibility: false
             },
             plugins: [
                 Appearance

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "reveal.js-appearance",
-    "version": "1.1.1",
-    "description": "A plugin for Reveal.js that adds appearance effects to elements",
-    "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects",
+    "version": "1.1.2",
+    "description": "A plugin for Reveal.js that sequentially adds appearance effects to elements like in Powerpoint",
+    "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects, powerpoint",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
     "repository": {
         "type": "git",
         "url": "https://github.com/Martinomagnifico/reveal.js-appearance.git"
     },
-    "peerDependencies": {
-        "reveal.js": "^4.0"
-    },
     "author": "Martijn De Jongh",
-    "license": "MIT, Copyright (C) 2021 Martijn De Jongh"
+    "license": "MIT, Copyright (C) 2022 Martijn De Jongh",
+    "peerDependencies": {
+        "reveal.js": "^4.2"
+    }
 }