Auto Animate

This feature is a wrapper of reveal.js auto-animate feature.

Since your AsciiDoc file is transformed into an HTML5 presentation, you can define Asciidoctor attributes and options to configure the reveal.js auto-animate feature. Under the hood, these settings are mapped to custom HTML data attributes.

For boolean settings (true when present, false when omitted), use Asciidoctor options, such as %auto-animate.

For settings that take a specific value, use Asciidoctor attributes, such as auto-animate-easing=ease-in-out.

Enable auto-animate

To enable the reveal.js auto-animate feature, you can add the %auto-animate option on adjacent elements.

In the following example, we are using the %auto-animate option on two adjacent sections:

[%auto-animate]
== !

Matched element will be animated automatically!

[%auto-animate]
== !

[.highlight]
Matched element will be animated automatically!

And move to the right position!

[%hardbreaks]
⬆️
⬆️
⬆️

Source blocks

Here’s a complete example:

[%auto-animate]
== !

[source%linenums,js,data-id=planets]
----
let planets = [
  { name: 'mars', diameter: 6779 },
]
----

[%auto-animate]
== !

[source%linenums,js,data-id=planets]
----
let planets = [
  { name: 'mars', diameter: 6779 },
  { name: 'earth', diameter: 12742 },
  { name: 'jupiter', diameter: 139820 }
]
----

[%auto-animate]
== !

[source%linenums,js,data-id=planets]
----
let circumferenceReducer = ( c, planet ) => {
  return c + planet.diameter * Math.PI;
}

let planets = [
  { name: 'mars', diameter: 6779 },
  { name: 'earth', diameter: 12742 },
  { name: 'jupiter', diameter: 139820 }
]

let c = planets.reduce( circumferenceReducer, 0 )
----

Control unmatched element animation

By default, no matching element will fade in. You can make them appear instantly using auto-animate-unmatched=false.

[%auto-animate,auto-animate-unmatched=false]
== Unmatched

Introduction. (matched)

[%auto-animate,auto-animate-unmatched=false]
== Unmatched

Introduction. (matched)

This will be shown instantly ⚡ (unmatched)

Set animation duration

You can set the auto-animate-duration attribute to control the animation duration:

[%auto-animate,auto-animate-duration=5]
== Duration

This animation...

[%auto-animate,auto-animate-duration=5]
== Duration

This animation...

...will take 5 seconds! ⌚

Animation group

You can separate groups of auto-animated slides with the auto-animate-id attribute so that they stay distinct from one another. Auto-animation occurs between adjacent slides that share the same group, or that both have none.

The %auto-animate-restart option prevents auto-animation from the previous slide, even when they share the same id.

The example below illustrates auto-animate-restart usage:

[%auto-animate]
== !

First Item

[%auto-animate]
== !

First Item

Second Item

[%auto-animate%auto-animate-restart]
== !

First Item

Second Item

Third Item (restart)

[%auto-animate]
== !

First Item

Second Item

Third Item (restart)

Fourth Item

Set animation easing function

The Asciidoctor attribute auto-animate-easing is used to control the speed of the transition. You can use any value supported by transition-timing-function.

Here’s an example using the value ease-in-out:

[%auto-animate,auto-animate-easing="ease-in-out"]
== Easing In Out

🏓 Ping?

[%auto-animate,auto-animate-easing="ease-in-out"]
== Easing In Out

🏓 Ping?

Pong! 🏓

[%auto-animate,auto-animate-easing="ease-in-out"]
== Easing In Out

🏓 Ping?

Pong! 🏓

🏓 Ping?

[%auto-animate,auto-animate-easing="ease-in-out"]
== Easing In Out

🏓 Ping?

Pong! 🏓

🏓 Ping?

Pong! 🏓