use-scroll-animate 1.2.0 → 1.5.0

package/src/presets.ts

@@ -1,148 +0,0 @@
-/**
- * use-scroll-animate - Animation Presets
- * Defines keyframes for all built-in animation presets
- */
-
-import type { AnimationPreset, CustomAnimation } from './types';
-
-type KeyframeMap = {
-  from: Record<string, string | number>;
-  to: Record<string, string | number>;
-};
-
-export const PRESETS: Record<AnimationPreset, KeyframeMap> = {
-  'fade-in': {
-    from: { opacity: 0 },
-    to: { opacity: 1 },
-  },
-  'fade-in-up': {
-    from: { opacity: 0, transform: 'translateY(40px)' },
-    to: { opacity: 1, transform: 'translateY(0)' },
-  },
-  'fade-in-down': {
-    from: { opacity: 0, transform: 'translateY(-40px)' },
-    to: { opacity: 1, transform: 'translateY(0)' },
-  },
-  'fade-in-left': {
-    from: { opacity: 0, transform: 'translateX(-40px)' },
-    to: { opacity: 1, transform: 'translateX(0)' },
-  },
-  'fade-in-right': {
-    from: { opacity: 0, transform: 'translateX(40px)' },
-    to: { opacity: 1, transform: 'translateX(0)' },
-  },
-  'zoom-in': {
-    from: { opacity: 0, transform: 'scale(0.8)' },
-    to: { opacity: 1, transform: 'scale(1)' },
-  },
-  'zoom-out': {
-    from: { opacity: 0, transform: 'scale(1.2)' },
-    to: { opacity: 1, transform: 'scale(1)' },
-  },
-  'flip-x': {
-    from: { opacity: 0, transform: 'rotateX(-90deg)' },
-    to: { opacity: 1, transform: 'rotateX(0)' },
-  },
-  'flip-y': {
-    from: { opacity: 0, transform: 'rotateY(-90deg)' },
-    to: { opacity: 1, transform: 'rotateY(0)' },
-  },
-  'slide-up': {
-    from: { transform: 'translateY(100%)' },
-    to: { transform: 'translateY(0)' },
-  },
-  'slide-down': {
-    from: { transform: 'translateY(-100%)' },
-    to: { transform: 'translateY(0)' },
-  },
-  'slide-left': {
-    from: { transform: 'translateX(-100%)' },
-    to: { transform: 'translateX(0)' },
-  },
-  'slide-right': {
-    from: { transform: 'translateX(100%)' },
-    to: { transform: 'translateX(0)' },
-  },
-  'bounce': {
-    from: { opacity: 0, transform: 'translateY(-60px)' },
-    to: { opacity: 1, transform: 'translateY(0)' },
-  },
-  'rotate-in': {
-    from: { opacity: 0, transform: 'rotate(-180deg) scale(0.5)' },
-    to: { opacity: 1, transform: 'rotate(0deg) scale(1)' },
-  },
-  'blur-in': {
-    from: { opacity: 0, filter: 'blur(12px)' },
-    to: { opacity: 1, filter: 'blur(0px)' },
-  },
-  'skew-in': {
-    from: { opacity: 0, transform: 'skewX(20deg) translateX(30px)' },
-    to: { opacity: 1, transform: 'skewX(0deg) translateX(0)' },
-  },
-  'scale-x': {
-    from: { transform: 'scaleX(0)' },
-    to: { transform: 'scaleX(1)' },
-  },
-  'scale-y': {
-    from: { transform: 'scaleY(0)' },
-    to: { transform: 'scaleY(1)' },
-  },
-  'shimmer': {
-    from: { opacity: 0.5, filter: 'brightness(1)' },
-    to: { opacity: 1, filter: 'brightness(1.5)' },
-  },
-  'pulse': {
-    from: { transform: 'scale(1)' },
-    to: { transform: 'scale(1.05)' },
-  },
-  'swing': {
-    from: { transform: 'rotate(-10deg)' },
-    to: { transform: 'rotate(10deg)' },
-  },
-};
-
-export function resolvePreset(animation: AnimationPreset | AnimationPreset[] | CustomAnimation): KeyframeMap {
-  if (typeof animation === 'string') {
-    return PRESETS[animation] ?? PRESETS['fade-in-up'];
-  }
-  
-  if (Array.isArray(animation)) {
-    const combined: KeyframeMap = { from: {}, to: {} };
-    animation.forEach(name => {
-      const preset = PRESETS[name];
-      if (preset) {
-        Object.entries(preset.from).forEach(([key, val]) => {
-          if (key === 'transform' && combined.from[key]) {
-            combined.from[key] = `${combined.from[key]} ${val}`;
-          } else {
-            combined.from[key] = val;
-          }
-        });
-        Object.entries(preset.to).forEach(([key, val]) => {
-          if (key === 'transform' && combined.to[key]) {
-            combined.to[key] = `${combined.to[key]} ${val}`;
-          } else {
-            combined.to[key] = val;
-          }
-        });
-      }
-    });
-    return combined;
-  }
-  
-  return animation;
-}
-
-/** Easing to CSS cubic-bezier mapping */
-export const EASING_MAP: Record<string, string> = {
-  linear: 'linear',
-  ease: 'ease',
-  'ease-in': 'ease-in',
-  'ease-out': 'ease-out',
-  'ease-in-out': 'ease-in-out',
-  spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-};
-
-export function resolveEasing(easing: string): string {
-  return EASING_MAP[easing] ?? easing;
-}

