va-fade
va-start-10 va-end-55
va-slide-up
va-distance-140
va-zoom
va-start-[70%] va-end-[15%] va-duration-900
New animation variants
va-blur-in
va-rotate-in
va-pop
va-reveal-up
va-flip-y va-ease-snap
va-slide-right va-distance-[20vh]
Duration and ease controls
va-duration-400 va-ease-out
va-duration-1200 va-ease-smooth
va-duration-[1.6s] va-ease-[cubic-bezier(...)]
Named container targets
Use va-group-[name] on a scrollable parent
and connect children with
va-target-[name] or
va-subject-[name].
Scroll inside the panel
Each card uses
va-target-[cards], so its own view
progress inside this container drives the animation.
va-group-[cards] + va-target-[cards]
Same named container timeline
Each card tracks itself
One element drives another
The dashed marker is the named subject. The card below animates from that same timeline.
The marker below becomes the named subject
for the card that follows.
Named subject: va-subject-[hero]
va-target-[hero] using the subject's view timeline
Keep scrolling inside the container to
replay the relationship.
The added travel distance makes the subject
and target relationship easier to read.
Iteration behavior
va-once
va-repeat