Motion & attributes 0.9.0 extension

Unified scroll animations via core/motion/ and declarative velin-* attributes via core/attributes/.

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/runtime';

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.

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.