feat: introduce named animation presets for v-click

[DEmmaRL]

No description provided.

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	35cf315
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/69c6b032217652000808f54d
😎 Deploy Preview	https://deploy-preview-2501--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/@slidev/client@2501

create-slidev

npm i https://pkg.pr.new/create-slidev@2501

create-slidev-theme

npm i https://pkg.pr.new/create-slidev-theme@2501

@slidev/parser

npm i https://pkg.pr.new/@slidev/parser@2501

@slidev/cli

npm i https://pkg.pr.new/@slidev/cli@2501

@slidev/types

npm i https://pkg.pr.new/@slidev/types@2501

commit: 35cf315

[DEmmaRL]

Currently, v-click only handles a simple opacity transition. While users can override this globally, there's no easy way to use different entrance animations (like a subtle "fade-up" or "scale") on a per-slide or per-element basis without writing repetitive custom CSS.

Describe the solution you'd like

I propose bringing named animation presets to the core. This system allows for:

• Setting a default animation for the whole presentation
• Overriding it per slide
• Applying it to specific elements using directive modifiers

Proposed API

Frontmatter:

---
clickAnimation: fade-up
---

Directive modifiers:

<div v-click.scale>This pops in</div>

Suggested Presets: fade (default), fade-up, fade-down, fade-left, fade-right, scale, none
Or any other recommended, those are the one I use.

Why this proposal?

I've already been implementing this pattern manually in my recent presentations using custom CSS and frontmatter, and it significantly improves the "feeling" of the slides.

Describe alternatives you've considered

• v-motion: It works, but too verbose for most common use cases where you just want a consistent entrance effect across the deck, also, there are know issues with Vue mentioned in the docs.
• Global CSS overrides: You can override ⁠ .slidev-vclick-hidden ⁠ in your style.css (this is the current solution recommended in the documentation), but not flexible enough when you need different animation styles within the same presentation.

*⁠ ⁠Manual CSS/UnoCSS: Similar to CSS Override, while possible, it requires a lot of boilerplate to manage the transition between .slidev-vclick-hidden and the active state for transforms. Presets would standardize these common motion patterns as first-class citizens.

[DEmmaRL]

Hi, please excuse the accidental push , I was working on this in my fork and didn't mean to open the PR just yet. But, since it's already visible, I’d love to use this as a starting point for a proposal. I’ve been using these presets in my personal presentations to avoid writting too many css classes for simple entrance effects, and it's been quite helpful for my workflow.

I’m fully aware of the importance of keeping the core lean, (I saw some old PR/issues antecedents to v-click that could be related, that's why I wanted to create an issue before posting my local changes, but now it's public haha) so I’m totally open to feedback on whether this fits the project's direction or if it should remain as a user-land implementation.

Just wanted to share a feature that has been useful for me, I would understand if it's found not enterely necessary or not having enough use cases.

[kermanx]

Thanks for proposing this idea! This looks like a useful feature, I'd definitely like to see it merged.

We just need some docs and minor updates to the demo slides (demo/starter/slides.md) before it's good to go.

A few questions though:

1. Are users able to extend or customize the animation presets?
2. Can fade just be implemented as a standard animation preset? If so, hide would be the only RESERVED_CLICK_MODIFIERS.

[DEmmaRL]

I documentred how to create & use custom presets in here

[DEmmaRL]

Thanks for the suggestions! Just pushed an update:

• Refactored fade to be a standard animation preset, so hide is now the only reserved modifier.
• Made it extensible: any modifier (other than hide) is now passed to data-click-animation, so
  users can define custom animations in CSS.
• Related to the docs: Added a "Click Animation Presets" section to the docs and a new slide in the starter demo to
  show how the overrides work.

I also added a dev warning for multiple animation modifiers (not 100% sure if it's ok) . LMK if this looks better or need something else or if I did not addressed what you said, I am a little excited with this feature!

[kermanx]

Thanks for the update! I have a few suggestions:

1. It looks like CLICK_ANIMATION_PRESETS is no longer being used.
2. Would it be better to apply animations using classes rather than data attributes? For example, using .vclick-animation-fade instead of [data-click-animation="fade"]. I am not sure if this is feasible.
3. What do you think about supporting multiple animations? For instance, v-click.fade-up could just be v-click.fade.up, allowing the animations to be split into two separate style rules: .vclick-animation-fade and .vclick-animation-up.

[DEmmaRL]

1 - You are right! I'll remove it.
2 - It is indeed feasable,initially I made it using classes instead to data attributes but I migrated to data attributes because it's more legible for a unique preset and isolate it to avoid potentials collisions, but if we want to support multiple "atomic" animations it would be much easier and cleaner with classes.
3 - Absolutly! It's an amazing idea!!

I updated the PR with new related changes

[kermanx]

Looks good to me~

I made some updates. Hopefully it works.

[DEmmaRL]

I am seeing your changes, seems cool, you simplified a lot thanks ! I just have a concern about fade, you transformed it to a dim of 0.5 opacity and not a "fade-in" transition, is it on pourpuse? Do we want fade to be a dim ? because in that case maybe it should be a good idea to create another one that has the opacity 0.3s ease, transform 0.3s ease; because the feeling is different. You can see what I mean in the demo before and after your commit

[DEmmaRL]

Hi, I did a mistake on the documentation that makes the slide to have an overflow, I fixed it