Include Manim videos

In this section, we assume familiarity with Manim, the library to create 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 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 ![](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}

Having pauses in the middle of 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

So, in only remains to add separate files, and make them look like they are a single video. We’ll simply put them in a carousel.

{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
⛶