Appearance

for Reveal.js

Why?

In Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result.

Appearance is easy to set up. It uses Animate.css 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.
Like list items, or headers.
It adds some impact.

Let lines appear per word

or… per character.

Let images appear

Use with fragments

Inside fragments like this (click next):

Or as a fragment itself.

Animate.css animations

Appearance supports the standard entrance/in animations that Animate.css offers. Some examples:

.animate__bounceInDown
.animate__fadeInLeft
.animate__flipInX
.animate__rotateIn
.animate__zoomInDown
.animate__jackInTheBox

Additional animations

.animate__skidLeft
.animate__skidLeftBig
.animate__skidRight
.animate__skidRightBig
.animate__shrinkIn
.animate__shrinkInBig

Setup

Basics

There are really only three steps:

Install Appearance
Edit the markup to add animation classes
Enjoy the animations

JavaScript

Load the script and make a reference to it in the Reveal plugin options:

<script src="plugin/appearance/appearance.js"></script>
<script>
	Reveal.initialize({
		plugins: [ Appearance ]
	});
</script>

Markup (automatic or manual)

For automatic markup, you can use the autoappear option.

For manual markup, continue to the next slide.

Markup (manual)

Add an animation class to the elements that you would like to have animated when the slide appears:

<img class="animate__fadeInDown" src="assets/img/1.jpg">
<img class="animate__fadeInDown" src="assets/img/2.jpg">

Check the Markdown demo to see how you do this in Markdown. A Quarto extension can be found here.

Markup (manual) for words or letters

Add an animation class to the sentence or word that you want to split into its parts, and add a data-attribute for the kind of split you want:

<h3 class="animate__fadeInDown" data-split="words">Split into words</h3>
<h3 class="animate__fadeInDown" data-split="letters">Split into letters</h3>

Now change it

You can change the delay, speed and start of animations easily:

Change the delay

Use data-delay="*" on each element, where the wildcard is the delay in microseconds from the appearance of the previous element.

<img class="animate__fadeInDown" data-delay="0" src="assets/img/1.jpg">
<img class="animate__fadeInDown" data-delay="200" src="assets/img/2.jpg">
<img class="animate__fadeInDown" data-delay="160" src="assets/img/3.jpg">
<img class="animate__fadeInDown" data-delay="120" src="assets/img/4.jpg">
<img class="animate__fadeInDown" data-delay="80" src="assets/img/5.jpg">

data-delay is automatically converted to CSS animation delay.

Change the animation speed

Use the speed classes from Animate.css to change the speed of the animation:

.animate__slower.animate__slow.animate__fast.animate__faster

<img class="aanimate__bounceIn animate__slower" src="assets/img/1.jpg">
<img class="animate__bounceIn animate__slow" src="assets/img/2.jpg">
<img class="animate__bounceIn" src="assets/img/3.jpg">
<img class="animate__bounceIn animate__fast" src="assets/img/4.jpg">
<img class="animate__bounceIn animate__faster" src="assets/img/5.jpg">

Change the settings for words or letters

For words and letters, just set the speed and delay as described above. The smaller parts will inherit these settings. Set a data-container-delay="*" for a different delay for the container, compared to the standard delay = 300 from the options. Add a baseline class for a nice baseline effect.

Split into words

Split into letters

<h3 class="animate__fadeInUp baseline" data-split="words">Split into words</h3>
<h3 class="animate__fadeInUp animate__faster" data-split="letters" data-delay="75" data-container-delay="800">Split into letters</h3>

Change when Appearance starts

You can use any of the following events:

slidetransitionend (default, after the transition)
slidechanged (with the transition)
auto (with transition, on autoanimate slides)

<section data-appearevent="auto">

This can be set per-slide with data-appearevent, or globally in the Appearance options.

Change the initial delay

This delay is triggered when a slide is loaded/reloaded for the first time.

When you came to this slide, you probably came from the previous slide so the initial delay was NOT applied. Reload your browser to see the effect. The first image will then only appear after 3 seconds.

<section data-initdelay="3000"> ... </section>

This can also be set globally in the Appearance options.

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

This is list item 1
This is list item 2

<ul>
	<li>This is list item 1</li>
	<li>This is list item 2</li>
</ul>

