presentations — Claude Code skill: slide animation
A skill for animation in Keynote, PowerPoint and Google Slides. It hands you timings, build order and transition choices.
npx skills add dylantarre/animation-principles --skill presentations -a claude-codeWhat presentations does
The skill maps Disney's 12 animation principles onto presentation software. Each principle gets a concrete implementation: squash & stretch becomes elastic scaling with a slight overshoot, anticipation means dimming the old block before the new one appears, staging keeps one focal point per moment and drops finished content to 30-50% opacity.
Inside there is a quick-reference table of the principles, a breakdown of each one, and separate sections for Keynote, PowerPoint and Google Slides. Keynote gets Dissolve, Move In, Scale and Magic Move; PowerPoint gets Fade, Fly In with a custom path and Morph; Google Slides gets Fade and Fly in with no morphing. A build-sequence table lists durations and delays: title 0.5s, subtitle 0.4s with a 0.2s delay, bullets 0.3s each with a 0.15s stagger.
Treat the timings as a starting point rather than a rule: 0.3-0.5s for text builds, 0.5-0.8s for slide transitions. Linear animation is out — it reads as mechanical. Google Slides gives you less control over timing, so the skill suggests keeping motion simple there. A presenter section covers running animations on click instead of automatically, and keeping a no-animation backup in case the display setup fails.
What it helps with
- pick a duration and delay for a slide build
- swap linear transitions for ease-in-out
- sequence the reveal of elements in a diagram
- dim finished content before showing the next block
- set up a morph transition in Keynote or PowerPoint
Example prompts for the agent
- set up the entrance animation for bullet points in PowerPoint
- what timings should I use for a title and image build
- build a Magic Move transition between two Keynote slides
How to install presentations
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill presentations -a claude-code2Manually: put the files in place
~/.claude/skills/presentations/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/presentations/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill presentations -a codex2Manually: put the files in place
.agents/skills/presentations/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill presentations -a cursor2Manually: put the files in place
.cursor/skills/presentations/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles presentations2Manually: put the files in place
.github/skills/presentations/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill presentations -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/01-by-domain/presentationsManually: put the files in place
.devin/skills/presentations/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill presentations -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about presentations
How do I install presentations in Claude?
Run npx skills add dylantarre/animation-principles --skill presentations -a claude-code. The skill file lands at ~/.claude/skills/presentations/SKILL.md.
What does the presentations skill do?
It maps the 12 animation principles onto presentation tools: which effects to use in Keynote, PowerPoint and Google Slides, with durations and delays for each.
How does Keynote differ from Google Slides for animation?
Keynote has Magic Move, which morphs objects between slides. Google Slides has no morphing, so the skill recommends Fade and simple transitions instead.
Source text
SKILL.md · MIT
--- name: presentations description: Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work. --- # Presentation Animation Apply Disney's 12 animation principles to Keynote, PowerPoint, Google Slides, and presentation software. ## Quick Reference | Principle | Presentation Implementation | |-----------|----------------------------| | Squash & Stretch | Bounce emphasis, elastic scaling | | Anticipation | Build sequences, pre-reveal fades | | Staging | Focal point management, dimming | | Straight Ahead / Pose to Pose | Morph vs discrete transitions | | Follow Through / Overlapping | Staggered builds, delayed elements | | Slow In / Slow Out | Ease animations, avoid linear | | Arc | Motion paths, curved entrances | | Secondary Action | Supporting graphics follow primary | | Timing | Builds 0.3-0.5s, transitions 0.5-0.8s | | Exaggeration | Emphasis effects, attention draws | | Solid Drawing | Consistent alignment, visual balance | | Appeal | Professional polish, purposeful motion | ## Principle Applications **Squash & Stretch**: Use bounce effect sparingly for playful emphasis. Scale animations should feel elastic not mechanical. Key numbers can "pop" with slight overshoot. **Anticipation**: Fade out previous content before new appears. Slight pause after slide transition before builds begin. Dim existing elements before highlighting new ones. **Staging**: One focal point per moment. Dim completed content to 30-50% opacity. Use motion to direct eye path. Build complex diagrams piece by piece. **Straight Ahead vs Pose to Pose**: Morph transitions (Keynote Magic Move, PowerPoint Morph) create fluid straight-ahead motion. Standard builds are pose to pose. Use morph for transformation stories. **Follow Through & Overlapping**: Build related items with 0.1-0.2s delays. Supporting text follows primary graphic. Bullet points stagger naturally. Don't animate everything simultaneously. **Slow In / Slow Out**: Always use ease-in-out or ease-out. Never linear—looks robotic. Keynote: "Ease In & Out". PowerPoint: use custom motion paths with curve handles. **Arc**: Motion paths should curve naturally. Elements entering from sides arc inward. Exit animations arc toward edges. Straight lines feel mechanical. **Secondary Action**: Icons animate alongside text reveals. Arrows appear as relationships are explained. Background subtle shifts support primary content. **Timing**: Text builds: 0.3-0.5s. Graphic reveals: 0.4-0.6s. Slide transitions: 0.5-0.8s. Complex sequences: 0.2-0.3s between elements. Match pacing to speaking rhythm. **Exaggeration**: Use scale emphasis for key points. Pulse effect for critical numbers. Shake for contrast/disagreement. Reserve exaggeration for truly important moments. **Solid Drawing**: Maintain grid alignment during motion. Consistent transform origins. Elements should feel anchored to the slide structure. **Appeal**: Purposeful animation builds credibility. Excessive motion distracts and annoys. Every animation should serve communication. ## Software Patterns ### Keynote ``` Best builds: Dissolve, Move In, Scale Magic Move: Most powerful transition—objects morph between slides Timing: Use "Build Order" panel for precise sequencing Tip: Group objects that should animate together ``` ### PowerPoint ``` Best entrances: Fade, Fly In (with custom path) Morph transition: Objects with same name transform Timing: Animation Pane for sequencing Tip: Use "With Previous" + delay for stagger ``` ### Google Slides ``` Limited but functional: Fade, Fly in No morphing: Use Fade for cleanest transitions Timing: Less control—keep animations simple Tip: Fewer, better animations beat many poor ones ``` ## Build Sequences | Content Type | Animation | Duration | Delay | |-------------|-----------|----------|-------| | Title | Fade + Scale | 0.5s | 0s | | Subtitle | Fade | 0.4s | 0.2s | | Bullet 1 | Fade + Move | 0.3s | 0.3s | | Bullet 2+ | Fade + Move | 0.3s | +0.15s each | | Image | Scale from center | 0.5s | varies | | Chart | Custom/Wipe | 0.6s | varies | ## Presenter Tips 1. Animate on click, not automatically—control your pacing 2. Practice with animations—know what comes next 3. Less is more—animation should clarify, not decorate 4. Test on presentation display—timing feels different at scale 5. Have a backup with no animations for technical issues
© dylantarre · MIT · dylantarre/animation-principles