slidev-transitions

Q: How do I install slidev-transitions?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-transitions in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-transitions/ (personal) or .claude/skills/slidev-transitions/ (project).

by yoanbernabeuDocs & Writing

Add smooth slide transitions in Slidev. Use this skill for fade, slide, and custom transitions between slides.

Installs: 215
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-transitions

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads slidev-transitions automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Slide Transitions in Slidev

This skill covers adding smooth transitions between slides in Slidev, including built-in transitions, custom animations, and directional transitions.

When to Use This Skill

Adding polish to presentations
Creating smooth navigation experiences
Emphasizing slide changes
Matching presentation themes
Creating unique visual effects

Setting Transitions

Global Transition (Frontmatter)

---
transition: slide-left
---

Applied to all slides in the presentation.

Per-Slide Transition

---
transition: fade
---

# This slide fades in

---
transition: slide-up
---

# This slide slides up

Inline with Separator

# Slide 1

---
transition: zoom
---

# Slide 2 (zooms in)

Built-in Transitions

Fade Transitions

Name	Effect
`fade`	Simple fade in/out
`fade-out`	Fade out, then appear

---
transition: fade
---

Slide Transitions

Name	Effect
`slide-left`	New slide enters from right
`slide-right`	New slide enters from left
`slide-up`	New slide enters from bottom
`slide-down`	New slide enters from top

---
transition: slide-left
---

View Transition

Uses the modern View Transitions API:

---
transition: view-transition
---

Note: Requires browser support for View Transitions API.

Directional Transitions

Forward/Backward Different

Use | to separate forward and backward transitions:

---
transition: slide-left | slide-right
---

Going forward: slides left
Going backward: slides right

Common Patterns

# Natural slide direction
---
transition: slide-left | slide-right
---

# Vertical navigation
---
transition: slide-up | slide-down
---

# Fade forward, slide back
---
transition: fade | slide-right
---

Custom Transitions

CSS-based Custom Transition

Create styles/index.css:

/* Define custom transition */
.my-transition-enter-active,
.my-transition-leave-active {
  transition: all 0.5s ease;
}

.my-transition-enter-from {
  opacity: 0;
  transform: translateX(100px) rotate(10deg);
}

.my-transition-leave-to {
  opacity: 0;
  transform: translateX(-100px) rotate(-10deg);
}

Use in frontmatter:

---
transition: my-transition
---

Transition Classes

Slidev uses Vue transition classes:

Class	When Applied
`[name]-enter-from`	Starting state for enter
`[name]-enter-active`	During enter transition
`[name]-enter-to`	Ending state for enter
`[name]-leave-from`	Starting state for leave
`[name]-leave-active`	During leave transition
`[name]-leave-to`	Ending state for leave

Transition Examples

Scale Transition

.scale-enter-active,
.scale-leave-active {
  transition: all 0.4s ease;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(1.2);
}

Flip Transition

