Slidev Click Animations

Click Animations in Slidev

This skill covers all click-based animations in Slidev, including v-click, v-after, v-clicks, v-switch, and motion directives for creating dynamic, engaging presentations.

When to Use This Skill

• Revealing content step by step
• Building up complex diagrams
• Creating suspense or emphasis
• Guiding audience attention
• Interactive presentation flow

v-click Basics

Component Syntax

This appears on the first click

Directive Syntax

  This also appears on click

Multiple v-clicks

First
Second
Third

Each appears on successive clicks.

Click Positioning

Explicit Position

Appears first
Appears third
Appears second

Relative Position

First (click 1)
Second (click 2)
Fourth (click 4)

Same Click (v-after)

Main content
Appears with main content

Or using relative position:

Main content
Also appears with main

v-clicks for Lists

Basic List Animation

- First item
- Second item
- Third item

Nested Lists

- Parent 1
  - Child 1.1
  - Child 1.2
- Parent 2
  - Child 2.1

Every N Items

- Items 1-2 together
- (same click)
- Items 3-4 together
- (same click)

Hide on Click

v-click.hide

This disappears on click

v-click with hide

  This content will be hidden after the click

Range-based Hiding

  Visible until click 2, hidden on clicks 2-3, visible again at click 4

v-switch

Switch between different content based on clicks:

  Content at click 1
  Content at click 2
  Content at click 3
  Content at clicks 4, 5, and 6
  Default content (before click 1)

Practical Example

  
    Step 1: Initialize
    Set up the project structure
  
  
    Step 2: Configure
    Add configuration files
  
  
    Step 3: Build
    Run the build command
  

Motion Animations

Basic Motion

  Slides up and fades in

Motion with Clicks

  Complex motion sequence

Motion Variants

| Variant | When Applied | |---------|--------------| | initial | Initial state | | enter | When slide is entered | | click-N | At click N | | click-N-M | During clicks N to M | | leave | When leaving slide |

Motion Properties

  Animated element

Click Counter Configuration

Setting Total Clicks

---
clicks: 5
---

Forces the slide to have exactly 5 clicks.

Auto Clicks

---
clicks: auto
---

Automatically determines click count (default).

Styling Click States

CSS Classes

When an element has v-click:

• .slidev-vclick-target - Always applied
• .slidev-vclick-hidden - When hidden
• .slidev-vclick-current - Currently active click
• .slidev-vclick-prior - Already revealed

Custom Transitions

/* styles/index.css */
.slidev-vclick-target {
  transition: all 0.5s ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  transform: translateY(20px);
}

Scale Animation

.slidev-vclick-target {
  transition: all 0.3s ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
  opacity: 0;
}

Blur Effect

.slidev-vclick-hidden {
  filter: blur(10px);
  opacity: 0;
}

Practical Patterns

Building a List

# Key Points

1. **Performance** - Optimized for speed
2. **Security** - Built-in protection
3. **Scalability** - Handles growth
4. **Maintainability** - Clean architecture

Progressive Diagram

# Architecture

  Frontend
  API
  Database

Before/After Reveal

# The Solution

  Before
  Old code here

  After
  New improved code

Animated Highlight

# Important Concept

  This is a paragraph with
  
    highlighted text
  
  that appears.

Step-by-Step Code

````markdown

``typescript {1|2|3|all} const name = 'Slidev' const version = '0.50' console.log(${name} v${version}`)

````

## Best Practices

### 1. Don't Overuse

❌ **Too many clicks**
```markdown
Word
by
word
is
annoying

✓ Meaningful groups

First complete thought
Second complete thought

2. Group Related Content

  Feature A
  Description of feature A

  Feature B
  Description of feature B

3. Consider Timing

Quick reveal

  Dramatic reveal

4. Use for Navigation Cues

  👉 First, we'll look at setup

  👉 Then, we'll implement features

  👉 Finally, we'll deploy

Debugging Tips

1. Check click count: Look at the click counter in presenter mode
2. Verify positions: Use explicit positions when order matters
3. Test all clicks: Click through every animation before presenting
4. Check CSS conflicts: Custom styles might interfere

Output Format

When creating click animations:

# [Slide Title]

[Static introductory content if any]

- [Point revealed at click 1]
- [Point revealed at click 2]
- [Point revealed at click 3]

[Conclusion that appears last]

---
CLICK SEQUENCE:
1. [What appears/happens]
2. [What appears/happens]
3. [What appears/happens]
4. [What appears/happens]

TOTAL CLICKS: [N]

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: yoanbernabeu
• Source: yoanbernabeu/slidev-skills
• License: MIT

Install and usage instructions live in the source repository linked above.