Motion & Attribute 1.2.0

Einheitliche Scroll-Animationen ueber core/motion/ und deklarative velin-*-Attribute ueber core/attributes/. English: Motion & attributes

Reifegrad

Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) ist getrennt und je nach Bereich als beta / foundation markiert.

Wann sinnvoll

Scroll-getriggerte Reveals, Stagger-Listen und weiche In-Page-Anker ohne schwere Animationsbibliothek.
CSS-Klassen aus Animations mit initMotion() kombinieren, wenn In-View-Timing benoetigt wird.

Wann nicht

Keine vollstaendige Timeline-/GSAP-Alternative erwarten - die Runtime ist auf Attribute + CSS ausgelegt.
Reduced-Motion nicht fuer dekorative Effekte deaktivieren.

Motion Runtime

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

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

Verwendet einen gemeinsamen IntersectionObserver, batcht Updates mit requestAnimationFrame und toggelt .velin-in-view auf Elementen.

initReveal() in velin-reveal.js delegiert jetzt hierher (abwaertskompatibel).

Effekte

Attribut	Verhalten
`velin-reveal`	Beim Scrollen einblenden (Basis)
`velin-fade`	Beim Scrollen einfaden
`velin-slide="up"`	Slide-Richtung
`velin-scale`	Hereinskalieren
`velin-parallax`	Parallax (CSS scroll-timeline falls unterstuetzt)
`velin-stagger="60"`	Listenkinder gestaffelt (ms)
`velin-scroll`	Sanfter Anchor auf `href="#id"`
`velin-hover`	Hover lift/glow Utilities

CSS-Fallback wenn animation-timeline: view() fehlt: siehe scroll-animation.css .velin-in-view-Regeln.

Attribute-Boot

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

await bootFromDOM(document, { attributes: true });
// Fuehrt bootAttributes() + motion + optionale velin-search-Bindings aus

Bridge-Attribute (z. B. velin-modal) setzen data-velin-component und rufen lazyDefine() auf - siehe vollstaendige Attributliste.

Beispiele

<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 im GitHub-Repo.

Performance & Reduced Motion

Gemeinsamer IntersectionObserver + rAF-Batching - pro Element eigene Observer vermeiden.
prefersReducedMotion() kuerzt auf markVisible; CSS begrenzt Laufzeiten ebenfalls auf ~1ms.
Transform/Opacity gegenueber Layout-Properties bevorzugen; Filter/Blur sparsam einsetzen.
Mit data-velin-motion="off" an einer Root deaktivieren, wenn eine Third-Party-Animation den Teilbaum steuert.

Tokens: Motion tokens. Chart-spezifische Keyframes: Chart animation.