Remark/Remarkpy Slides Animations

The presentation below shows how SVG graphics, animated with the GreenSock JavaScript tool set, can be included in a RemarkJS slide deck.

RemarkPy with the Tailwind theme selected, has been used to display this Remark-based presentation on the web-browser.

The object HTML tag defines an embedded object within an HTML document. It is used to include a variety of different kinds of media files into a document such as videos, audio, Java applets, ActiveX, PDF documents, animations.

In the example above the object element embeds another webpage into the HTML presentation. This extra HTML page contains an SVG graphics animated with the GSAP library, shown below.

The HTML-SVG animation can also be stored in Remarkpy's static folder, with the data attribute in the object tag set to:

   data = "static/files/html_with_animation.html"

The HTML file can be copied inside the static folder with the option Add static file.

Animate CSS

Animate CSS is a cross-browser animations library.

It's great for adding emphasis and attention-guiding hints in a markdown presentation.

Animate, like Tailwind, provides a set of classes that can be attached to the presentation's elements.

The entire slideshow can be downloaded here.