Include Manim videos

In this section, we assume familiarity with Manim, a library for creating mathematical animations. Visit the docs otherwise!

Include a full video

Including Manim videos is relatively straightforward in Slipshow, since Manim outputs videos, and videos can be included in a Slipshow presentation.

Suppose for instance that you have a Manim file like this:

from manim import *

class AnimatedSquareToCircle(Scene):
    def construct(self):
        circle = Circle()  # create a circle
        square = Square()  # create a square

        self.play(Create(square))  # show the square on screen
        self.play(square.animate.rotate(PI / 4))  # rotate the square
        self.play(Transform(square, circle))  # transform the square into a circle
        self.play(
            square.animate.set_fill(PINK, opacity=0.5)
        )  # color the circle on screen

In order to turn that into a video, you can do

$ manim -hm main.py AnimatedSquareToCircle

A video file will be generated in media/videos/main/720p30/AnimatedSquareToCircle.mp4 (the path may depend on the resolution). You can include this file in a Slipshow presentation simply with Markdown image syntax ![](path/to/file.mp4), and play it with the play-media action. For instance:

![](media/videos/main/720p30/AnimatedSquareToCircle.mp4){#square-to-circle width=100%}

{focus=square-to-circle}

{play-media=square-to-circle}

Pauses within a video

You might want to program pauses in the video, to account for your speech, or questions from the audience. You can do so using the “section” mechanism from Manim.

If you include sections, in your animation, Manim will render one file per section. For instance, if you update the file above to the following:

from manim import *

class AnimatedSquareToCircle(Scene):
    def construct(self):
        circle = Circle()  # create a circle
        square = Square()  # create a square

        self.next_section("square")
        self.play(Create(square))  # show the square on screen
        self.play(square.animate.rotate(PI / 4))  # rotate the square

        self.next_section("transformation")
        self.play(Transform(square, circle))  # transform the square into a circle

        self.next_section("circle")
        self.play(
            square.animate.set_fill(PINK, opacity=0.5)
        )  # color the circle on screen

And compile it with:

$ manim --save_sections -hm main.py AnimatedSquareToCircle

Then, Manim will generate one file per section, using the (optional) name you gave to the sections:

$ ls media/videos/main/720p30/sections
AnimatedSquareToCircle_0000_square.mp4
AnimatedSquareToCircle_0001_transformation.mp4
AnimatedSquareToCircle_0002_circle.mp4
AnimatedSquareToCircle.json

All we have to do in Slipshow is add the separate files, and make them look like they are a single video with pauses. We’ll put them in a carousel to make that work well:

{carousel .carousel-fixed-size #c}
> ![](media/videos/main/720p30/sections/AnimatedSquareToCircle_0000_square.mp4){#v1 width=100%}
>
> ![](media/videos/main/720p30/sections/AnimatedSquareToCircle_0001_transformation.mp4){#v2 width=100%}
>
> ![](media/videos/main/720p30/sections/AnimatedSquareToCircle_0002_circle.mp4){#v3 width=100%}

{play-media=v1}

{change-page=c play-media=v2}

{change-page=c play-media=v3}
Editor
Presentation
Both
⛶