https://github.com/cianlm/reveal-animated-latex

Animated LaTeX in a reveal.js Presentation
https://github.com/cianlm/reveal-animated-latex

Last synced: about 2 months ago
JSON representation

Animated LaTeX in a reveal.js Presentation

• Host: GitHub
• URL: https://github.com/cianlm/reveal-animated-latex
• Owner: CianLM
• License: gpl-2.0
• Created: 2023-12-09T02:36:31.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-25T09:36:54.000Z (4 months ago)
• Last Synced: 2024-08-25T10:40:25.093Z (4 months ago)
• Language: JavaScript
• Size: 231 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

  

  
Reveal.js with Animated LaTeX



## Setup

Assuming you have reveal.js setup, clone this repository and place the `latex-animation` directory at the root of the project.

Then place the following scripts **after** reveal has initialized (`Reveal.initialize()`) in your HTML file

```js

```

**Note**. Do not import MathJax before these scripts as it will process your equations before they can be animated. 

## Usage

To add animated LaTeX, use the `` tag and place LaTeX inside it. For example,

```HTML

  

    \mathcal{L}=F_{\mu\nu}F^{\mu\nu}+\gamma\sqrt{(F_{\mu \nu}F^{\mu \nu})^2+(F_{\mu\nu}\tilde{F}^{\mu\nu})^2}

  

```

https://github.com/CianLM/reveal-animated-latex/assets/67507781/f14af133-958b-436e-97a0-9eb38feebb8a

or for more advanced usage (and using fragments),

```HTML

  

    \mathcal{L}=F_{\mu\nu}F^{\mu\nu}+\gamma\sqrt{(F_{\mu \nu}F^{\mu \nu})^2+(F_{\mu\nu}\tilde{F}^{\mu\nu})^2}

  

```

https://github.com/CianLM/reveal-animated-latex/assets/67507781/7fda5e2e-8297-4b31-92e8-6f764e0a2124

`align` environments are also supported. For example,

```HTML

  \begin{align*}

      \nabla \cdot \mathbf{E} &= 0 \\

      \nabla \cdot \mathbf{B} &= 0

  \end{align*}

```

## Options

If you want to customize the animation, there are a number of parameters in the form of `data-` attributes.

### Animation Speed (data-speed)

The increment of time (in seconds) between each stroke.

```HTML

  ...

```

### Color/Color Gradient (data-gradient)

Any number of colors $n \geq 1$ is accepted (as well as rgb/hex values).

```HTML

  ...

```

https://github.com/CianLM/reveal-animated-latex/assets/67507781/7fda5e2e-8297-4b31-92e8-6f764e0a2124

### Color Precession (Experimental)

The gradient precesses in a loop.

```HTML

  ...

```

https://github.com/CianLM/reveal-animated-latex/assets/67507781/f76f6509-2c8d-422b-b83a-fc86ca48d15d

### Animation Delay

Add a delay (in seconds) to the start of the animation.

```HTML

  ...

```