Animate

Scroll-triggered entrance animations powered by the native IntersectionObserver and the Web Animations API. Call after rendering so target nodes exist in the DOM.

venjs.animate(selector, options)

Finds elements (by CSS selector, a single HTMLElement, or a NodeList) and plays a fade/slide-in when they scroll into view.

Option	Default	Description
duration	800	Animation duration in ms.
easing	"cubic-bezier(0.4,0,0.2,1)"	CSS easing string.
once	true	When true, animates only the first time it enters view.
threshold	0.1	Viewport intersection ratio that triggers the animation.
slideFrom	"bottom"	Direction: "top", "bottom", "left", "right".
transform	derived	Override [startTransform, endTransform] (e.g. ["translateY(40px)","translate(0,0)"]).
opacity	[0, 1]	Start/end opacity as a two-element array.

Example

// logic/app.js — animate after the router mounts
venjs.effect(() => {
  venjs.render(app, App);
  venjs.animate(".page-title", {
    slideFrom: "top",
    duration: 700,
    opacity: [0, 1]
  });
  venjs.animate(".page-copy", {
    slideFrom: "bottom",
    duration: 500,
    once: true
  });
});

How it works

• Each target starts at opacity: 0 (or the first value of opacity) to avoid a flash before scrolling.
• An IntersectionObserver watches the elements; on intersection it animates from the start transform/opacity to the end.
• When once is true, the element is unobserved after the first play.