Scroll-effect gallery

data-effect="fade-in"

Opacity fades from 0 to 1.

Default duration 300ms, ease-out. The simplest entrance.

data-effect="slide-up"

Translates up from below, with fade.

Default distance 40px (--vb-slide-distance), 400ms, ease-out.

data-effect="slide-in"

Translates in from the side, with fade.

Direction follows dir attribute. LTR slides from the left; RTL flips.

data-effect="pop"

Scales up from 80%, with fade.

Cubic-bezier overshoot easing — feels playful.

data-effect="fade-in slide-up" (composed)

Fade and translate, merged into one smooth motion.

Two effects in the same entrance slot — VB ships a pre-merged keyframe so they coexist cleanly.

data-effect="blur-reveal"

Each word fades in from a blur, in sequence.

Chunk-based — splits content into .vb-blur-chunk spans with staggered delays.

data-effect="reveal"

Each word reveals one after another, sliding up.

Chunk-based. Pair with style="--vb-reveal-delay: 120ms" to slow the cadence.

data-effect="scramble"

Characters scramble into place

Pair with style="--vb-scramble-chars: '01'" for a binary effect.

data-effect="typewriter"

Types out character by character.

Add class="loop" for a looping retype. class="no-cursor" hides the cursor.

data-effect="fade-in slide-up" · data-stagger="100ms"

• First item
• Second item
• Third item
• Fourth item

Add data-stagger to a parent to delay each child's entrance by that amount times its index.