Implement auto-animate id and restart

[coffeenotfound]

This PR implements both data-auto-animate-id and data-auto-animate-restart, allowing for finer control of auto animate.

• When at least one of two successive data-auto-animate slides has a data-auto-animate-id attribute, both need to have the same attribute value in order for auto animate to trigger
• When a data-auto-animate slide has a data-auto-animate-restart attribute, auto animate does not trigger on the transition between the previous slide and it, but does trigger on the transition between it and the next slide. data-auto-animate-restart always negatively overrides auto animate, even breaking two slides with the same data-auto-animate-id apart. Note that "previous" and "next" are meant physically, so "previous" always means a slide to the left or the top of the current one and "next" always means a slide to the right or the bottom instead of "previously shown slide" and "next slide to show" (which might go in any direction, breaking data-auto-animate-restart which isn't symmetric)

This design is rather flexible and doesn't introduce a breaking change (apart from new attribute names being used by reveal.js): data-auto-animate slide pairs without data-auto-animate-id and data-auto-animate-restart behave just like before

Why both data-auto-animate-id and data-auto-animate-restart, wouldn't one be enough?
In theory yes, but I think having both is handy. Only data-auto-animate-restart would result in an unreadable hell for any non-trivial presentations with multiple auto-animate groups right next to each other and requires a lot of attention to not accidentally mess up the exact break points. While only having data-auto-animate-id would require annotating possibly two dozen slides with a different id when all you want is one simple auto animate break in the middle.

Examples: (Slide pairs with different letters won't auto animate)

<section data-auto-animate>A1</section>
<section data-auto-animate>A2</section>
<section data-auto-animate data-auto-animate-restart>B1</section>
<section data-auto-animate>B2</section>

<section data-auto-animate data-auto-animate-id="a">A1</section>
<section data-auto-animate data-auto-animate-id="a">A2</section>
<section data-auto-animate>B1</section>
<section data-auto-animate>B2</section>
<section data-auto-animate data-auto-animate-id="c">C1</section>
<section data-auto-animate data-auto-animate-id="c">C2</section>

<section data-auto-animate data-auto-animate-id="a">A1</section>
<section data-auto-animate data-auto-animate-id="a">A2</section>
<section data-auto-animate data-auto-animate-id="b">B1</section>
<section data-auto-animate data-auto-animate-id="b">B2</section>

<section data-auto-animate data-auto-animate-id="1">A1</section>
<section data-auto-animate data-auto-animate-id="1">A2</section>
<section>
    <section data-auto-animate data-auto-animate-id="2">Vertical B1</section>
    <section data-auto-animate data-auto-animate-id="2">Vertical B2</section>
    <section data-auto-animate data-auto-animate-id="2" data-auto-animate-restart>Vertical C1</section>
    <section data-auto-animate data-auto-animate-id="2">Vertical C2</section>
</section>
<section data-auto-animate>D1</section>
<section>E1</section>

[hakimel]

This is a great addition—thanks @coffeenotfound!

Would you mind adding this to the docs at https://revealjs.com/auto-animate/ as well? The source file here:
https://github.com/reveal/revealjs.com/blob/master/src/auto-animate.md

[coffeenotfound]

@hakimel Sure! I'll open a PR in the next few days

[coffeenotfound]

Sorry for the delay on the docs :(
Had a lot to do the past days but I'll get to them hopefully in the next days

[hakimel]

No rush at all—please take your time :)

[simonpeters]

Any chance this is also getting added to slides.com? Would be really useful!

Cheers

[hakimel]

Just added support for data-auto-animate-restart in Slides. It appears at the bottom of the auto-animate UI when there is at least one prior adjacent auto-animated slide.