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

Note: The shrinkInBlur animation was removed from Appearance, due to performance issues. For backwards compatibility, any element that used it will now use the shrinkIn animation instead.

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 (auto)

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="animate__fadeInDown animate__slower" src="assets/img/1.jpg">
<img class="animate__fadeInDown animate__slow" src="assets/img/2.jpg">
<img class="animate__fadeInDown" src="assets/img/3.jpg">
<img class="animate__fadeInDown animate__fast" src="assets/img/4.jpg">
<img class="animate__fadeInDown 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)

This can be set per-slide with data-attributes, or 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

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

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

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

Local auto-appear

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

This is a list item

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

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

Local auto-appear, specified

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

This is list item 1
This is list item 2

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

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":"500ms"}, "h4": {"animation":"animate__fadeInUp baseline", "split":"letters", "delay":"80"}}'>
	<h3>Local auto-appear, specified and split</h3>
	<h4>Appearance</h4>
</section>

Options

hideagain
delay
appearevent
autoappear
autoelements
cssautoload
csspath
animatecsspath
compatibility
compatibilitybaseclass

Option 1: 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 2: 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 3: 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 4: 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 5: 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 6: 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 7: 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 8: animatecsspath

Appearance will also automatically load the styling of Animate.css via a CDN. Note that Animate.css has two links, the first (CDN) one is for version 4, the second (old) one is the version 3 compatibility CDN link.

Reveal.initialize({
    ...
    appearance: {
        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.1.1/animate.compat.css',
        }
    },
    plugins: [ Appearance ]
})

Option 9: compatibility

This setting is about the breaking changes in Animate.css (used by Appearance). See the migration guide in the Readme for more info.

Setting 'compatibility: true' can let you use your old markup.

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

Option 10: compatibilitybaseclass

This setting is about the breaking changes in Animate.css (used by Appearance). See the migration guide in the Readme for more info.

This is the baseclass to use if you don't change your markup.

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

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.