VIPEX Motion · 05 · Scroll
One engine, seven reveal moves — rise, fade, assemble, clip wipes, scale, hairlines and count-up stats — all declared with data attributes.
Scroll ↓ · H toggles the panel
01 · data-reveal="rise"
Each block starts a few pixels low at near-zero opacity and eases into place the moment it crosses the viewport line. The stagger emerges naturally from scroll position — no timeline required.
Hairline dividers draw themselves from the left edge, and the side label stays pinned while this column scrolls past it on wide screens.
Every element here is one attribute. No wrappers, no classes to remember.
02 · data-reveal="fade"
“Motion should explain the page,— A studio principle
not decorate it.”
03 · data-reveal="assemble"
Built from parts
Siblings arrive from different directions — media from the left, copy from below, the button from the right. The mixed directions are what create the assembling illusion.
See it again ↻04 · data-reveal="clip-iris" / "clip-barn"
05 · data-reveal="scale"
Cards grow from 92% while fading — subtle enough for interfaces, visible enough to feel alive.
Per-element delays are one attribute: data-reveal-delay="0.1". Stack them for a cascade.
Anything with data-reveal-once="false" resets when it leaves and replays on re-entry.
06 · data-reveal-counter
07 · data-reveal-children="rise"
One attribute on the parent — the children inherit the move and an indexed stagger.