Package: manim-revealjs
Manim and Reveal.js plugins for using mathematical animations in your slidesThis project contains the required plugins to use the beautiful mathematical animations that are made possible byManimin presentation slides made withReveal.js. Manim was originally created by Grant Sanderson from the Youtube channel3B1Bwhich is well known for its pretty and clear mathematical animations.(This is a fork ofmanim_slideswhich itself is a fork ofmanim_reveal. Both repositories were created with the same goal as this repository, but since they do not seem to be actively maintained I created this repo for my own use)Update (27-11-2021):The project is now in a state where it's easy to set up and use it. If you're using it I'd love to hear about it :)InstallationThe Python package can be installed by running the commandpip install manim-revealjs. To start using the Revealjs plugin in your slide deck you only need to include a<script src="manim.js">in your HTML file. Themanim.jscan be copied into your working directory by calling the functionmanim_revealjs.plugin.export(). In theHow to usesection it will be explained how you can add Manim videos to your slide deck.Easy-to-use presentation templateTo make it really easy to create a new presentation that uses manim-revealjs, I have provided arepository that you can clone. You can edit the slides in any way you want, and then you can simply use python's built-in HTTP server to start your presentation. It requires no installation and the server can be started with one command:python -m http.server. If you then navigate tolocalhost:8000you will see your presentation.DemoOnce everything is installed you can run the demo that is provided in theexample-presentationdirectory. For more details you can read the README in that directory.How to use the pluginsTo add Manim animations to your presentation you first need to render them. In order to make the integration with Reveal.js as smooth as possible you can use the Manim plugin'sPresentationScene. There are no major differences with the normalScenethat you're used to, except for thePresentationScene'send_fragment()method. If this method is called in the scene'sconstruct()method it means there will be a pause in the animation when it is displayed in the slide deck.Important:everyconstruct()you defineneedsto end with anend_fragment()call to correctly handle the animation.Once the animations have been rendered, you can link them in your slide deck. Here you have two options: either you display the animations fullscreen as the background of a slide, or you add them along with the rest of the objects in your slides.If you want to go for the first option, the slide's<section>should be given thefv-backgroundclass (short forfragmented video class). Next you need to set itsfv-videoattribute to the video's url, and itsfv-playback-infoattribute to the url of the.jsonfile that was generated when you rendered the video. (This last file contains the timestamps of the different fragments of your video).If you want to go for the second option of embedding your video like any other slide content, you can simply add a<video>element with some extra attributes. Thesrcattribute should point to the video's url, just like for a normal video element. Thefv-playback-infoattribute should point to the generated.jsonfile. Finally you should add thefv-videoclass so the plugin can find your video automatically.The final thing that needs to be done is to tell Reveal to use the RevealManim plugin. All you need to do is to pass it into thepluginfield when you're initializing Reveal:Reveal.initialize({
    ...
    autoPlayMedia: false, //recommended setting, prevents all videos from playing automatically
    plugins: [ ..., RevealManim ]
});Once you've done this you are good to go! There are some more advanced options that you could look into such as animation looping, but this is all you need to add a simple animation to your slides.Fragment typesThe basic setup that was described in the last section are enough to show a simple animation. If you want more control over how your animations are played during your presentation, such as putting your videos on a loop, then this is a good section to go through. Theend_fragment()calls that define the video fragments can take an optional argument calledfragment_type. It can take on a number of values, each of which is quickly described below.(These fragment types are defined as constants in themanim_revealjspackage. I.e.manim_revealjs.NORMAL / LOOP / ...)NORMALwill play the fragment once from start to end. It's nothing special, but it's probably what you'll be using most of the time.LOOPwill continuously loop a fragment from start to end. This is useful when for turntables for example.COMPLETE_LOOPis similar to a normal loop fragment, but there is a difference in how it handles interruptions. If you want to go to the next fragment in the middle of the loop, then this will block that. Instead the loop will go on until it reaches the fragment's end, and only then will the animation continue to play the next fragment. This is useful if you want the transitions between your fragments to be smooth, to prevent your animations from looking chaotic.NO_PAUSEwill play the fragment once from start to end like a normal fragment, and then it will immediately go on to the next fragment. This effect can be useful if you want to create an intro for a loop for example.