In the last post, I dicussed how to use jmpress's animations. And while animations are quite flexible, there is no denying, that this flexibility makes things a bit harder for run-off-the-mill animations. For most of the time, I rely on a set of limited css classes for my talks, which I want to discuss in this post.
In the last post I discussed simple animations, as the fade animation, which hides or shows a single element. However, most of the time you want to hide an element to shown another. To achieve this you would normally chain one animations to the other by using a small delay, which cannot be zero due to an implementation detail of jmpress. As an example consider:
<span data-jmpress="fade">first</span>
<span data-jmpress="appear after 1ms prev">second</span>
While this certainly works, I missed the much more descriptive animation system of beamer. Finally I ended up setting up an pseudo animations, which merely acts as a marker to notify its children of the transitions. I dubbed the marker animation "two-step" and classes to indicate elements which are only visible on one step or the other.
Then the above animation could have been written as:
<span data-jmpress="two-step">
<span class="step-fade">first</span>
<span class="step-appear">second</span>
</span>
Ok, I have to admit, for two elements there is not such a huge advantage. However, this technique scales nicely if you have multiple elements on a slide which need to be removed and added. Especially if those elements are scattered all over the slide. For example:
<span data-jmpress="two-step">
<ul class="forward-step">
<li class="only-1">First</li>
<li class="only-2">Second</li>
</ul>
<div class="only-1">First div</div>
<div class="only-2">Second div</div>
</span>
Note, the forward-step class on the ul element. I defined the only-* classes such, that the have to be preceded by an two-step element. This way you can nest multiple two-step elements, but to animate a nested element, you have to add the forward-step element to each level.
You can find all of the above examples in the this presentation.
Obviously generating the needed css rules can become quite cumbersome, especially if you need multiple levels of forwards. To simplify this task, I wrote a simple python script to generate the needed rules. Have a look at it here.