npm - use-scroll-animate - Versions diffs - 1.2.0 → 1.5.0 - Mend

use-scroll-animate 1.2.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/CHANGELOG.md +125 -58
package/LICENSE +21 -21
package/README.md +256 -214
package/README_ja.md +106 -69
package/README_zh.md +106 -69
package/dist/index.d.mts +316 -0
package/dist/index.d.ts +316 -0
package/dist/index.esm.js +1249 -697
package/dist/index.esm.js.map +1 -1
package/dist/index.js +1263 -708
package/dist/index.js.map +1 -1
package/dist/index.mjs +1249 -0
package/dist/index.mjs.map +1 -0
package/dist/index.umd.js +13 -14
package/dist/index.umd.js.map +1 -1
package/dist/types/core.d.ts +41 -7
package/dist/types/index.d.ts +36 -33
package/dist/types/presets.d.ts +15 -15
package/dist/types/react.d.ts +29 -18
package/dist/types/sequence.d.ts +38 -0
package/dist/types/stagger.d.ts +25 -0
package/dist/types/types.d.ts +153 -123
package/dist/types/vue.d.ts +28 -18
package/package.json +81 -35
package/CONTRIBUTING.md +0 -76
package/examples/react/App.tsx +0 -61
package/examples/vanilla/index.html +0 -201
package/rollup.config.js +0 -41
package/src/core.ts +0 -373
package/src/index.ts +0 -48
package/src/presets.ts +0 -148
package/src/react.ts +0 -175
package/src/types.ts +0 -161
package/src/vue.ts +0 -118
package/tsconfig.json +0 -17

package/examples/vanilla/index.html DELETED Viewed

