PPTX

Animations

Add entrance, exit, emphasis, and motion path animations to shapes

Add animation effects to shapes to control how they appear and behave during a presentation.

Basic Usage

Animations are set directly on shapes via the animation property:

import { Shape } from "@office-open/pptx";

new Shape({
    x: 1,
    y: 1,
    width: 6,
    height: 3,
    text: "Animated shape",
    animation: {
        type: "fade",
        duration: 800,
    },
});

Animation Types

Entrance Animations (`class: "entr"`, default)

Type	Description	Supported Directions
`appear`	Instantly appear	—
`fade`	Fade in	—
`fly`	Fly in from edge	`left`, `right`, `up`, `down`
`wipe`	Wipe in from edge	`left`, `right`, `up`, `down`
`dissolve`	Dissolve in	—
`split`	Split in	`horizontal`, `vertical`
`blinds`	Blinds effect	`horizontal`, `vertical`
`checker`	Checkerboard	`horizontal`, `vertical`
`randomBars`	Random bars	`horizontal`, `vertical`
`wheel`	Wheel spokes	—
`zoom`	Zoom in	—
`cover`	Cover from edge	`left`, `right`, `up`, `down`
`push`	Push from edge	`left`, `right`, `up`, `down`
`strips`	Strips from corner	`left`, `right`, `up`, `down`

Exit Animations (`class: "exit"`)

Same types as entrance, but with class: "exit":

animation: { type: "fade", class: "exit", duration: 800 }
animation: { type: "fly", class: "exit", direction: "right" }

Emphasis Animations (`class: "emph"`)

`emphasisType`	Description
`growShrink`	Scale up then back
`spin`	Full rotation
`colorChange`	Change color (requires `color`)
`transparency`	Fade to semi-transparent
`boldFlash`	Bold text flash
`wave`	Wave effect
`pulse`	Pulse effect
`growWithTurn`	Grow with rotation

animation: { class: "emph", emphasisType: "growShrink", duration: 800 }
animation: { class: "emph", emphasisType: "spin", duration: 1000 }
animation: { class: "emph", emphasisType: "colorChange", color: "FF0000" }

Motion Path Animations

`pathType`	Description
`line`	Straight line
`arc`	Arc curve
`circle`	Circular path
`curve`	S-curve
`figureEight`	Figure-eight
`bounce`	Bounce path
`loop`	Loop path
`customPath`	Custom SVG path (requires `path`)

animation: { pathType: "circle", duration: 1500 }
animation: { pathType: "customPath", path: "M 0 0 L 100 0 L 100 100 L 0 100 Z", duration: 1200 }

Animation Options

Property	Type	Default	Description
`type`	`AnimationType`	`"appear"`	Animation preset type
`class`	`"entr" \| "exit" \| "emph"`	`"entr"`	Animation category
`duration`	`number`	`500`	Duration in milliseconds
`delay`	`number`	`0`	Delay before start in milliseconds
`trigger`	`AnimationTrigger`	`"onClick"`	How animation is triggered
`direction`	`AnimationDirection`	—	Direction of the animation
`emphasisType`	`EmphasisType`	—	Emphasis animation type (class="emph")
`pathType`	`PathAnimationType`	—	Motion path type
`path`	`string`	—	Custom SVG path string
`speed`	`number`	—	Speed multiplier
`repeatCount`	`number`	—	Number of repetitions
`autoReverse`	`boolean`	`false`	Auto-reverse after completion
`color`	`string`	—	Target color for `colorChange`

Trigger Modes

// Click to trigger (default)
animation: { type: "fade", trigger: "onClick" }

// Trigger with previous animation
animation: { type: "fade", trigger: "withPrevious" }

// Trigger after previous animation completes
animation: { type: "fade", trigger: "afterPrevious" }