typed

typed.js

A short description of the post.

Emil Hvitfeldt Hansen
05-11-2021

Animated self-typing can be a fun addition to your slides.

These examples use the Typed.js javascript library to animate the text. The repository includes a handful of good examples and a list of parameters.

Notes:

I found that you must use all the typed objects you create for them to work in xaringan. E.i. If you want to used .typed2[] you must have called .typed[] as well. Furthermore, you can only use each typed object once.

Result

Rmd

---
output:
  xaringan::moon_reader:
    includes:
      after_body: "typed.js"
    lib_dir: libs
    seal: false
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

# .typed[]

Lorem ipsum

---

.center[
# Thank you!

.typed2[]
]

```{r include=FALSE, echo=FALSE}
icon::fa()
```

typed.js

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

<script>
const typed = new Typed('.typed', {
  strings: [
    'Self typing text',
    'Only using <b>typed.js</b>'
  ],
  typeSpeed: 60,
  backSpeed: 20,
  cursorChar: '',
  loop: true
});

const typed2 = new Typed('.typed2', {
  strings: [
  "<i class='fab fa-github'/> Github_handle",
  "<i class='fab fa-twitter'/> Twitter_handle",
  "<i class='fab fa-linkedin'/> Linkedin_handle",
  "<i class='fas fa-laptop'/> my-website.com",
  ],
  typeSpeed: 50,
  backDelay: 2000,
  contentType: 'html',
  loop: true
});
</script>

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Hansen (2021, May 11). Xaringan Gallery: typed. Retrieved from https://xaringan.gallery/examples/typed/

BibTeX citation

@misc{hansen2021typed,
  author = {Hansen, Emil Hvitfeldt},
  title = {Xaringan Gallery: typed},
  url = {https://xaringan.gallery/examples/typed/},
  year = {2021}
}