@@ -1,201 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>use-scroll-animate — Vanilla JS Demo</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #fff; }
-    .hero {
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      padding: 2rem;
-      overflow: hidden; /* For parallax */
-    }
-    .hero h1 { font-size: clamp(2rem, 6vw, 5rem); font-weight: 800; }
-    .hero p { font-size: 1.2rem; color: #aaa; margin-top: 1rem; }
-    .section {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 6rem 2rem;
-    }
-    .card {
-      background: #1a1a1a;
-      border: 1px solid #333;
-      border-radius: 12px;
-      padding: 2rem;
-      margin-bottom: 2rem;
-    }
-    .card h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
-    .card p { color: #aaa; line-height: 1.6; }
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
-    .badge {
-      background: linear-gradient(135deg, #6366f1, #8b5cf6);
-      border-radius: 8px;
-      padding: 1.5rem;
-      text-align: center;
-    }
-    .badge h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
-    .badge span { font-size: 0.85rem; opacity: 0.8; }
-    .scroll-hint { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); color: #666; font-size: 0.85rem; }
-    /* Parallax specific styles */
-    .parallax-bg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: url("https://picsum.photos/1920/1080?random=1") no-repeat center center/cover;
-      z-index: -1;
-    }
-    .parallax-text {
-      font-size: 3rem;
-      font-weight: bold;
-      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-      margin-top: 50vh;
-      text-align: center;
-    }
-    /* Progress bar styles */
-    .progress-container {
-      width: 80%;
-      height: 20px;
-      background-color: #333;
-      border-radius: 10px;
-      margin: 2rem auto;
-      overflow: hidden;
-    }
-    .progress-bar {
-      height: 100%;
-      width: 0%;
-      background-color: #4CAF50;
-      border-radius: 10px;
-      transition: width 0.1s linear; /* Smooth transition for progress */
-    }
-  </style>
-</head>
-<body>
-  <div class="hero">
-    <div class="parallax-bg" data-sa data-sa-parallax-y="-200px" data-sa-parallax-speed="0.3"></div>
-    <h1 data-sa data-sa-animation="fade-in-down, zoom-in" data-sa-duration="1000">
-      use-scroll-animate
-    </h1>
-    <p data-sa data-sa-animation="fade-in-up" data-sa-delay="300">
-      Lightweight. Dependency-free. Blazing fast.
-    </p>
-  </div>
-  <div class="section">
-    <div class="card" data-sa data-sa-animation="fade-in-left">
-      <h2>Zero Dependencies</h2>
-      <p>Built entirely on native browser APIs — IntersectionObserver and the Web Animations API. No lodash, no jQuery, no bloat.</p>
-    </div>
-    <div class="card" data-sa data-sa-animation="fade-in-right" data-sa-delay="100">
-      <h2>TypeScript First</h2>
-      <p>Written in TypeScript with comprehensive type definitions. Enjoy full IntelliSense and type safety in your IDE.</p>
-    </div>
-    <div class="card" data-sa data-sa-animation="zoom-in" data-sa-delay="200">
-      <h2>Framework Agnostic</h2>
-      <p>Works with Vanilla JS, React, Vue, Svelte, and any other framework. First-class hooks and composables included.</p>
-    </div>
-  </div>
-  <div class="section">
-    <h2 style="text-align: center; margin-bottom: 2rem;" data-sa data-sa-animation="fade-in">New in v1.1.0</h2>
-    <div class="card" data-sa data-sa-animation="slide-left" data-sa-delay="0">
-      <h2>Multiple Animations</h2>
-      <p>Combine presets like `fade-in-up, zoom-in` for richer effects.</p>
-    </div>
-    <div class="card" data-sa data-sa-animation="slide-right" data-sa-delay="100">
-      <h2>Parallax Effect</h2>
-      <p>Elements can move, rotate, or scale based on scroll position. Try scrolling!</p>
-      <div style="height: 100px; background: #222; margin-top: 1rem; display: flex; align-items: center; justify-content: center;" data-sa data-sa-parallax-y="-50px" data-sa-parallax-rotate="15" data-sa-parallax-speed="0.8">
-        <span style="font-size: 1.5rem;">Parallax Element</span>
-      </div>
-    </div>
-    <div class="card" data-sa data-sa-animation="fade-in-up" data-sa-delay="200">
-      <h2>Scroll Progress Listener</h2>
-      <p>Get real-time scroll progress (0 to 1) for any element.</p>
-      <div class="progress-container">
-        <div class="progress-bar" id="myProgressBar"></div>
-      </div>
-      <p id="progressText" style="text-align: center;">0%</p>
-    </div>
-  </div>
-  <div class="section">
-    <div class="grid">
-      <div class="badge" data-sa data-sa-animation="fade-in-up" data-sa-stagger="80">
-        <h3>fade-in-up</h3>
-        <span>Classic entrance</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="zoom-in" data-sa-stagger="80">
-        <h3>zoom-in</h3>
-        <span>Scale reveal</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="flip-x" data-sa-stagger="80">
-        <h3>flip-x</h3>
-        <span>3D flip</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="blur-in" data-sa-stagger="80">
-        <h3>blur-in</h3>
-        <span>Focus reveal</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="bounce" data-sa-stagger="80">
-        <h3>bounce</h3>
-        <span>Spring physics</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="rotate-in" data-sa-stagger="80">
-        <h3>rotate-in</h3>
-        <span>Spin entrance</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="skew-in" data-sa-stagger="80">
-        <h3>skew-in</h3>
-        <span>Slanted entrance</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="scale-x" data-sa-stagger="80">
-        <h3>scale-x</h3>
-        <span>Horizontal scale</span>
-      </div>
-      <div class="badge" data-sa data-sa-animation="scale-y" data-sa-stagger="80">
-        <h3>scale-y</h3>
-        <span>Vertical scale</span>
-      </div>
-    </div>
-  </div>
-  <p class="scroll-hint">↓ Scroll to see animations</p>
-  <script type="module">
-    import ScrollAnimate from '../../dist/index.esm.js';
-    const sa = ScrollAnimate.createScrollAnimate(); // Create a new instance to use onProgress
-    sa.init();
-    // Observe the progress bar for scroll progress
-    sa.observe(
-      document.getElementById("myProgressBar"),
-      {
-        onProgress: (el, progress) => {
-          (el as HTMLElement).style.width = `${progress * 100}%`;
-          document.getElementById("progressText").innerText = `${Math.round(progress * 100)}%`;
-        },
-        threshold: Array.from({ length: 101 }, (_, i) => i / 100), // Full range for progress
-      }
-    );
-  </script>
-</body>
-</html>

package/rollup.config.js DELETED Viewed

@@ -1,41 +0,0 @@
-const typescript = require('@rollup/plugin-typescript');
-const resolve = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const terser = require('@rollup/plugin-terser');
-module.exports = [
-  // Main bundle
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: 'dist/index.js',
-        format: 'cjs',
-        sourcemap: true,
-        exports: 'named',
-      },
-      {
-        file: 'dist/index.esm.js',
-        format: 'es',
-        sourcemap: true,
-      },
-      {
-        file: 'dist/index.umd.js',
-        format: 'umd',
-        name: 'ScrollAnimate',
-        sourcemap: true,
-        plugins: [terser()],
-      },
-    ],
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: './tsconfig.json',
-        declaration: true,
-        declarationDir: './dist/types',
-        rootDir: './src',
-      }),
-    ],
-  },
-];