package/src/react.ts

@@ -1,175 +0,0 @@
-/**
- * use-scroll-animate - React Integration
- * Provides useScrollAnimate and useScrollRef hooks for React applications.
- */
-
-import type { AnimateOptions } from './types';
-import { resolvePreset, resolveEasing } from './presets';
-
-type ReactRef<T> = { current: T | null };
-
-export function createReactHooks(React: {
-  useRef: <T>(initial: T | null) => ReactRef<T>;
-  useEffect: (effect: () => (() => void) | void, deps?: unknown[]) => void;
-}) {
-  function useScrollAnimate(options: AnimateOptions = {}) {
-    const ref = React.useRef<Element>(null);
-
-    React.useEffect(() => {
-      const el = ref.current;
-      if (!el) return;
-
-      const {
-        animation = 'fade-in-up',
-        duration = 600,
-        delay = 0,
-        easing = 'ease',
-        threshold = 0.1,
-        rootMargin = '0px',
-        repeat = false,
-        parallax = {},
-        onStart,
-        onComplete,
-        onEnter,
-        onLeave,
-        onProgress,
-      } = options;
-
-      const preset = resolvePreset(animation);
-      const easingValue = resolveEasing(easing);
-      let animated = false;
-
-      (el as HTMLElement).style.opacity = '0';
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              onEnter?.(el);
-              if (!animated || repeat) {
-                const keyframes: Keyframe[] = [
-                  preset.from as Keyframe,
-                  preset.to as Keyframe,
-                ];
-                const anim = el.animate(keyframes, {
-                  duration,
-                  delay,
-                  easing: easingValue,
-                  fill: 'both',
-                });
-                onStart?.(el);
-                anim.onfinish = () => onComplete?.(el);
-                animated = true;
-                if (!repeat && !Object.keys(parallax).length && !onProgress) {
-                  observer.unobserve(el);
-                }
-              }
-            } else {
-              onLeave?.(el);
-              if (repeat && animated) {
-                (el as HTMLElement).style.opacity = '0';
-                animated = false;
-              }
-            }
-          });
-        },
-        { threshold: typeof threshold === 'number' ? threshold : threshold[0], rootMargin }
-      );
-
-      let progressObserver: IntersectionObserver | null = null;
-      if (Object.keys(parallax).length > 0 || onProgress) {
-        const thresholds = [];
-        for (let i = 0; i <= 100; i++) thresholds.push(i / 100);
-        
-        progressObserver = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              const progress = entry.intersectionRatio;
-              onProgress?.(el, progress);
-              
-              if (Object.keys(parallax).length > 0) {
-                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;
-              }
-            });
-          },
-          { threshold: thresholds, rootMargin }
-        );
-        progressObserver.observe(el);
-      }
-
-      observer.observe(el);
-      return () => {
-        observer.disconnect();
-        progressObserver?.disconnect();
-      };
-    }, []);
-
-    return ref;
-  }
-
-  function useScrollStagger(options: AnimateOptions & { stagger?: number } = {}) {
-    const ref = React.useRef<Element>(null);
-
-    React.useEffect(() => {
-      const container = ref.current;
-      if (!container) return;
-
-      const {
-        animation = 'fade-in-up',
-        duration = 600,
-        delay = 0,
-        easing = 'ease',
-        threshold = 0.1,
-        rootMargin = '0px',
-        stagger = 80,
-      } = options;
-
-      const children = Array.from(container.children) as HTMLElement[];
-      const preset = resolvePreset(animation);
-      const easingValue = resolveEasing(easing);
-
-      children.forEach((child) => {
-        child.style.opacity = '0';
-      });
-
-      let animated = false;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && !animated) {
-              animated = true;
-              children.forEach((child, i) => {
-                child.animate(
-                  [preset.from as Keyframe, preset.to as Keyframe],
-                  {
-                    duration,
-                    delay: delay + i * stagger,
-                    easing: easingValue,
-                    fill: 'both',
-                  }
-                );
-              });
-              observer.unobserve(container);
-            }
-          });
-        },
-        { threshold: typeof threshold === 'number' ? threshold : threshold[0], rootMargin }
-      );
-
-      observer.observe(container);
-      return () => observer.disconnect();
-    }, []);
-
-    return ref;
-  }
-
-  return { useScrollAnimate, useScrollStagger };
-}