Reveal.initialize({
	// ...
	appearance: {
		autoappear: true,
		autoelements: {"ul li": "animate__fadeInLeft"}
	}
	// ...

You can use a simple object, or more elaborate like this: '{"ul li": {"animation":"animate__fadeInLeft", "speed":"slow", "delay":"100"}}'.

Local auto-appear

This will use the object (or JSON string) from the global autoelements option, even if autoappear is false.

This is a list item

<section data-autoappear="true">
	<ul>
		<li>This is a list item</li>
	</ul>
</section>

Reveal.initialize({
	// ...
	appearance: {
		autoappear: false,
		autoelements: {"ul li": "animate__fadeInLeft"}
	}
	// ...

Local auto-appear, specified

You can also add JSON to the slide’s data-autoappear, with elements, their animations class(es) as a string or an object with animations class(es), optional speed and optional delay.

This is a list item

<section data-autoappear='{"ul li":"animate__fadeInRight", "h3": {"animation":"animate__fadeInDown", "speed":"slow" }}'>
	<h3>Local auto-appear, specified</h3>
	<ul>
		<li>This is a list item</li>
	</ul>
</section>

Appearance lets you use single quotes in JSON even though not valid: data-autoappear="{'ul li':'animate__fadeInRight'}". This is because Reveal-Markdown only allows double quotes for its data-attributes (encoding your double quotes is also good, but that is a lot more work).

Local auto-appear, specified and split

And you can do the same for any animations that you would like to have on lines and words.

Appearance

<section data-autoappear='{"h3": {"animation":"animate__fadeInDown", "speed":"fast", "delay":"180", "split":"words", "container-delay":"200"}, "h4": {"animation":"animate__fadeInUp baseline", "split":"letters", "delay":"80", "container-delay":"200"}}'>
	<h3>Local auto-appear, specified and split</h3>
	<h4>Appearance</h4>
</section>

Container-aware delays

When you have multiple groups of elements in separate containers, container-delay applies to the first element in each container, while delay applies between elements within the same container. In the example below, the delay is the standard 300ms from the global options.

<section data-autoappear='{"img.test": {"animation":"animate__fadeInDown", "container-delay":"1200"}}'>
    <h3>Container-aware delays</h3>
    <div class="row">
        <img class="test" src="assets/img/1.jpg">
        ... other images ...
    </div>
</section>

Options

In alphabetical order

appearevent
autoappear
autoelements
cssautoload
csspath
delay
hideagain
initdelay

Option 1: appearevent

You can change when Appearance starts with any of the following events: slidetransitionend (default, after the transition), slidechanged (with the transition) and auto (with transition, on autoanimate slides). This can be overridden per-slide with data-attributes, like this: data-appearevent="auto".

Reveal.initialize({
    ...
    appearance: {
        appearevent: slidetransitionend
    },
    plugins: [ Appearance ]
})

Option 2: autoappear

The autoappear option works together with the autoelements option. When it is set to true, any elements in the autoelements option will animate with the declared animation when the slide or fragment opens. See autoappear.

Reveal.initialize({
    ...
    appearance: {
        autoappear: false,
        autoelements: false
    },
    plugins: [ Appearance ]
})

Option 3: 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.

Reveal.initialize({
    ...
    appearance: {
        autoappear: false,
        autoelements: false
    },
    plugins: [ Appearance ]
})

Option 4: cssautoload

Appearance will load the CSS if this is set to true.

Reveal.initialize({
    ...
    appearance: {
        cssautoload: true
    },
    plugins: [ Appearance ]
})

If you import reveal.js-appearance from npm, you will need to import the CSS file yourself. If you use 'import', then csspath should be set to false. If you know the path to the CSS file, you can use the csspath option and keep cssautoload set to true.

Option 5: 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.

Reveal.initialize({
    ...
    appearance: {
        csspath: ''
    },
    plugins: [ Appearance ]
})

Option 6: delay

The delay option is the base time in ms between appearances. This value governs any elements that do not have an Animate.css speed class assigned to it, or are not inside a slide which includes delay in a data-autoappear attribute.

Reveal.initialize({
    ...
    appearance: {
        delay: 300
    },
    plugins: [ Appearance ]
})

Option 7: hideagain

The hideagain option will hide elements (that have appeared on the slide) again when moving away from that slide.

Reveal.initialize({
    ...
    appearance: {
        hideagain: true
    },
    plugins: [ Appearance ]
})

Option 8: initdelay

The initdelay option sets a delay in milliseconds before any animations start, but only on the initial load/reload (not when navigating). Can be overridden per-slide with data-initdelay="2000".

Reveal.initialize({
    ...
    appearance: {
        initdelay: 0
    },
    plugins: [ Appearance ]
})

Set to 0 by default (no delay). Useful values are typically between 300-1000ms.

Credits

Hakim El Hattab for Reveal.js
Daniel Eden for Animate.css
David Marby & Nijiko Yonskai for picsum.photos
Photography by Michael Baird, Michael Quinn, Craig Garner, Grzegorz Mleczek and Fabrice Villard.