Animated elements in fragments

[Zimbelstern]

Hi, is there a setting to start the Appearance animation for a fragment not before the same fragment gets visible? At the moment, I have the problem, that the animation is already over when I tell reveal.js to show the fragment.

[Martinomagnifico]

I’ll take a look at it. Do you have an example?

[Zimbelstern]

Sure:

<div class="reveal">
    <div class="slides">
        <section>
            <p class="animate__bounceIn">First paragraph.</p>
            <p class="fragment animate__bounceIn">Second paragraph.</p>
        </section>
    </div>
</div>

The first paragraph bounces, the second one only if you are quick enough. ;-)

Here is the documentation for the fragments, in case you missed it: https://revealjs.com/fragments/

[Martinomagnifico]

I’ll probably be able to look at it next weekend. In the meantime you might split the classes so that the fragment is an element wrapping the p. That is how I usually do it, because both the fragment and the animate.css classes use transitions on the opacity. Having that at the same time gives unpredictable results.

[Zimbelstern]

Great, many thanks, that seems to work. Wouldn't this be applicable to all cases?

[Martinomagnifico]

Yes it would. In the demo I refer to the use of Appearance inside fragments. Having a set of such items where the parent (the fragment) is the first of them, does also not make sense in order. However, I do not document that well enough. That will be done in the next release, which also has improvements for use inside MarkDown.

[Zimbelstern]

Fragments already come with few animations (fade-left etc.) and I was simply looking for a way to add some more. That's where I needed the help of your plugin. But coming from this use case has caused some confusion. I don't use Markdown. Most of my slides are 100% SVG. Probably, I can embed every element to be animated in an extra group with the fragment class.

[Martinomagnifico]

Fragments can indeed have animations, but those work with transitions of certain properties, while Appearance uses ‘animation’. Mixing those is just unpredictable. I can 1) look into suppressing the transitions other than opacity for those situations, 2) improve docs and describe to not mix it, or 3) some combo of both in case people don’t read the docs.