package/src/types.ts

@@ -1,161 +0,0 @@
-/**
- * use-scroll-animate - Core Type Definitions
- * A lightweight, high-performance scroll animation library
- */
-
-/** Built-in animation presets */
-export 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';
-
-/** Easing function types */
-export type EasingType =
-  | 'linear'
-  | 'ease'
-  | 'ease-in'
-  | 'ease-out'
-  | 'ease-in-out'
-  | 'spring'
-  | string;
-
-/** Keyframe definition for custom animations */
-export interface AnimationKeyframe {
-  [property: string]: string | number;
-}
-
-/** Custom animation definition */
-export interface CustomAnimation {
-  from: AnimationKeyframe;
-  to: AnimationKeyframe;
-}
-
-/** Parallax configuration */
-export 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 */
-export 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;
-}
-
-/** Global configuration for ScrollAnimate instance */
-export interface ScrollAnimateConfig {
-  /** Default animation preset (default: 'fade-in-up') */
-  defaultAnimation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
-  /** Default duration in ms (default: 600) */
-  defaultDuration?: number;
-  /** Default delay in ms (default: 0) */
-  defaultDelay?: number;
-  /** Default easing (default: 'ease') */
-  defaultEasing?: EasingType;
-  /** Default threshold (default: 0.1) */
-  defaultThreshold?: number | number[];
-  /** Default root margin (default: '0px') */
-  defaultRootMargin?: string;
-  /** Whether animations replay by default (default: false) */
-  defaultRepeat?: boolean;
-  /** Default once setting (default: true) */
-  defaultOnce?: boolean;
-  /** Default offset in pixels (default: 0) */
-  defaultOffset?: number;
-  /** CSS class added before animation (default: 'sa-hidden') */
-  hiddenClass?: string;
-  /** CSS class added when element is visible (default: 'sa-visible') */
-  visibleClass?: string;
-  /** Whether to use CSS class-based animation instead of Web Animations API */
-  useClassNames?: boolean;
-  /** Disable all animations (useful for reduced-motion preference) */
-  disabled?: boolean;
-  /** Custom IntersectionObserver root element */
-  root?: Element | null;
-}
-
-/** Registered element entry */
-export interface AnimatedElement {
-  element: Element;
-  options: Required<AnimateOptions>;
-  observer: IntersectionObserver;
-  animated: boolean;
-  progressObserver?: IntersectionObserver;
-}
-
-/** ScrollAnimate public API */
-export interface ScrollAnimateInstance {
-  /** Observe a single element or CSS selector */
-  observe(target: string | Element | NodeList | Element[], options?: AnimateOptions): void;
-  /** Stop observing a single element or CSS selector */
-  unobserve(target: string | Element | NodeList | Element[]): void;
-  /** Observe all elements matching the data-sa attribute */
-  init(rootElement?: Element | Document): void;
-  /** Destroy the instance and clean up all observers */
-  destroy(): void;
-  /** Refresh all observers (useful after DOM changes) */
-  refresh(): void;
-  /** Manually trigger animation on an element */
-  animate(target: string | Element, options?: AnimateOptions): void;
-  /** Get all currently observed elements */
-  getObservedElements(): AnimatedElement[];
-  /** Update global configuration */
-  configure(config: Partial<ScrollAnimateConfig>): void;
-}

