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": "medium" }
}
]
}
{
children: [],
transition: { type: "fade", speed: "medium" },
}
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"
}
}
Wipe
{
"transition": {
"type": "wipe",
"direction": "down"
}
}
Cover
{
"transition": {
"type": "cover",
"direction": "right"
}
}
Split
{
"transition": {
"type": "split",
"orient": "horz",
"direction": "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" | "medium" | "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": "medium" }
},
{
"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: "medium" },
},
{
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" },
},
],
}