PPTX

Transitions

Add slide transition effects such as fade, push, wipe, and more

Use Transition to add animated effects when moving between slides during a presentation.

Basic Transition

import { Slide, Transition } from "@office-open/pptx";

new Slide({
    children: [],
    transition: new Transition({
        type: "fade",
    }),
});

Transition Types

Fade

new Transition({ type: "fade" });

Push

new Transition({ type: "push", dir: "left" });
// dir: "left" | "right" | "up" | "down"

Wipe

new Transition({ type: "wipe", dir: "right" });

Cover

new Transition({ type: "cover", dir: "right" });

Split

new Transition({ type: "split", dir: "horizontalOut" });

Reveal

new Transition({ type: "reveal", dir: "down" });

Random

new Transition({ type: "random" });

Transition Options

new Transition({
    type: "fade",
    duration: 1000, // Duration in milliseconds
    // advanceOnClick: true,  // Advance on mouse click (default: true)
    // advanceAfter: 5000,    // Auto-advance after 5 seconds
});

Full Example

import {
    Presentation,
    Slide,
    Shape,
    Paragraph,
    TextRun,
    Transition,
    Packer,
} from "@office-open/pptx";
import fs from "node:fs";

const pres = new Presentation({
    slides: [
        new Slide({
            children: [
                new Shape({
                    x: 1,
                    y: 2,
                    width: 8,
                    height: 2,
                    paragraphs: [
                        new Paragraph({
                            alignment: "center",
                            children: [new TextRun({ text: "Welcome", fontSize: 40, bold: true })],
                        }),
                    ],
                }),
            ],
            transition: new Transition({ type: "fade", duration: 800 }),
        }),
        new Slide({
            children: [
                new Shape({
                    x: 1,
                    y: 2,
                    width: 8,
                    height: 2,
                    paragraphs: [
                        new Paragraph({
                            alignment: "center",
                            children: [new TextRun({ text: "Content Slide", fontSize: 36 })],
                        }),
                    ],
                }),
            ],
            transition: new Transition({ type: "push", dir: "left", duration: 600 }),
        }),
        new Slide({
            children: [
                new Shape({
                    x: 1,
                    y: 2,
                    width: 8,
                    height: 2,
                    paragraphs: [
                        new Paragraph({
                            alignment: "center",
                            children: [
                                new TextRun({ text: "Thank You", fontSize: 40, bold: true }),
                            ],
                        }),
                    ],
                }),
            ],
            transition: new Transition({ type: "wipe", dir: "right", duration: 1000 }),
        }),
    ],
});

const buffer = await Packer.toBuffer(pres);
fs.writeFileSync("transitions.pptx", buffer);