animate.css Attention seekers

[mchiapello]

Hello @gadenbuie and thank you for the amazing package!

Is it possible use the "Attention seekers" animations in xaringan presentations? If yes, could you please explain me how?

Thank you, M

[gadenbuie]

It's possible but it does take a little tweaking, depending on how you want to use the attention seekers. Here are some xaringan slides that show you a solution (also here as a gist).

---
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.

```{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!] ]