use-scroll-animate 1.5.0 → 2.0.1

package/dist/react.d.cts

@@ -0,0 +1,159 @@
+/**
+ * use-scroll-animate - Core Type Definitions
+ * A lightweight, high-performance scroll animation library
+ */
+/** Built-in animation presets */
+type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
+/**
+ * How `onProgress` (and parallax) progress is measured.
+ * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
+ * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
+ *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
+ */
+type ProgressMode = 'ratio' | 'scroll';
+/**
+ * Which engine runs the entrance animation.
+ * - `'js'`: IntersectionObserver triggers a time-based Web Animation.
+ * - `'css'`: the preset runs on the browser's native scroll-driven timeline
+ *   (`animation-timeline: view()`), so its progress follows the scroll position
+ *   off the main thread. Falls back to `'js'` where unsupported.
+ * - `'auto'` (default since 2.0): native when supported, JS otherwise — and JS
+ *   whenever the element sets `duration`, `delay`, `offset` or `stagger` itself,
+ *   since those only mean something for a time-based animation.
+ */
+type ScrollEngine = 'auto' | 'js' | 'css';
+/** Easing function types */
+type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
+/** Keyframe definition for custom animations */
+interface AnimationKeyframe {
+    [property: string]: string | number;
+}
+/** Custom animation definition */
+interface CustomAnimation {
+    from: AnimationKeyframe;
+    to: AnimationKeyframe;
+}
+/** Parallax configuration */
+interface ParallaxOptions {
+    /** Movement on X axis (e.g., '100px', '20%') */
+    x?: string | number;
+    /** Movement on Y axis (e.g., '100px', '20%') */
+    y?: string | number;
+    /** Rotation in degrees */
+    rotate?: number;
+    /** Scale factor */
+    scale?: number;
+    /** Speed multiplier (default: 1) */
+    speed?: number;
+}
+/** Per-element animation options */
+interface AnimateOptions {
+    /** Animation preset name, array of presets, or custom animation object */
+    animation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
+    /** Duration in milliseconds (default: 600) */
+    duration?: number;
+    /** Delay in milliseconds (default: 0) */
+    delay?: number;
+    /** Easing function (default: 'ease') */
+    easing?: EasingType;
+    /** Intersection threshold 0-1 (default: 0.1) */
+    threshold?: number | number[];
+    /** Root margin for IntersectionObserver (default: '0px') */
+    rootMargin?: string;
+    /** Whether to replay animation each time element enters viewport (default: false) */
+    repeat?: boolean;
+    /** Whether to trigger animation only once (default: true if repeat is false) */
+    once?: boolean;
+    /** Offset in pixels from the viewport edge to trigger animation (default: 0) */
+    offset?: number;
+    /** Stagger delay for child elements in ms (default: 0) */
+    stagger?: number;
+    /** Parallax effect configuration */
+    parallax?: ParallaxOptions;
+    /** Callback fired when animation starts */
+    onStart?: (element: Element) => void;
+    /** Callback fired when animation completes */
+    onComplete?: (element: Element) => void;
+    /** Callback fired when element enters viewport */
+    onEnter?: (element: Element) => void;
+    /** Callback fired when element leaves viewport */
+    onLeave?: (element: Element) => void;
+    /** Callback fired with scroll progress (0 to 1) */
+    onProgress?: (element: Element, progress: number) => void;
+    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    progressMode?: ProgressMode;
+    /**
+     * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
+     * element's progress (0 to 1, same value as `onProgress`) as an inline
+     * style, for scroll-driven effects written in plain CSS. Off by default.
+     */
+    progressVar?: string;
+    /**
+     * Animation engine (default: `'auto'`, see `ScrollEngine`). With the native
+     * engine the animation is linked to scroll position: `duration`, `delay`,
+     * `threshold`, `offset` and `stagger` do not apply; `viewRange` does.
+     */
+    engine?: ScrollEngine;
+    /**
+     * Native engine only: the view-timeline range the entrance animation spans,
+     * as `[rangeStart, rangeEnd]` (default: `['entry 0%', 'entry 100%']`).
+     */
+    viewRange?: [string, string];
+    /**
+     * Animate out when the element leaves the viewport, and back in when it
+     * re-enters (implies `repeat: true` unless `repeat` is set).
+     * - `true`: play the entrance animation in reverse.
+     * - a preset / presets / `{ from, to }`: play that animation in reverse
+     *   (e.g. `exit: 'fade-in-down'` leaves upwards).
+     * Skipped under reduced motion. (default: `false`)
+     */
+    exit?: boolean | AnimationPreset | AnimationPreset[] | CustomAnimation;
+}
+
+/**
+ * use-scroll-animate - Staggered children
+ * Reveal a container's children one after another when the container scrolls
+ * into view, optionally also animating children that are added later.
+ */
+
+interface StaggerOptions extends AnimateOptions {
+    /** Delay between consecutive children in ms (default: 80) */
+    stagger?: number;
+    /**
+     * Watch the container with a MutationObserver and animate children added
+     * later (e.g. infinite lists). Children added after the container was
+     * revealed animate when they scroll into view, staggered per batch.
+     * (default: false)
+     */
+    observeChildren?: boolean;
+}
+
+/**
+ * use-scroll-animate - React Integration
+ * Provides useScrollAnimate and useScrollStagger hooks for React applications.
+ * `useScrollStagger({ observeChildren: true })` also animates children added later.
+ *
+ * Both hooks are thin wrappers around the core engine, so they share its
+ * behaviour: `once`, `offset`, custom easing functions, parallax,
+ * `prefers-reduced-motion` support, and proper cleanup on unmount.
+ */
+
+type ReactRef<T> = {
+    current: T | null;
+};
+/**
+ * Wrap the callbacks that exist at mount so they always call the latest
+ * version from the most recent render (avoids stale closures without
+ * re-creating observers on every render).
+ * @internal
+ */
+declare function withLatestCallbacks(latest: ReactRef<AnimateOptions>): AnimateOptions;
+declare function createReactHooks(React: {
+    useRef: <T>(initial: T | null) => ReactRef<T>;
+    useEffect: (effect: () => (() => void) | void, deps?: unknown[]) => void;
+}): {
+    useScrollAnimate: (options?: AnimateOptions) => ReactRef<Element>;
+    useScrollStagger: (options?: StaggerOptions) => ReactRef<Element>;
+};
+
+export { createReactHooks, withLatestCallbacks };

