Appearance

for Reveal.js

In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same.

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.

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 images appear

Change the delay

Use data-delay="*" on each element, where the wildcard is the delay in microseconds

Change the animation speed

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

slower

slow


fast

faster

Inside fragments

Like this (click next):

Change when Appearance starts

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 also be set per-slide with data-attributes.

Additional animations:

  • Appear with .skidLeft
  • Appear with .skidLeftBig
  • Appear with .skidRight
  • Appear with .skidRightBig
  • Appear with .shrinkIn
  • Appear with .shrinkInBlur

Thanks