Add reveal animations

Use reveal(target, options?) to animate each target element when it enters the viewport. Use cascade(container, options?) to animate the direct element children of a container in sequence. Both functions return only { dispose() }. Call dispose() when you remove the targets before they reveal. After all the entrances of a call finish, the call needs no dispose().

Core needs no stylesheet. It creates a paused native animation for each element when you call it. Code that waits for all page animations to finish must skip the paused ones. Core does not hide server-rendered content. Only the framework packages do that.

import { reveal, cascade } from "@awesome-reveal/core";
const handle = reveal(".card", { from: "left" });
cascade(".features", { interval: 80 });
handle.dispose();

Set from to "top", "right", "bottom" or "left" for an entrance that starts transparent and 24px away on that side. The defaults are from: "bottom", duration: 600 (milliseconds), delay: 0 (milliseconds) and threshold: 0. The entrance plays one time.

A from object is the complete start state: { opacity: 0 } is a pure fade, and { scale: 0.9 } adds no fade and no movement. A number is in pixels for x, y and blur, and in degrees for rotate. A string can contain a CSS value with its unit. The entrance animates only the properties that the start state sets, and ends at their neutral values: no offset, no rotation, no blur, a scale of 1 and an opacity of 1. The element's own transform stays in effect. The element's own values of the animated properties do not apply until the entrance ends, so put them on an inner element when they must apply during the entrance. Prefer a start state without blur on pages that must stay smooth: with a blur, Chromium runs the full entrance on the main thread.