package/src/core.ts DELETED Viewed

@@ -1,373 +0,0 @@
-/**
- * use-scroll-animate - Core Implementation
- * Uses IntersectionObserver + Web Animations API for zero-dependency,
- * high-performance scroll-triggered animations.
- */
-import type {
-  AnimateOptions,
-  AnimatedElement,
-  ScrollAnimateConfig,
-  ScrollAnimateInstance,
-  ParallaxOptions,
-} from './types';
-import { resolvePreset, resolveEasing } from './presets';
-const DEFAULT_CONFIG: Required<ScrollAnimateConfig> = {
-  defaultAnimation: 'fade-in-up',
-  defaultDuration: 600,
-  defaultDelay: 0,
-  defaultEasing: 'ease',
-  defaultThreshold: 0.1,
-  defaultRootMargin: '0px',
-  defaultRepeat: false,
-  defaultOnce: true,
-  defaultOffset: 0,
-  hiddenClass: 'sa-hidden',
-  visibleClass: 'sa-visible',
-  useClassNames: false,
-  disabled: false,
-  root: null,
-};
-const DEFAULT_OPTIONS: Required<AnimateOptions> = {
-  animation: 'fade-in-up',
-  duration: 600,
-  delay: 0,
-  easing: 'ease',
-  threshold: 0.1,
-  rootMargin: '0px',
-  repeat: false,
-  once: true,
-  offset: 0,
-  stagger: 0,
-  parallax: {},
-  onStart: () => undefined,
-  onComplete: () => undefined,
-  onEnter: () => undefined,
-  onLeave: () => undefined,
-  onProgress: () => undefined,
-};
-function parseDataAttributes(el: Element, config: Required<ScrollAnimateConfig>): Required<AnimateOptions> {
-  const dataset = (el as HTMLElement).dataset;
-  const opts: AnimateOptions = {};
-  if (dataset.saAnimation) {
-    const anim = dataset.saAnimation;
-    opts.animation = anim.includes(',')
-      ? anim.split(',').map(s => s.trim()) as any
-      : anim as any;
-  }
-  if (dataset.saDuration) opts.duration = parseInt(dataset.saDuration, 10);
-  if (dataset.saDelay) opts.delay = parseInt(dataset.saDelay, 10);
-  if (dataset.saEasing) opts.easing = dataset.saEasing;
-  if (dataset.saThreshold) {
-    const t = dataset.saThreshold;
-    opts.threshold = t.includes(',') ? t.split(',').map(parseFloat) : parseFloat(t);
-  }
-  if (dataset.saRootMargin) opts.rootMargin = dataset.saRootMargin;
-  if (dataset.saRepeat !== undefined) opts.repeat = dataset.saRepeat !== 'false';
-  if (dataset.saOnce !== undefined) opts.once = dataset.saOnce !== 'false';
-  if (dataset.saOffset) opts.offset = parseInt(dataset.saOffset, 10);
-  if (dataset.saStagger) opts.stagger = parseInt(dataset.saStagger, 10);
-  if (dataset.saParallaxX || dataset.saParallaxY || dataset.saParallaxRotate || dataset.saParallaxScale) {
-    opts.parallax = {
-      x: dataset.saParallaxX,
-      y: dataset.saParallaxY,
-      rotate: dataset.saParallaxRotate ? parseFloat(dataset.saParallaxRotate) : undefined,
-      scale: dataset.saParallaxScale ? parseFloat(dataset.saParallaxScale) : undefined,
-      speed: dataset.saParallaxSpeed ? parseFloat(dataset.saParallaxSpeed) : 1,
-    };
-  }
-  return mergeOptions(opts, config);
-}
-function mergeOptions(
-  opts: AnimateOptions,
-  config: Required<ScrollAnimateConfig>
-): Required<AnimateOptions> {
-  const repeat = opts.repeat ?? config.defaultRepeat;
-  return {
-    animation: opts.animation ?? config.defaultAnimation,
-    duration: opts.duration ?? config.defaultDuration,
-    delay: opts.delay ?? config.defaultDelay,
-    easing: opts.easing ?? config.defaultEasing,
-    threshold: opts.threshold ?? config.defaultThreshold,
-    rootMargin: opts.rootMargin ?? config.defaultRootMargin,
-    repeat: repeat,
-    once: opts.once ?? (repeat ? false : config.defaultOnce),
-    offset: opts.offset ?? config.defaultOffset,
-    stagger: opts.stagger ?? DEFAULT_OPTIONS.stagger,
-    parallax: opts.parallax ?? DEFAULT_OPTIONS.parallax,
-    onStart: opts.onStart ?? DEFAULT_OPTIONS.onStart,
-    onComplete: opts.onComplete ?? DEFAULT_OPTIONS.onComplete,
-    onEnter: opts.onEnter ?? DEFAULT_OPTIONS.onEnter,
-    onLeave: opts.onLeave ?? DEFAULT_OPTIONS.onLeave,
-    onProgress: opts.onProgress ?? DEFAULT_OPTIONS.onProgress,
-  };
-}
-function resolveTargets(target: string | Element | NodeList | Element[]): Element[] {
-  if (typeof target === 'string') {
-    return Array.from(document.querySelectorAll(target));
-  }
-  if (target instanceof Element) {
-    return [target];
-  }
-  if (target instanceof NodeList) {
-    return Array.from(target) as Element[];
-  }
-  if (Array.isArray(target)) {
-    return target;
-  }
-  return [];
-}
-function prefersReducedMotion(): boolean {
-  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
-}
-function runAnimation(
-  el: Element,
-  opts: Required<AnimateOptions>,
-  config: Required<ScrollAnimateConfig>,
-  staggerIndex = 0
-): void {
-  const { animation, duration, delay, easing, stagger, onStart, onComplete } = opts;
-  const totalDelay = delay + staggerIndex * stagger;
-  const preset = resolvePreset(animation);
-  const easingValue = resolveEasing(easing);
-  if (config.useClassNames) {
-    if (totalDelay > 0) {
-      (el as HTMLElement).style.animationDelay = `${totalDelay}ms`;
-    }
-    el.classList.remove(config.hiddenClass);
-    el.classList.add(config.visibleClass);
-    onStart(el);
-    setTimeout(() => onComplete(el), duration + totalDelay);
-    return;
-  }
-  const keyframes: Keyframe[] = [
-    preset.from as Keyframe,
-    preset.to as Keyframe,
-  ];
-  const timing: KeyframeAnimationOptions = {
-    duration,
-    delay: totalDelay,
-    easing: easingValue,
-    fill: 'both',
-  };
-  // Check if Web Animations API is supported
-  if (typeof el.animate === 'function') {
-    const anim = el.animate(keyframes, timing);
-    onStart(el);
-    anim.onfinish = () => onComplete(el);
-  } else {
-    // Fallback for older browsers
-    (el as HTMLElement).style.opacity = '1';
-    (el as HTMLElement).style.transform = 'none';
-    onStart(el);
-    onComplete(el);
-  }
-}
-function applyParallax(el: Element, progress: number, parallax: ParallaxOptions): void {
-  const { x = 0, y = 0, rotate = 0, scale = 1, speed = 1 } = parallax;
-  const p = (progress - 0.5) * 2 * speed;
-  let transform = '';
-  if (x) transform += ` translateX(${typeof x === 'number' ? x * p + 'px' : 'calc(' + x + ' * ' + p + ')'})`;
-  if (y) transform += ` translateY(${typeof y === 'number' ? y * p + 'px' : 'calc(' + y + ' * ' + p + ')'})`;
-  if (rotate) transform += ` rotate(${rotate * p}deg)`;
-  if (scale !== 1) transform += ` scale(${1 + (scale - 1) * p})`;
-  (el as HTMLElement).style.transform = transform;
-}
-function hideElement(el: Element, config: Required<ScrollAnimateConfig>): void {
-  if (config.useClassNames) {
-    el.classList.add(config.hiddenClass);
-    el.classList.remove(config.visibleClass);
-  } else {
-    (el as HTMLElement).style.opacity = '0';
-  }
-}
-export function createScrollAnimate(userConfig: ScrollAnimateConfig = {}): ScrollAnimateInstance {
-  let config: Required<ScrollAnimateConfig> = { ...DEFAULT_CONFIG, ...userConfig };
-  const registry = new Map<Element, AnimatedElement>();
-  function createObserver(opts: Required<AnimateOptions>): IntersectionObserver {
-    // Handle offset by adjusting rootMargin
-    const rootMargin = opts.offset !== 0
-      ? `${opts.rootMargin.split(' ')[0]} 0px -${opts.offset}px 0px`
-      : opts.rootMargin;
-    return new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const record = registry.get(entry.target);
-          if (!record) return;
-          if (entry.isIntersecting) {
-            opts.onEnter(entry.target);
-            if (!record.animated || opts.repeat) {
-              const parent = entry.target.parentElement;
-              let staggerIndex = 0;
-              if (parent && opts.stagger > 0) {
-                // BUG FIX: Use a more robust way to find index among siblings that are also observed
-                const siblings = Array.from(parent.children).filter((c) => registry.has(c));
-                staggerIndex = siblings.indexOf(entry.target);
-              }
-              if (!config.disabled && !prefersReducedMotion()) {
-                runAnimation(entry.target, opts, config, staggerIndex);
-              } else {
-                (entry.target as HTMLElement).style.opacity = '1';
-                (entry.target as HTMLElement).style.transform = '';
-              }
-              record.animated = true;
-              // Handle 'once' functionality
-              if (opts.once) {
-                record.observer.unobserve(entry.target);
-                record.progressObserver?.unobserve(entry.target);
-                // We don't delete from registry yet to allow other potential interactions
-              }
-            }
-          } else {
-            opts.onLeave(entry.target);
-            if (opts.repeat && record.animated) {
-              hideElement(entry.target, config);
-              record.animated = false;
-            }
-          }
-        });
-      },
-      {
-        threshold: typeof opts.threshold === 'number' ? opts.threshold : opts.threshold[0],
-        rootMargin: rootMargin,
-        root: config.root,
-      }
-    );
-  }
-  function createProgressObserver(el: Element, opts: Required<AnimateOptions>): IntersectionObserver {
-    const thresholds = [];
-    for (let i = 0; i <= 100; i++) thresholds.push(i / 100);
-    return new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const progress = entry.intersectionRatio;
-          opts.onProgress(el, progress);
-          if (Object.keys(opts.parallax).length > 0) {
-            applyParallax(el, progress, opts.parallax);
-          }
-        });
-      },
-      {
-        threshold: thresholds,
-        rootMargin: opts.rootMargin,
-        root: config.root,
-      }
-    );
-  }
-  function observeElement(el: Element, opts: Required<AnimateOptions>): void {
-    if (registry.has(el)) return;
-    if (!config.useClassNames) {
-      hideElement(el, config);
-    }
-    const observer = createObserver(opts);
-    observer.observe(el);
-    let progressObserver;
-    if (Object.keys(opts.parallax).length > 0 || opts.onProgress !== DEFAULT_OPTIONS.onProgress) {
-      progressObserver = createProgressObserver(el, opts);
-      progressObserver.observe(el);
-    }
-    registry.set(el, {
-      element: el,
-      options: opts,
-      observer,
-      animated: false,
-      progressObserver
-    });
-  }
-  const instance: ScrollAnimateInstance = {
-    observe(target, options = {}) {
-      const elements = resolveTargets(target);
-      const opts = mergeOptions(options, config);
-      elements.forEach((el) => observeElement(el, opts));
-    },
-    unobserve(target) {
-      const elements = resolveTargets(target);
-      elements.forEach((el) => {
-        const record = registry.get(el);
-        if (record) {
-          record.observer.disconnect(); // BUG FIX: Use disconnect for better cleanup
-          record.progressObserver?.disconnect();
-          registry.delete(el);
-        }
-      });
-    },
-    init(rootElement = document) {
-      const elements = rootElement.querySelectorAll('[data-sa]');
-      elements.forEach((el) => {
-        const opts = parseDataAttributes(el, config);
-        observeElement(el, opts);
-      });
-    },
-    destroy() {
-      registry.forEach((record) => {
-        record.observer.disconnect();
-        record.progressObserver?.disconnect();
-      });
-      registry.clear();
-    },
-    refresh() {
-      const entries = Array.from(registry.entries());
-      instance.destroy();
-      entries.forEach(([el, record]) => {
-        observeElement(el, record.options);
-      });
-    },
-    animate(target, options = {}) {
-      const elements = resolveTargets(target);
-      const opts = mergeOptions(options, config);
-      elements.forEach((el) => {
-        runAnimation(el, opts, config, 0);
-      });
-    },
-    getObservedElements() {
-      return Array.from(registry.values());
-    },
-    configure(newConfig) {
-      config = { ...config, ...newConfig };
-    },
-  };
-  return instance;
-}

