slidev-transitions

What problem does it solve?

This skill makes it easy to add and control smooth, consistent transitions between slides in Slidev presentations, removing guesswork about where to configure transitions and how to implement custom animations.

Core Features & Use Cases

• Global and Per-Slide Control: Configure a global transition in frontmatter or override per-slide for targeted effects.
• Built-in Directional and Fade Options: Use named transitions like slide-left, slide-right, slide-up, slide-down, fade, and zoom, including forward/backward pairs.
• Custom CSS and View Transitions: Define CSS transition classes using Vue transition naming conventions for bespoke animations and leverage the View Transitions API for element-preserving transitions between slides.
• Use Case: Improve a pitch deck by applying fade for cover slides, slide-left for content navigation, and view-transition for hero element animations that morph between slides.

Quick Start

Set a global transition by adding transition: slide-left to the first slide's frontmatter to apply left sliding to all slides.