Attributes
data-viv — the composition
Keys (prefix @) are animations; modifiers (prefix _) tune timing, intensity and targeting. Modifiers concatenate directly onto a key
— the _ delimits them — and separate keys are space-separated:
<div data-viv="@fd @sl-y_ease-out-back_delay-2">That's one fade, plus one slide-up carrying an easing and a delay. Everything applies to the same element, so where a modifier sits is just notation — attach it to the key it belongs with for readability.
Variant grammar
| Suffix | Meaning | Example |
|---|---|---|
-x / -y / -z | axis | @sl-x, @rt-z |
-i | enter variant | @sc-i grows in |
-o | exit variant | @fd-o fades out |
! | invert direction | @sl-y! slides from below |
Friendly tuning attributes
For one-off tweaks you don't need modifier tokens — dedicated attributes map onto the underlying CSS custom properties:
| Attribute | Maps to | Example |
|---|---|---|
data-viv-duration | --AD | 600ms, 0.6s, 0.6 |
data-viv-delay | --ADL | 0.2, 200ms |
data-viv-ease | --AE | out-back, linear, any cubic-bezier() |
data-viv-repeat | --AC | 3, infinite |
Raw custom properties
Everything above compiles down to CSS custom properties, and you can always set them inline for full control:
<div data-viv="@sl-y" style="--AD: 1.2; --AL: 2; --AE: var(--Aout-expo)">| Property | Role | Default |
|---|---|---|
--AD | duration base (seconds) | 0.5 |
--AS | speed multiplier | 1 |
--AE | easing | ease |
--AC | iteration count | 1 |
--ADL | delay | 0s |
--AL | intensity level — scales distances, angles, springs | 1 |
--AOXY | transform origin | 50% 50% |
Engine-managed attributes
The engine writes data-viv-state (idle → armed and hidden, play → running/finished) and reads data-viv-paused to freeze playback.
You normally never touch these — use the API instead.