package/src/vue.ts

@@ -1,118 +0,0 @@
-/**
- * use-scroll-animate - Vue 3 Integration
- * Provides useScrollAnimate composable for Vue 3 applications.
- */
-
-import type { AnimateOptions } from './types';
-import { resolvePreset, resolveEasing } from './presets';
-
-export function createVueComposables(Vue: {
-  ref: <T>(value: T | null) => { value: T | null };
-  onMounted: (fn: () => void) => void;
-  onUnmounted: (fn: () => void) => void;
-}) {
-  function useScrollAnimate(options: AnimateOptions = {}) {
-    const animateRef = Vue.ref<Element>(null);
-    let observer: IntersectionObserver | null = null;
-    let progressObserver: IntersectionObserver | null = null;
-
-    Vue.onMounted(() => {
-      const el = animateRef.value;
-      if (!el) return;
-
-      const {
-        animation = 'fade-in-up',
-        duration = 600,
-        delay = 0,
-        easing = 'ease',
-        threshold = 0.1,
-        rootMargin = '0px',
-        repeat = false,
-        parallax = {},
-        onStart,
-        onComplete,
-        onEnter,
-        onLeave,
-        onProgress,
-      } = options;
-
-      const preset = resolvePreset(animation);
-      const easingValue = resolveEasing(easing);
-      let animated = false;
-
-      (el as HTMLElement).style.opacity = '0';
-
-      observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              onEnter?.(el);
-              if (!animated || repeat) {
-                const anim = el.animate(
-                  [preset.from as Keyframe, preset.to as Keyframe],
-                  {
-                    duration,
-                    delay,
-                    easing: easingValue,
-                    fill: 'both',
-                  }
-                );
-                onStart?.(el);
-                anim.onfinish = () => onComplete?.(el);
-                animated = true;
-                if (!repeat && !Object.keys(parallax).length && !onProgress) {
-                  observer?.unobserve(el);
-                }
-              }
-            } else {
-              onLeave?.(el);
-              if (repeat && animated) {
-                (el as HTMLElement).style.opacity = '0';
-                animated = false;
-              }
-            }
-          });
-        },
-        { threshold: typeof threshold === 'number' ? threshold : threshold[0], rootMargin }
-      );
-
-      if (Object.keys(parallax).length > 0 || onProgress) {
-        const thresholds = [];
-        for (let i = 0; i <= 100; i++) thresholds.push(i / 100);
-        
-        progressObserver = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              const progress = entry.intersectionRatio;
-              onProgress?.(el, progress);
-              
-              if (Object.keys(parallax).length > 0) {
-                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;
-              }
-            });
-          },
-          { threshold: thresholds, rootMargin }
-        );
-        progressObserver.observe(el);
-      }
-
-      observer.observe(el);
-    });
-
-    Vue.onUnmounted(() => {
-      observer?.disconnect();
-      progressObserver?.disconnect();
-    });
-
-    return { animateRef };
-  }
-
-  return { useScrollAnimate };
-}

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "lib": ["dom", "esnext"],
-    "declaration": true,
-    "declarationDir": "./dist/types",
-    "outDir": "./dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}