package/src/index.ts DELETED Viewed

@@ -1,48 +0,0 @@
-/**
- * use-scroll-animate
- *
- * A lightweight (~4KB gzipped), dependency-free scroll animation library
- * for modern web applications. Built with TypeScript, powered by
- * IntersectionObserver and the Web Animations API.
- *
- * @version 1.0.0
- * @license MIT
- * @see https://github.com/use-scroll-animate/use-scroll-animate
- */
-export { createScrollAnimate } from './core';
-export { PRESETS, resolvePreset, resolveEasing, EASING_MAP } from './presets';
-export { createReactHooks } from './react';
-export { createVueComposables } from './vue';
-export type {
-  AnimationPreset,
-  EasingType,
-  AnimationKeyframe,
-  CustomAnimation,
-  AnimateOptions,
-  ScrollAnimateConfig,
-  AnimatedElement,
-  ScrollAnimateInstance,
-} from './types';
-// Default export: a ready-to-use singleton instance
-import { createScrollAnimate } from './core';
-/**
- * Default singleton instance of ScrollAnimate.
- * Ready to use out of the box with sensible defaults.
- *
- * @example
- * ```js
- * import ScrollAnimate from 'use-scroll-animate';
- *
- * // Auto-initialize all elements with data-sa attribute
- * ScrollAnimate.init();
- *
- * // Or manually observe elements
- * ScrollAnimate.observe('.my-element', { animation: 'fade-in-up' });
- * ```
- */
-const ScrollAnimate = createScrollAnimate();
-export default ScrollAnimate;