Built-in Animations

The library comes with a set of carefully crafted, GPU-accelerated presets.

✨

fade

✨

blur-in

✨

fade-up

✨

fade-down

✨

fade-left

✨

fade-right

✨

slide-up

✨

slide-down

✨

slide-left

✨

slide-right

✨

scale-up

✨

scale-down

Directional Variants

Most presets support -up and -down modifiers. These allow you to apply an animation only when the user is scrolling in a specific direction.

• {preset}-down: Triggers only when scrolling down (entering from the bottom of the screen).
• {preset}-up: Triggers only when scrolling up (entering from the top of the screen).

<!-- Only animate when scrolling down -->
<div v-viewport="'fade-up-down'">...</div>

<!-- Only animate when scrolling up -->
<div v-viewport="'fade-down-up'">...</div>

TIP

This is particularly useful for complex layouts where you want elements to behave differently depending on how the user reaches them.

Smart Directional Presets

These presets automatically adapt the animation direction based on the user's scroll direction.

• fade-y: Fades up when scrolling down, fades down when scrolling up.
• slide-y: Slides up when scrolling down, slides down when scrolling up.

List of Presets

Preset	Description
fade	Simple opacity transition
blur-in	Opacity + Blur effect
fade-up/down/left/right	Opacity + Slide from direction
slide-up/down/left/right	Slide from direction (no opacity change)
scale-up	Scales from 0.95 to 1
scale-down	Scales from 1.05 to 1