package/dist/react.d.ts

@@ -0,0 +1,159 @@
+/**
+ * use-scroll-animate - Core Type Definitions
+ * A lightweight, high-performance scroll animation library
+ */
+/** Built-in animation presets */
+type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
+/**
+ * How `onProgress` (and parallax) progress is measured.
+ * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
+ * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
+ *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
+ */
+type ProgressMode = 'ratio' | 'scroll';
+/**
+ * Which engine runs the entrance animation.
+ * - `'js'`: IntersectionObserver triggers a time-based Web Animation.
+ * - `'css'`: the preset runs on the browser's native scroll-driven timeline
+ *   (`animation-timeline: view()`), so its progress follows the scroll position
+ *   off the main thread. Falls back to `'js'` where unsupported.
+ * - `'auto'` (default since 2.0): native when supported, JS otherwise — and JS
+ *   whenever the element sets `duration`, `delay`, `offset` or `stagger` itself,
+ *   since those only mean something for a time-based animation.
+ */
+type ScrollEngine = 'auto' | 'js' | 'css';
+/** Easing function types */
+type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
+/** Keyframe definition for custom animations */
+interface AnimationKeyframe {
+    [property: string]: string | number;
+}
+/** Custom animation definition */
+interface CustomAnimation {
+    from: AnimationKeyframe;
+    to: AnimationKeyframe;
+}
+/** Parallax configuration */
+interface ParallaxOptions {
+    /** Movement on X axis (e.g., '100px', '20%') */
+    x?: string | number;
+    /** Movement on Y axis (e.g., '100px', '20%') */
+    y?: string | number;
+    /** Rotation in degrees */
+    rotate?: number;
+    /** Scale factor */
+    scale?: number;
+    /** Speed multiplier (default: 1) */
+    speed?: number;
+}
+/** Per-element animation options */
+interface AnimateOptions {
+    /** Animation preset name, array of presets, or custom animation object */
+    animation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
+    /** Duration in milliseconds (default: 600) */
+    duration?: number;
+    /** Delay in milliseconds (default: 0) */
+    delay?: number;
+    /** Easing function (default: 'ease') */
+    easing?: EasingType;
+    /** Intersection threshold 0-1 (default: 0.1) */
+    threshold?: number | number[];
+    /** Root margin for IntersectionObserver (default: '0px') */
+    rootMargin?: string;
+    /** Whether to replay animation each time element enters viewport (default: false) */
+    repeat?: boolean;
+    /** Whether to trigger animation only once (default: true if repeat is false) */
+    once?: boolean;
+    /** Offset in pixels from the viewport edge to trigger animation (default: 0) */
+    offset?: number;
+    /** Stagger delay for child elements in ms (default: 0) */
+    stagger?: number;
+    /** Parallax effect configuration */
+    parallax?: ParallaxOptions;
+    /** Callback fired when animation starts */
+    onStart?: (element: Element) => void;
+    /** Callback fired when animation completes */
+    onComplete?: (element: Element) => void;
+    /** Callback fired when element enters viewport */
+    onEnter?: (element: Element) => void;
+    /** Callback fired when element leaves viewport */
+    onLeave?: (element: Element) => void;
+    /** Callback fired with scroll progress (0 to 1) */
+    onProgress?: (element: Element, progress: number) => void;
+    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    progressMode?: ProgressMode;
+    /**
+     * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
+     * element's progress (0 to 1, same value as `onProgress`) as an inline
+     * style, for scroll-driven effects written in plain CSS. Off by default.
+     */
+    progressVar?: string;
+    /**
+     * Animation engine (default: `'auto'`, see `ScrollEngine`). With the native
+     * engine the animation is linked to scroll position: `duration`, `delay`,
+     * `threshold`, `offset` and `stagger` do not apply; `viewRange` does.
+     */
+    engine?: ScrollEngine;
+    /**
+     * Native engine only: the view-timeline range the entrance animation spans,
+     * as `[rangeStart, rangeEnd]` (default: `['entry 0%', 'entry 100%']`).
+     */
+    viewRange?: [string, string];
+    /**
+     * Animate out when the element leaves the viewport, and back in when it
+     * re-enters (implies `repeat: true` unless `repeat` is set).
+     * - `true`: play the entrance animation in reverse.
+     * - a preset / presets / `{ from, to }`: play that animation in reverse
+     *   (e.g. `exit: 'fade-in-down'` leaves upwards).
+     * Skipped under reduced motion. (default: `false`)
+     */
+    exit?: boolean | AnimationPreset | AnimationPreset[] | CustomAnimation;
+}
+
+/**
+ * use-scroll-animate - Staggered children
+ * Reveal a container's children one after another when the container scrolls
+ * into view, optionally also animating children that are added later.
+ */
+
+interface StaggerOptions extends AnimateOptions {
+    /** Delay between consecutive children in ms (default: 80) */
+    stagger?: number;
+    /**
+     * Watch the container with a MutationObserver and animate children added
+     * later (e.g. infinite lists). Children added after the container was
+     * revealed animate when they scroll into view, staggered per batch.
+     * (default: false)
+     */
+    observeChildren?: boolean;
+}
+
+/**
+ * use-scroll-animate - React Integration
+ * Provides useScrollAnimate and useScrollStagger hooks for React applications.
+ * `useScrollStagger({ observeChildren: true })` also animates children added later.
+ *
+ * Both hooks are thin wrappers around the core engine, so they share its
+ * behaviour: `once`, `offset`, custom easing functions, parallax,
+ * `prefers-reduced-motion` support, and proper cleanup on unmount.
+ */
+
+type ReactRef<T> = {
+    current: T | null;
+};
+/**
+ * Wrap the callbacks that exist at mount so they always call the latest
+ * version from the most recent render (avoids stale closures without
+ * re-creating observers on every render).
+ * @internal
+ */
+declare function withLatestCallbacks(latest: ReactRef<AnimateOptions>): AnimateOptions;
+declare function createReactHooks(React: {
+    useRef: <T>(initial: T | null) => ReactRef<T>;
+    useEffect: (effect: () => (() => void) | void, deps?: unknown[]) => void;
+}): {
+    useScrollAnimate: (options?: AnimateOptions) => ReactRef<Element>;
+    useScrollStagger: (options?: StaggerOptions) => ReactRef<Element>;
+};
+
+export { createReactHooks, withLatestCallbacks };

