Motion & attributes 1.2.2

Unified scroll animations via core/motion/ and declarative velin-* attributes via core/attributes/. Deutsch: Motion & attributes Leitfaden

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Scroll-triggered reveals, stagger lists, and smooth in-page anchors without a heavy animation library.
Pair CSS classes from Animations with initMotion() when you need in-view timing.

When not

Do not expect a full timeline / GSAP replacement — the runtime is attribute + CSS oriented.
Do not disable reduced-motion for decorative effects.

Motion runtime

import { initMotion, velinMotion } from '@birdapi/velinstyle/motion';

const teardown = initMotion({ root: document });
// Respects prefers-reduced-motion and data-velin-motion="off"

Uses one shared IntersectionObserver, batches updates with requestAnimationFrame, toggles .velin-in-view on elements.

initReveal() in velin-reveal.js now delegates here (backward compatible).

Effects

Attribute	Behavior
`velin-reveal`	Scroll into view (base)
`velin-fade`	Fade in on scroll
`velin-slide="up"`	Slide direction
`velin-scale`	Scale in
`velin-parallax`	Parallax (CSS scroll-timeline where supported)
`velin-stagger="60"`	Stagger list children (ms)
`velin-scroll`	Smooth anchor on `href="#id"`
`velin-hover`	Hover lift/glow utilities

CSS fallback when animation-timeline: view() is unavailable: see scroll-animation.css .velin-in-view rules.

Attribute boot

import { bootFromDOM } from '@birdapi/velinstyle';

await bootFromDOM(document, { attributes: true });
// Runs bootAttributes() + motion + optional velin-search bindings

Bridge attributes (e.g. velin-modal) set data-velin-component and call lazyDefine() — see full attribute list.

Attribute vs Web Component vs boot: use HTML attributes like velin-reveal / data-velin-reveal-auto when the motion runtime should enhance markup after bootFromDOM(..., { attributes: true }) (or the full components bundle). Use custom elements like <velin-tooltip> when you need the component’s own Shadow DOM API. Attributes alone do nothing without a boot path; WCs register themselves when the components bundle (or a lazy chunk) loads.

Examples

<html data-velin-reveal-auto>
<section velin-reveal velin-fade>…</section>
<ul velin-stagger="80" velin-reveal>
  <li velin-fade>One</li>
  <li velin-fade>Two</li>
</ul>
<a href="#faq" velin-scroll>FAQ</a>

Framework sample: samples/velin-attributes.html in the GitHub repo.

Performance & reduced motion

Shared IntersectionObserver + rAF batching — avoid per-element observers.
prefersReducedMotion() short-circuits to markVisible; CSS also caps durations to ~1ms.
Prefer transform/opacity over layout properties; keep filter/blur effects rare.
Disable with data-velin-motion="off" on a root when a third-party animation owns the subtree.

Tokens: Motion tokens. Chart-specific keyframes: Chart animation.