Auto Animate

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

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

For boolean attributes which means true if you set it, or false if you omit it, you should use Asciidoctor options, such as: %auto-animate.

For reveal.js settings which need to set specific values, you can 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, which will distinct from each other by using the auto-animate-id attribute. Auto animation occurs in adjacent slides of the same group or both don’t have one.

The %auto-animate-restart option will prevent auto-animate between the previous slide (even if they have 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! 🏓