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
<link rel="stylesheet" href="latex-animation/animate_latex.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-path-properties.min.js"></script>
<script src="latex-animation/SVGProcessing.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<script src="latex-animation/Animate_SVGs.js"></script>Note. Do not import MathJax before these scripts as it will process your equations before they can be animated.
To add animated LaTeX, use the <eq> tag and place LaTeX inside it. For example,
<eq>
\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}
</eq>Standard.Animation.mp4
or for more advanced usage (and using fragments),
<eq class="fragment" data-gradient='["red", "gold"]' data-color-precess="true">
\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}
</eq>Red.to.Gold.Gradient.mp4
align environments are also supported. For example,
<eq>
\begin{align*}
\nabla \cdot \mathbf{E} &= 0 \\
\nabla \cdot \mathbf{B} &= 0
\end{align*}
</eq>If you want to customize the animation, there are a number of parameters in the form of data- attributes.
The increment of time (in seconds) between each stroke.
<eq data-speed="0.3">
...
</eq>Any number of colors
<eq data-gradient='["red", "gold"]'>
...
</eq>Red.to.Gold.Gradient.mp4
The gradient precesses in a loop.
<eq data-gradient='["red", "gold"]' data-color-precess="true">
...
</eq>Colour.Precession.mp4
Add a delay (in seconds) to the start of the animation.
<eq data-delay='1'>
...
</eq>