.flip-enter-active,
.flip-leave-active {
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.flip-enter-from {
  opacity: 0;
  transform: rotateY(-90deg);
}

.flip-leave-to {
  opacity: 0;
  transform: rotateY(90deg);
}

Blur Transition

.blur-enter-active,
.blur-leave-active {
  transition: all 0.5s ease;
}

.blur-enter-from {
  opacity: 0;
  filter: blur(20px);
}

.blur-leave-to {
  opacity: 0;
  filter: blur(20px);
}

Bounce Transition

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-out 0.5s;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

Swipe Transition

.swipe-enter-active,
.swipe-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.swipe-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.swipe-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

View Transitions API

Basic Usage

---
transition: view-transition
---

Named View Transitions

<div style="view-transition-name: hero">
  Content that transitions smoothly
</div>

Elements with the same view-transition-name on consecutive slides will animate between their positions.

Practical Example

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-32 h-32 bg-blue-500">
  Small card
</div>

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-64 h-64 bg-blue-500">
  Card grows!
</div>

Transition Timing

Duration

.slow-fade-enter-active,
.slow-fade-leave-active {
  transition: all 1s ease; /* 1 second */
}

Easing Functions

/* Common easing functions */
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.linear { transition-timing-function: linear; }

/* Cubic bezier for custom easing */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

Delay

.delayed-enter-active {
  transition: all 0.5s ease 0.2s; /* 0.2s delay */
}

Transition Per Slide Type

Different Transitions for Different Content

---
layout: cover
transition: fade
---

# Title Slide

---
layout: default
transition: slide-left
---

# Content Slide

---
layout: section
transition: zoom
---

# Section Break

---
layout: end
transition: fade
---

# Thank You

Disabling Transitions

No Transition

---
transition: none
---

Disable Globally

---
transition: false
---

Best Practices

1. Consistency

Use the same transition family throughout:

# Good: Consistent slide family
---
transition: slide-left | slide-right
---

2. Match Content Type

Content	Suggested Transition
Cover/Title	`fade`
Regular content	`slide-left`
Section break	`fade` or `zoom`
Demo/Code	`fade`
Conclusion	`fade`

3. Keep It Subtle

❌ Too flashy

.crazy-enter-active {
  animation: spin 2s, bounce 1s, flash 0.5s;
}

✓ Professional

.subtle-enter-active {
  transition: opacity 0.3s ease;
}

4. Consider Audience

Technical presentations: Minimal transitions
Creative presentations: More freedom
Long presentations: Less distracting

5. Test Performance

Complex transitions may lag on:

Large presentations
Older devices
When exporting to PDF

Transition Presets

Professional Set

/* styles/transitions.css */

/* Gentle fade */
.pro-fade-enter-active,
.pro-fade-leave-active {
  transition: opacity 0.3s ease;
}
.pro-fade-enter-from,
.pro-fade-leave-to {
  opacity: 0;
}

/* Smooth slide */
.pro-slide-enter-active,
.pro-slide-leave-active {
  transition: all 0.35s ease-out;
}
.pro-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.pro-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

Playful Set

/* Energetic bounce */
.playful-enter-active {
  animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

Output Format

When configuring transitions:

---
# GLOBAL TRANSITION (first slide)
transition: [transition-name] | [backward-transition]
---

# Slide content...

---
# PER-SLIDE OVERRIDE (if needed)
transition: [different-transition]
---

# Different slide content...

TRANSITION PLAN:

Cover slide: [transition]
Content slides: [transition]
Section breaks: [transition]
Conclusion: [transition]

CUSTOM CSS (if needed):

.[name]-enter-active { ... }
.[name]-leave-to { ... }

FAQ

What does the slidev-transitions skill do?

Add smooth slide transitions in Slidev. Use this skill for fade, slide, and custom transitions between slides.

How do I install slidev-transitions?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-transitions in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-transitions/ (personal) or .claude/skills/slidev-transitions/ (project).

Which AI agents can use slidev-transitions?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is slidev-transitions safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains slidev-transitions?

It is published by yoanbernabeu in yoanbernabeu/slidev-skills. It has 215 recorded installs.

Popular docs & writing skills

View category →

grill-with-docs

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs

slidev-transitions

Install

Install

Describe the task

Review the result

SKILL.md

Slide Transitions in Slidev

When to Use This Skill

Setting Transitions

Global Transition (Frontmatter)

Per-Slide Transition

Inline with Separator

Built-in Transitions

Fade Transitions

Slide Transitions

View Transition

Directional Transitions

Forward/Backward Different

Common Patterns

Custom Transitions

CSS-based Custom Transition

Transition Classes

Transition Examples

Scale Transition

Flip Transition

Blur Transition

Bounce Transition

Swipe Transition

View Transitions API

Basic Usage

Named View Transitions

Practical Example

Transition Timing

Duration

Easing Functions

Delay

Transition Per Slide Type

Different Transitions for Different Content

Disabling Transitions

No Transition

Disable Globally

Best Practices

1. Consistency

2. Match Content Type

3. Keep It Subtle

4. Consider Audience

5. Test Performance

Transition Presets

Professional Set

Playful Set

Output Format

FAQ

More from yoanbernabeu/slidev-skills

Popular docs & writing skills