package/dist/react.js

@@ -0,0 +1,64 @@
+import { c as createScrollAnimate } from './chunks/core-BP-a1iNc.js';
+import { s as staggerChildren } from './chunks/stagger-DTv_WiUQ.js';
+
+/**
+ * use-scroll-animate - React Integration
+ * Provides useScrollAnimate and useScrollStagger hooks for React applications.
+ * `useScrollStagger({ observeChildren: true })` also animates children added later.
+ *
+ * Both hooks are thin wrappers around the core engine, so they share its
+ * behaviour: `once`, `offset`, custom easing functions, parallax,
+ * `prefers-reduced-motion` support, and proper cleanup on unmount.
+ */
+const CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'];
+/**
+ * Wrap the callbacks that exist at mount so they always call the latest
+ * version from the most recent render (avoids stale closures without
+ * re-creating observers on every render).
+ * @internal
+ */
+function withLatestCallbacks(latest) {
+    const initial = latest.current || {};
+    const opts = { ...initial };
+    CALLBACKS.forEach((name) => {
+        if (typeof initial[name] === 'function') {
+            opts[name] = (...args) => latest.current?.[name]?.(...args);
+        }
+    });
+    return opts;
+}
+function createReactHooks(React) {
+    // Created lazily on the client so importing on the server is side-effect free.
+    let instance = null;
+    const getInstance = () => instance || (instance = createScrollAnimate());
+    function useScrollAnimate(options = {}) {
+        const ref = React.useRef(null);
+        const optionsRef = React.useRef(options);
+        optionsRef.current = options;
+        React.useEffect(() => {
+            const el = ref.current;
+            if (!el)
+                return;
+            const sa = getInstance();
+            sa.observe(el, withLatestCallbacks(optionsRef));
+            return () => sa.unobserve(el);
+        }, []);
+        return ref;
+    }
+    function useScrollStagger(options = {}) {
+        const ref = React.useRef(null);
+        const optionsRef = React.useRef(options);
+        optionsRef.current = options;
+        React.useEffect(() => {
+            const container = ref.current;
+            if (!container)
+                return;
+            return staggerChildren(container, withLatestCallbacks(optionsRef), getInstance());
+        }, []);
+        return ref;
+    }
+    return { useScrollAnimate, useScrollStagger };
+}
+
+export { createReactHooks, withLatestCallbacks };
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sources":["../src/react.ts"],"sourcesContent":["/**\n * use-scroll-animate - React Integration\n * Provides useScrollAnimate and useScrollStagger hooks for React applications.\n * `useScrollStagger({ observeChildren: true })` also animates children added later.\n *\n * Both hooks are thin wrappers around the core engine, so they share its\n * behaviour: `once`, `offset`, custom easing functions, parallax,\n * `prefers-reduced-motion` support, and proper cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\ntype ReactRef<T> = { current: T | null };\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/**\n * Wrap the callbacks that exist at mount so they always call the latest\n * version from the most recent render (avoids stale closures without\n * re-creating observers on every render).\n * @internal\n */\nexport function withLatestCallbacks(latest: ReactRef<AnimateOptions>): AnimateOptions {\n  const initial = latest.current || {};\n  const opts: AnimateOptions = { ...initial };\n  CALLBACKS.forEach((name) => {\n    if (typeof initial[name] === 'function') {\n      (opts as any)[name] = (...args: unknown[]) => (latest.current?.[name] as any)?.(...args);\n    }\n  });\n  return opts;\n}\n\nexport function createReactHooks(React: {\n  useRef: <T>(initial: T | null) => ReactRef<T>;\n  useEffect: (effect: () => (() => void) | void, deps?: unknown[]) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const ref = React.useRef<Element>(null);\n    const optionsRef = React.useRef<AnimateOptions>(options);\n    optionsRef.current = options;\n\n    React.useEffect(() => {\n      const el = ref.current;\n      if (!el) return;\n      const sa = getInstance();\n      sa.observe(el, withLatestCallbacks(optionsRef));\n      return () => sa.unobserve(el);\n    }, []);\n\n    return ref;\n  }\n\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const ref = React.useRef<Element>(null);\n    const optionsRef = React.useRef<AnimateOptions>(options);\n    optionsRef.current = options;\n\n    React.useEffect(() => {\n      const container = ref.current;\n      if (!container) return;\n      return staggerChildren(container, withLatestCallbacks(optionsRef) as StaggerOptions, getInstance());\n    }, []);\n\n    return ref;\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAQH,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAU;AAExF;;;;;AAKG;AACG,SAAU,mBAAmB,CAAC,MAAgC,EAAA;AAClE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE;AACpC,IAAA,MAAM,IAAI,GAAmB,EAAE,GAAG,OAAO,EAAE;AAC3C,IAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;QACzB,IAAI,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,UAAU,EAAE;YACtC,IAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAe,KAAM,MAAM,CAAC,OAAO,GAAG,IAAI,CAAS,GAAG,GAAG,IAAI,CAAC;QAC1F;AACF,IAAA,CAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;AAEM,SAAU,gBAAgB,CAAC,KAGhC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAU,IAAI,CAAC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,OAAO,CAAC;AACxD,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO;AACtB,YAAA,IAAI,CAAC,EAAE;gBAAE;AACT,YAAA,MAAM,EAAE,GAAG,WAAW,EAAE;YACxB,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;YAC/C,OAAO,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;QAC/B,CAAC,EAAE,EAAE,CAAC;AAEN,QAAA,OAAO,GAAG;IACZ;IAEA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAU,IAAI,CAAC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,OAAO,CAAC;AACxD,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO;AAC7B,YAAA,IAAI,CAAC,SAAS;gBAAE;AAChB,YAAA,OAAO,eAAe,CAAC,SAAS,EAAE,mBAAmB,CAAC,UAAU,CAAmB,EAAE,WAAW,EAAE,CAAC;QACrG,CAAC,EAAE,EAAE,CAAC;AAEN,QAAA,OAAO,GAAG;IACZ;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}

