PPTX
Transitions
Add slide transition effects such as fade, push, wipe, and more
Use the transition property on slide options to add animated effects when moving between slides.
Basic Transition
{
"slides": [
{
"children": [],
"transition": { "type": "fade", "speed": "med" }
}
]
}
{
children: [],
transition: { type: "fade", speed: "med" },
}
Slide Show Settings
Control presentation playback behavior with the show option on Presentation:
{
"show": {
"loop": true,
"useTimings": true
},
"slides": [
{
"children": [
{
"shape": {
"x": "0.0cm",
"y": "0.0cm",
"width": "5.3cm",
"height": "2.6cm",
"textBody": { "text": "Slide 1" }
}
}
]
}
]
}
import { generatePresentation } from "@office-open/pptx";
generatePresentation({
show: {
loop: true,
useTimings: true,
},
slides: [
{
children: [
{
shape: {
x: "0.0cm",
y: "0.0cm",
width: "5.3cm",
height: "2.6cm",
textBody: { text: "Slide 1" },
},
},
],
},
],
});
Show Options
| Property | Type | Description |
|---|---|---|
loop | boolean | Loop presentation continuously |
type | "present" | "browse" | "kiosk" | Show type (presented / browsed / kiosk) |
showScrollbar | boolean | Show scrollbar (browse mode) |
restart | number | Restart policy |
showNarration | boolean | Play narration during slide show |
showAnimation | boolean | Show animations while presenting |
useTimings | boolean | Use recorded timings if available |
slideRange | { start: number; end: number } | Limit show to a slide range |
penColor | string | Presenter pen color (srgbClr hex) |
Transition Types
Fade
transition: {
type: "fade";
}
Push
transition: { type: "push", direction: "right" }
// direction: "left" | "right" | "up" | "down"
Wipe
transition: { type: "wipe", direction: "down" }
Cover
transition: { type: "cover", direction: "right" }
Split
transition: { type: "split", orient: "horz", direction: "out" }
// orient: "horz" | "vert"
// direction: "in" | "out"
Wheel
transition: { type: "wheel", spokes: 4 }
Dissolve
transition: { type: "dissolve", speed: "slow" }
Random
transition: {
type: "random";
}
Transition Options
| Property | Type | Description |
|---|---|---|
type | TransitionType | Transition type |
speed | "slow" | "med" | "fast" | Transition speed |
direction | string | Direction (depends on type) |
orient | "horz" | "vert" | Orientation (split/blinds/checker) |
spokes | number | Number of spokes (wheel) |
advanceOnClick | boolean | Advance on mouse click |
advanceAfterTime | number | Auto-advance after milliseconds |
thruBlk | boolean | Fade/cut through black |
startSound | { rId; name?; loop? } | Sound played on transition start |
stopPreviousSound | boolean | Stop a previously playing sound |
Available Types
"fade" | "push" | "wipe" | "split" | "blinds" | "checker" | "comb" | "randomBar" | "cover" | "pull" | "strips" | "wheel" | "zoom" | "circle" | "dissolve" | "diamond" | "newsflash" | "plus" | "wedge" | "random" | "cut"
Full Example
{
"slides": [
{
"children": [
{
"shape": {
"x": "2.6cm",
"y": "4.0cm",
"width": "13.2cm",
"height": "2.6cm",
"textBody": { "text": "Welcome" },
"fill": "4472C4"
}
}
],
"transition": { "type": "fade", "speed": "med" }
},
{
"children": [
{
"shape": {
"x": "2.6cm",
"y": "4.0cm",
"width": "13.2cm",
"height": "2.6cm",
"textBody": { "text": "Content Slide" },
"fill": "ED7D31"
}
}
],
"transition": { "type": "push", "direction": "right", "speed": "slow" }
},
{
"children": [
{
"shape": {
"x": "2.6cm",
"y": "4.0cm",
"width": "13.2cm",
"height": "2.6cm",
"textBody": { "text": "Thank You" },
"fill": "70AD47"
}
}
],
"transition": { "type": "wipe", "direction": "down" }
}
]
}
{
slides: [
{
children: [
{
shape: {
x: "2.6cm",
y: "4.0cm",
width: "13.2cm",
height: "2.6cm",
textBody: { text: "Welcome" },
fill: "4472C4",
},
},
],
transition: { type: "fade", speed: "med" },
},
{
children: [
{
shape: {
x: "2.6cm",
y: "4.0cm",
width: "13.2cm",
height: "2.6cm",
textBody: { text: "Content Slide" },
fill: "ED7D31",
},
},
],
transition: { type: "push", direction: "right", speed: "slow" },
},
{
children: [
{
shape: {
x: "2.6cm",
y: "4.0cm",
width: "13.2cm",
height: "2.6cm",
textBody: { text: "Thank You" },
fill: "70AD47",
},
},
],
transition: { type: "wipe", direction: "down" },
},
],
}