reveal.js-appearance GitHub Details, Stars and Alternatives | OpenRepoFinder
Martinomagnifico / repository
reveal.js-appearance
An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
72
Community adoption25% weight
39
Maintenance state20% weight
100
License clarity10% weight
100
Project information10% weight
100
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
Appearance
An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.
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.
Appearance will detect if it runs in a module environment and will then not autoload the CSS. You can still set cssautoload to true if you like, but your bundler (Vite, Webpack) may not like that. In any of these cases, import the CSS file yourself.
If you want to change the Appearance style, you can do a lot of that via the Reveal.js options. Or 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 or through import when using modules.
Custom CSS
If and when you decide to create your own CSS file, make sure that you also include the following CSS variable, that is used by the plugin to avoid loading the CSS multiple times, and to avoid using the autoloading feature when using modules:
:root {
--cssimported-appearance: true;
}
Setup
HTML
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. In the example below, you can see that the animation class is animate__bounceInLeft:
<ul>
<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 (or in any other case), 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 Autoappear below) and let Appearance do the heavy work.
Animating words and letters
To nicely animate the words in a heading, or the letters of a word, add an animation class to it, and add a data-attribute for the kind of split you want:
<h3 class="animate__fadeInDown" data-split="words">Let words appear word by word</h3>
<h3 class="animate__fadeInDown" data-split="letters">Let letters appear letter by letter</h3>
For words and letters, the same techniques can be used.
Note that the data-delay also gets copied to the smaller elements in it, which means that there is no more 'whole sentence' or 'whole word' to delay. By default, the whole element then gets the delay (depending on if it is following other animations) as defined in the delay option in the Configuration, but it can be overriden by an optional data-container-delay.
Also note the (optional) baseline class here, which makes the words appear from the baseline of the text.
<h3 class="animate__fadeInUp animate__faster baseline"
data-split="words"
data-delay="80"
data-container-delay="600">Let words appear word by word</h3>
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.
There are cases however, where there is hardly any transition, for example, when going from an autoanimate slide to another. Reveal then suppresses the user-set transition to a short opacity change. Starting together with the transition might then be nicer. You can use any of the following events:
slidetransitionend (default, Appearance will always start animating elements after the transition)
slidechanged (Appearance will always start together with the transition)
auto (Appearance will start together with the transition, but only on autoanimate slides, other slides will use slidetransitionend)
<section data-appearevent="auto">
<ul>
<li class="animate__fadeInLeft">This is list item 1</li>
<li class="animate__fadeInLeft">This is list item 2</li>
<li class="animate__fadeInLeft">This is list item 1</li>
</ul>
</section>
These same event triggers can be set through the appearevent option in the global configuration.
When using Appearance inside an autoanimate slide, and changing the appearevent to slidechanged or auto, keep in mind that Reveal transforms opacity for all non-autoanimate items, while Appearance does the same on most of the effects. To avoid strange behaviour, wrap these Appearance items in a parent. For example, a list of animated bullet points works well, because the animated class is on the children, not the parent. Separate headings or other elements do not have that, so should be wrapped.
Initial delay on page load
You can set a delay before animations start, but only on the initial page load or reloads (not when navigating between slides):
<section data-initdelay="2000">
<h3>Welcome</h3>
<p class="animate__fadeIn">This will appear 2 seconds after page load</p>
</section>
Autoappear
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 autoappear mode
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:
You can add any selector and animation class to this object. You can use a simple JSON object, or more elaborate like this (you can also mix them): {"ul li": {"animation":"animate__fadeInLeft", "speed":"slow", "delay":"100"}}. An object like that can contain the following keys:
initdelay: Delay before the first element of this type appears in milliseconds
container-delay: Delay before the first element in each container (when elements are in separate parent containers)
split: Split text into words (data-split="words") or letters (data-split="letters") for individual animation
where the last key is specific for word- and letter-animations.
If you choose to write all your animation selectors and properties globally, you no longer need to add any classes to the markup and it can stay like this:
<ul>
<li>Add it to any text element</li>
<li>Like list items, or headers.</li>
<li>It adds some attention.</li>
</ul>
or like this in Markdown:
* Add it to any text element
* Like list items, or headers.
* It adds some attention.
Local auto-appear
With the option autoappear set to false, the above still works, but only on a data-attribute basis. ONLY elements in the presentation that are inside sections or fragments with a data-attribute of data-autoappear will be animated automatically, with the selectors and animations as described in the configuration:
