Animations in jmpress

In the first part of this tutorial, I talked about how to use jmpress to create simple talks using html5. In this part I want to show you how to include animations in a slide. Animations in talks can be very useful to guide the audience through your talk, by highlighting the current information. Unfortunately adding animations in jmpress can be hard at times.

As a reference keep the official documentation at hand.

Animations are implement by CSS classes in jmpress and usually have three steps:

  1. The animation will occur, but has not yet
  2. It is currently running
  3. And finally, it has already run

Each of these steps is implemented by adding a CSS class to the element being animated. All animations have a name, which can be chosen arbitrarily, as long as it is a valid CSS identifier.

In the following I will walk you trough the steps of how to implement a custom fade animations, which is also implemented in the jmpress example.

Any element can be animated by adding the data-jmpress attribute. To fade out a part of text just wrap it in a span, as in

Hello <span data-jmpress="fade">world</span>

While presenting, the following css classes will be added to the element

  • will-fade: from the start
  • do-fade: once, the animation is running
  • has-fade: after the animation has run

So to implement a fade effect just define the correct css classes (you may need to add the correct browser prefixes)

.will-fade {
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 1.0;
}

.do-fade {
    opacity: 0.0;
}

The will-fade class informs the browser that any change of the opacity property should be animated and that this change should take half a second. The do-fade class makes sure that the opacity of the fading element is reduced to zero, while the animation is running. Note, that while the documentation says that the class is only set while the animation is running, it is not removed after the animation.

If there are multiple animations on each slide, the animations are run in the order they appear in the document. For example:

<span data-jmpress="fade">first</span>
<span data-jmpress="fade">second</span>

To customize this, additional properties can be added. I found, the most important options are:

  • (name) after (selector): run the animation after the animation of the element with the given selector has run
  • (name) after (time): run the animation after the given time
  • (name) after (time) (selector): run the animation with a given delay delay after the animation of the element given by selector has run.

There are two special selectors prev and step, which denote the previous element and the slide beginning repsectively. Per default always the previous animated element is used.

For example:

<span data-jmpress="fade after #first">Fade after</span>
<span id="first" data-jmpress="fade after step">this element</span>
<span data-jmpress="fade after 1s">delayed</span>

You can find a working html version of this example here. For more information especially about the available options for animations look at the documentation. In the next part I will discuss how to setup more complex animations using jmpress.