# reveal.js-animate-fragments

> reveal.js plugin to automatically animate code and markdown

Latest version **0.1.5** (published 2023-10-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install reveal.js-animate-fragments
pnpm add reveal.js-animate-fragments
yarn add reveal.js-animate-fragments
bun add reveal.js-animate-fragments
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2023-10-02 |
| First published | 2022-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 21.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | guillem.cordoba@gmail.com |
| Maintainers | guillem.cordoba |

## Links

- npm: https://www.npmjs.com/package/reveal.js-animate-fragments
- npm.io page: https://npm.io/package/reveal.js-animate-fragments

## Dependencies (3)

- [marked](https://npm.io/package/marked.md) ^4.0.18
- [reveal.js](https://npm.io/package/reveal.js.md) =4.3.1
- [@mythosthesia/reveal-course-elements](https://npm.io/package/@mythosthesia/reveal-course-elements.md) ^0.1.0

## Recent versions

- 0.1.5 (latest) — 2023-10-02
- 0.1.4 — 2023-10-02
- 0.1.3 — 2023-09-28
- 0.1.2 — 2023-09-28
- 0.1.1 — 2023-09-04
- 0.1.0 — 2023-09-02
- 0.0.12 — 2022-07-13
- 0.0.11 — 2022-07-13
- 0.0.10 — 2022-07-13
- 0.0.9 — 2022-07-12
- 0.0.8 — 2022-07-12
- 0.0.7 — 2022-07-12
- 0.0.6 — 2022-07-12
- 0.0.5 — 2022-07-12
- 0.0.4 — 2022-07-12
- … 3 more at https://npm.io/package/reveal.js-animate-fragments/versions

## README

# reveal.js-animate-fragments

A [Reveal.js](https://revealjs.com/) plugin that adds new animations styles

## Installation

```bash
npm i reveal.js-animate-fragments
```

## Usage

Add the plugin:

```html
<script type="module">
  import RevealAnimate from "reveal.js-animate-fragments";

  import Reveal from "reveal.js";

  let deck = new Reveal({
    plugins: [RevealAnimate],
  });
  deck.initialize();
</script>
```

Animate options:

- `balanced`: whenever an opening delimiter is encountered, add the fragment with the balanced closing delimiter to the same animation fragment set as its corresponding opening line.

- `by-line`: splits each line of text (as rendered) from a block of html at the newlines
 - Wraps each line in a separate fragment.

- `separate-comments`
 - Comments are broken down into their own fragment.

- `trailing-comments-in-popover`
 - Whenever a line includes both non-comment code and a comment, the comment is extracted and shown in a first fragment as a popover, then the popover is hidden, and finally the comment is shown in a second fragment.
 - Hint: you can use `///` comments to avoid a popover in a specific comment.

- `with-ancestry`: all parent fragemnts are also visible.

- `strike-on-error-in-comment`: if a trailing comment starts with `// Error`, consider the line of code where the comment is placed an error, and add a strike fragment animation to that line of code.

```html
<section animate="by-line balanced separate-comments trailing-comments-in-popover with-ancestry strike-on-error-in-comment">
<pre><code class="rust">
struct Person {
  name: String, // Comment!
  age: u32
}
let immutable_var = 1;
immutable_var = 2; // Error
</code></pre>
</section>

<section language="markdown" animate="by-line with-ancestry">
- point 1
  - point 1b
- point 2   
</section>
```

## Compatibility with RevealHighlight

To work correctly, this plugin needs to be passed **before** `RevealHightlight` in the plugins array when initializing `Reveal`.

```js
import Reveal from "reveal.js";      
import Markdown from "reveal.js/plugin/markdown/markdown.esm.js";
import RevealHighlight from "reveal.js/plugin/highlight/highlight.esm.js";
import RevealAnimateFragments from "reveal.js-animate-fragments";

let deck = new Reveal({
  plugins: [Markdown, RevealAnimateFragments, RevealHighlight],
});
deck.initialize();
```

---
_Source: https://npm.io/package/reveal.js-animate-fragments · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._