rune-scroller 0.1.0 → 0.1.1

package/dist/animate.svelte.js

@@ -1,4 +1,5 @@
 import { calculateRootMargin } from './animations';
+import { setCSSVariables, setupAnimationElement } from './dom-utils.svelte';
 /**
  * Svelte action for scroll animations
  * Triggers animation once when element enters viewport
@@ -11,17 +12,15 @@ import { calculateRootMargin } from './animations';
  * ```
  */
 export const animate = (node, options = {}) => {
-    const { animation = 'fade-in', duration = 800, delay = 0, offset, threshold = 0, rootMargin } = options;
+    let { animation = 'fade-in', duration = 800, delay = 0, offset, threshold = 0, rootMargin } = options;
     // Calculate rootMargin from offset (0-100%)
-    const finalRootMargin = calculateRootMargin(offset, rootMargin);
-    // Set CSS custom properties for timing
-    node.style.setProperty('--duration', `${duration}ms`);
-    node.style.setProperty('--delay', `${delay}ms`);
-    // Add base animation class and data attribute
-    node.classList.add('scroll-animate');
-    node.setAttribute('data-animation', animation);
+    let finalRootMargin = calculateRootMargin(offset, rootMargin);
+    // Setup animation with utilities
+    setupAnimationElement(node, animation);
+    setCSSVariables(node, duration, delay);
     // Track if animation has been triggered
     let animated = false;
+    let observerConnected = true;
     // Create IntersectionObserver for one-time animation
     const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
@@ -31,6 +30,7 @@ export const animate = (node, options = {}) => {
                 animated = true;
                 // Stop observing after animation triggers
                 observer.unobserve(node);
+                observerConnected = false;
             }
         });
     }, {
@@ -40,20 +40,40 @@ export const animate = (node, options = {}) => {
     observer.observe(node);
     return {
         update(newOptions) {
-            const { duration: newDuration = 800, delay: newDelay = 0, animation: newAnimation } = newOptions;
+            const { duration: newDuration, delay: newDelay, animation: newAnimation, offset: newOffset, threshold: newThreshold, rootMargin: newRootMargin } = newOptions;
             // Update CSS properties
-            if (newDuration !== duration) {
-                node.style.setProperty('--duration', `${newDuration}ms`);
+            if (newDuration !== undefined) {
+                duration = newDuration;
+                setCSSVariables(node, duration, newDelay ?? delay);
             }
-            if (newDelay !== delay) {
-                node.style.setProperty('--delay', `${newDelay}ms`);
+            if (newDelay !== undefined && newDelay !== delay) {
+                delay = newDelay;
+                setCSSVariables(node, duration, delay);
             }
             if (newAnimation && newAnimation !== animation) {
+                animation = newAnimation;
                 node.setAttribute('data-animation', newAnimation);
             }
+            // Recreate observer if threshold or rootMargin changed
+            if (newThreshold !== undefined || newOffset !== undefined || newRootMargin !== undefined) {
+                if (observerConnected) {
+                    observer.disconnect();
+                    observerConnected = false;
+                }
+                threshold = newThreshold ?? threshold;
+                offset = newOffset ?? offset;
+                rootMargin = newRootMargin ?? rootMargin;
+                finalRootMargin = calculateRootMargin(offset, rootMargin);
+                if (!animated) {
+                    observer.observe(node);
+                    observerConnected = true;
+                }
+            }
         },
         destroy() {
-            observer.disconnect();
+            if (observerConnected) {
+                observer.disconnect();
+            }
         }
     };
 };

package/dist/dom-utils.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { AnimationType } from './animations';
+/**
+ * Set CSS custom properties on an element
+ * @param element - Target DOM element
+ * @param duration - Animation duration in milliseconds
+ * @param delay - Animation delay in milliseconds
+ */
+export declare function setCSSVariables(element: HTMLElement, duration?: number, delay?: number): void;
+/**
+ * Setup animation element with required classes and attributes
+ * @param element - Target DOM element
+ * @param animation - Animation type to apply
+ */
+export declare function setupAnimationElement(element: HTMLElement, animation: AnimationType): void;
+/**
+ * Create and inject invisible sentinel element for observer-based triggering
+ * @param element - Reference element (sentinel will be placed after it)
+ * @returns The created sentinel element
+ */
+export declare function createSentinel(element: HTMLElement): HTMLElement;

package/dist/dom-utils.svelte.js

@@ -0,0 +1,33 @@
+/**
+ * Set CSS custom properties on an element
+ * @param element - Target DOM element
+ * @param duration - Animation duration in milliseconds
+ * @param delay - Animation delay in milliseconds
+ */
+export function setCSSVariables(element, duration, delay = 0) {
+    if (duration !== undefined) {
+        element.style.setProperty('--duration', `${duration}ms`);
+    }
+    element.style.setProperty('--delay', `${delay}ms`);
+}
+/**
+ * Setup animation element with required classes and attributes
+ * @param element - Target DOM element
+ * @param animation - Animation type to apply
+ */
+export function setupAnimationElement(element, animation) {
+    element.classList.add('scroll-animate');
+    element.setAttribute('data-animation', animation);
+}
+/**
+ * Create and inject invisible sentinel element for observer-based triggering
+ * @param element - Reference element (sentinel will be placed after it)
+ * @returns The created sentinel element
+ */
+export function createSentinel(element) {
+    const sentinel = document.createElement('div');
+    // Use cssText for efficient single-statement styling
+    sentinel.style.cssText = 'height:20px;margin-top:0.5rem;visibility:hidden';
+    element.parentNode?.insertBefore(sentinel, element.nextSibling);
+    return sentinel;
+}

package/dist/runeScroller.svelte.js

@@ -1,3 +1,4 @@
+import { setCSSVariables, setupAnimationElement, createSentinel } from './dom-utils.svelte';
 /**
  * Action pour animer un élément au scroll avec un sentinel invisible juste en dessous
  * @param element - L'élément à animer
@@ -18,27 +19,15 @@
  * ```
  */
 export function runeScroller(element, options) {
-    // Setup animation classes et variables CSS si options sont fournies
+    // Setup animation classes et variables CSS
     if (options?.animation || options?.duration) {
-        element.classList.add('scroll-animate');
-        if (options.animation) {
-            element.setAttribute('data-animation', options.animation);
-        }
-        if (options.duration) {
-            element.style.setProperty('--duration', `${options.duration}ms`);
-        }
-        element.style.setProperty('--delay', '0ms');
+        setupAnimationElement(element, options.animation);
+        setCSSVariables(element, options.duration);
     }
     // Créer le sentinel invisible juste en dessous
-    const sentinel = document.createElement('div');
-    sentinel.style.height = '20px';
-    sentinel.style.margin = '0';
-    sentinel.style.padding = '0';
-    sentinel.style.marginTop = '0.5rem';
-    sentinel.style.visibility = 'hidden';
-    // Insérer le sentinel après l'élément
-    element.parentNode?.insertBefore(sentinel, element.nextSibling);
-    // Observer le sentinel
+    const sentinel = createSentinel(element);
+    // Observer le sentinel avec cleanup tracking
+    let observerConnected = true;
     const observer = new IntersectionObserver((entries) => {
         const isIntersecting = entries[0].isIntersecting;
         if (isIntersecting) {
@@ -47,6 +36,7 @@ export function runeScroller(element, options) {
             // Déconnecter si pas en mode repeat
             if (!options?.repeat) {
                 observer.disconnect();
+                observerConnected = false;
             }
         }
         else if (options?.repeat) {
@@ -61,7 +51,7 @@ export function runeScroller(element, options) {
                 element.setAttribute('data-animation', newOptions.animation);
             }
             if (newOptions?.duration) {
-                element.style.setProperty('--duration', `${newOptions.duration}ms`);
+                setCSSVariables(element, newOptions.duration);
             }
             // Update repeat option
             if (newOptions?.repeat !== undefined && newOptions.repeat !== options?.repeat) {
@@ -69,7 +59,9 @@ export function runeScroller(element, options) {
             }
         },
         destroy() {
-            observer.disconnect();
+            if (observerConnected) {
+                observer.disconnect();
+            }
             sentinel.remove();
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rune-scroller",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Lightweight, high-performance scroll animations for Svelte 5. ~2KB bundle, zero dependencies.",
   "type": "module",
   "sideEffects": false,