Can I apply transitions to individual slides or the whole deck?

Both are supported. You can set a global transition in the frontmatter of your first slide or override it on specific slides for targeted visual impact.

Does this skill support the modern View Transitions API?

Absolutely. It includes specific guides on using the view-transition property and named view transitions to animate elements between consecutive slides.

How do I create a completely custom animation for my slides?

The skill provides the necessary CSS structure using Vue transition classes like [name]-enter-active and [name]-leave-to, allowing you to define any custom motion or effect.

Can I set different transitions for forward and backward navigation?

Yes, this skill provides patterns for using the pipe separator in frontmatter (e.g., slide-left | slide-right) to define unique transitions for different navigation directions.

Slidev Animations & Transitions

Name: Slidev Animations & Transitions
Author: yoanbernabeu

byyoanbernabeu

•

设计工具

Enhances Slidev presentations with professional slide transitions, custom CSS animations, and modern View Transitions API integration.

This skill empowers developers to create visually engaging Slidev presentations by automating the implementation of sophisticated slide transitions. It provides comprehensive guidance on global and per-slide configurations, directional logic for forward and backward navigation, and complex custom CSS animations. Whether you are aiming for subtle professional fades or high-impact View Transitions for element morphing, this skill delivers the exact code patterns and best practices needed to elevate the user experience of your slide decks.

主要功能

0113 GitHub stars

02Custom CSS-based animation templates (Blur, Flip, Bounce)

03Pre-built professional and playful transition presets

04Native View Transitions API integration for seamless morphing

05Global and per-slide transition configuration patterns

06Directional transition logic for forward/backward navigation

使用场景

01Creating seamless, interactive navigation for educational slide decks

02Adding professional polish to technical conference presentations

03Implementing branded custom animations for corporate and design pitches

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yoanbernabeu/slidev-skills animations

For use in Claude.ai and ChatGPT

Download Skill