Combines the manim library with reveal.js to create animated slides.
First install manim
Next get reveal.js and do the full setup (npm install
)
Then install the python package manim-reveal
located in this repository, by running following command
pip install .
Clone this repository, and run the following commands
cd python
manim example_slide_scene.py MathTest SimpleVideoSlide
This will create and copy the video and fragments files into the folder video_slides
for each SlideScene.
Copy the folders, video_slides
, js
and the file index.html
into a new reveal.js directory.
Finally run npm start
to start the presentation.
To create a new slide using manim, follow these steps
- Subclass
SlideScene
instead of theScene
class. - In the
CONFIG
add the parametervideo_slides_dir
. This should point to a folder calledvideo_slides
in your reveal.js directory. - In
contruct()
, add the function callself.slide_break()
whenever you want the presentation to pause. - Run the
manim
command on your python file. This will automatically update thevideo_slides
directory you specified in the config. - Add the following tag
<script src="js/add_video_slide.js" slide_scene="SimpleVideoSlide"></script>
instead of<section> ...</section>
in yourindex.html
. You have one such tag for each video slide. - Make sure you add the tag
<script src="js/video_slide.js"></script>
at the bottom of yourindex.html
. This only needs to be done once per index.html. This script is needed to make the video slide fragments work. - Run
npm start
, or refresh your browser if you have already started the server.
Below is a simple example of a video slide
from manimlib.imports import *
from manim_reveal import SlideScene
class SimpleVideoSlide(SlideScene):
CONFIG={
"video_slides_dir":"../video_slides"
}
def construct(self):
gamma = TexMobject("\gamma")
gamma.scale(5)
obj = Circle()
self.play(FadeIn(obj))
self.slide_break()
self.play(Transform(obj,gamma))
self.slide_break()
self.play(FadeOut(obj))
self.wait(1)
To uninstall the python package, run
pip uninstall manim_reveal