package/dist/solid.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var core = require('./chunks/core-B_J4rXbC.cjs');
+var stagger = require('./chunks/stagger-DHw0ExuR.cjs');
+
+/**
+ * use-scroll-animate - Solid integration
+ *
+ * ```tsx
+ * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'use-scroll-animate/solid';
+ * false && scrollAnimate; // keep the directive import (TypeScript)
+ *
+ * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>
+ * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>
+ * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>
+ * ```
+ *
+ * `solid-js` is an optional peer dependency (only needed for this entry).
+ */
+let shared = null;
+const getInstance = (own) => own || shared || (shared = core.createScrollAnimate());
+function read(accessor) {
+    const v = accessor?.();
+    return (v && v !== true ? v : {});
+}
+function observe(el, options) {
+    const { instance, ...opts } = options;
+    const sa = getInstance(instance);
+    // Wait until the element is in the document (directives/refs run before insertion).
+    solidJs.onMount(() => sa.observe(el, opts));
+    solidJs.onCleanup(() => sa.unobserve(el));
+}
+/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */
+function scrollAnimate(el, accessor) {
+    observe(el, read(accessor));
+}
+/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
+function scrollStagger(el, accessor) {
+    const { instance, ...opts } = read(accessor);
+    let stop;
+    solidJs.onMount(() => {
+        stop = stagger.staggerChildren(el, opts, getInstance(instance));
+    });
+    solidJs.onCleanup(() => stop?.());
+}
+/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */
+function useScrollAnimate(options = {}) {
+    let el;
+    const { instance, ...opts } = options;
+    const sa = getInstance(instance);
+    solidJs.onMount(() => el && sa.observe(el, opts));
+    solidJs.onCleanup(() => el && sa.unobserve(el));
+    return (node) => {
+        el = node;
+    };
+}
+
+exports.scrollAnimate = scrollAnimate;
+exports.scrollStagger = scrollStagger;
+exports.useScrollAnimate = useScrollAnimate;
+//# sourceMappingURL=solid.cjs.map

