xaringanExtra-animate-css-attn-seekers.Rmd

---
title: "animate.css attention seekers with xaringanExtra"
author: "Garrick Aden-Buie"
output:
  xaringan::moon_reader:
    lib_dir: libs
    seal: false
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: true
---

layout: true
class: middle

---

```{r xe, echo=TRUE}
xaringanExtra::use_animate_css()
```

This works fine. Notice that the content inside the `[ ... ]` is on a new line.

.pull-left[
```
.animated.pulse.infinite[
## Hello there!
]
```
]

.pull-right[
.animated.pulse.infinite[
## Hello there!
]
]

---

But this doesn't work...

.pull-left[
```
Make this word
.animated.bounce.infinite[jump!]
```
]

.pull-right[
Make this word
.animated.bounce.infinite[jump!]
]

Notice that the content in the `[...]` is on the **same line**.

---

If we create a simple CSS class that makes an object **inline-block**,
then the animation will work. Drop this CSS into your slides and then add
`.dib` to the `.animated.<attn_seeker>.infinite` classes.


````markdown
```{css echo=FALSE}`r ''`
.dib { display: inline-block; }
```
````

```{css echo=FALSE}
.dib { display: inline-block; }
```

.pull-left[
```
Make this word
.animated.bounce.infinite.dib[jump!]
```
]

.pull-right[
Make this word .animated.bounce.infinite.dib[jump!]
]