package/dist/solid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid.cjs","sources":["../src/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate - Solid integration\n *\n * ```tsx\n * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'use-scroll-animate/solid';\n * false && scrollAnimate; // keep the directive import (TypeScript)\n *\n * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>\n * ```\n *\n * `solid-js` is an optional peer dependency (only needed for this entry).\n */\n\nimport { onCleanup, onMount } from 'solid-js';\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface SolidScrollAnimateOptions extends AnimateOptions {\n  instance?: ScrollAnimateInstance;\n}\nexport interface SolidScrollStaggerOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\ndeclare module 'solid-js' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface Directives {\n      scrollAnimate: SolidScrollAnimateOptions | true;\n      scrollStagger: SolidScrollStaggerOptions | true;\n    }\n  }\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nfunction read<T>(accessor?: () => T | true | undefined): T {\n  const v = accessor?.();\n  return (v && v !== true ? v : {}) as T;\n}\n\nfunction observe(el: Element, options: SolidScrollAnimateOptions): void {\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  // Wait until the element is in the document (directives/refs run before insertion).\n  onMount(() => sa.observe(el, opts));\n  onCleanup(() => sa.unobserve(el));\n}\n\n/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */\nexport function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void {\n  observe(el, read(accessor));\n}\n\n/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */\nexport function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void {\n  const { instance, ...opts } = read<SolidScrollStaggerOptions>(accessor);\n  let stop: (() => void) | undefined;\n  onMount(() => {\n    stop = staggerChildren(el, opts, getInstance(instance));\n  });\n  onCleanup(() => stop?.());\n}\n\n/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */\nexport function useScrollAnimate(options: SolidScrollAnimateOptions = {}): (el: Element) => void {\n  let el: Element | undefined;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  onMount(() => el && sa.observe(el, opts));\n  onCleanup(() => el && sa.unobserve(el));\n  return (node: Element) => {\n    el = node;\n  };\n}\n"],"names":["createScrollAnimate","onMount","onCleanup","staggerChildren"],"mappings":";;;;;;AAAA;;;;;;;;;;;;;AAaG;AAwBH,IAAI,MAAM,GAAiC,IAAI;AAC/C,MAAM,WAAW,GAAG,CAAC,GAA2B,KAAK,GAAG,IAAI,MAAM,KAAK,MAAM,GAAGA,wBAAmB,EAAE,CAAC;AAEtG,SAAS,IAAI,CAAI,QAAqC,EAAA;AACpD,IAAA,MAAM,CAAC,GAAG,QAAQ,IAAI;AACtB,IAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,GAAG,EAAE;AAClC;AAEA,SAAS,OAAO,CAAC,EAAW,EAAE,OAAkC,EAAA;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;;AAEhC,IAAAC,eAAO,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACnCC,iBAAS,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;AACnC;AAEA;AACM,SAAU,aAAa,CAAC,EAAW,EAAE,QAA6D,EAAA;IACtG,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC7B;AAEA;AACM,SAAU,aAAa,CAAC,EAAW,EAAE,QAA6D,EAAA;IACtG,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAA4B,QAAQ,CAAC;AACvE,IAAA,IAAI,IAA8B;IAClCD,eAAO,CAAC,MAAK;AACX,QAAA,IAAI,GAAGE,uBAAe,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;AACzD,IAAA,CAAC,CAAC;IACFD,iBAAS,CAAC,MAAM,IAAI,IAAI,CAAC;AAC3B;AAEA;AACM,SAAU,gBAAgB,CAAC,OAAA,GAAqC,EAAE,EAAA;AACtE,IAAA,IAAI,EAAuB;IAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAAD,eAAO,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACzC,IAAAC,iBAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CAAC,IAAa,KAAI;QACvB,EAAE,GAAG,IAAI;AACX,IAAA,CAAC;AACH;;;;;;"}