svelte-aos 0.0.2 → 0.0.3

package/dist/aos.d.ts

@@ -1,9 +1,9 @@
 import type { AnimationType, DisableOption, EasingType, AnchorPlacement } from './types.ts';
 /**
- * Create a Svelte attacheemnt that observes elements with `data-aos` and toggles
+ * Create a Svelte attachment that observes elements with `data-aos` and toggles
  * animation classes when they intersect the viewport.
  *
- * The attachement will:
+ * The attachment will:
  * - Apply per-element CSS variables (duration/delay) from `data-aos-*` attributes
  *   or from the `params` defaults.
  * - Add the `.aos-animate` class when the element meets the `threshold`/`rootMargin` criteria.

package/dist/aos.js

@@ -1,19 +1,5 @@
+import { detectDeviceType } from "./utils.js";
 // import './styles.css';
-// TODO: Improve this device detection logic
-function detectDeviceType() {
-    if (typeof navigator === 'undefined')
-        return 'desktop';
-    const ua = navigator.userAgent;
-    if (/Mobi|Android/i.test(ua)) {
-        return 'mobile';
-    }
-    else if (/Tablet|iPad/i.test(ua)) {
-        return 'tablet';
-    }
-    else {
-        return 'desktop';
-    }
-}
 const computeRootMargin = (anchorPlacement, offset = 0) => {
     // simple handling for common placements; expand if needed
     if (anchorPlacement === 'top-bottom') {
@@ -42,7 +28,7 @@ const defaultOptions = {
     // useClassNames: false,
     // disableMutationObserver: false
 };
-function setipObserver(params, node) {
+function initializeIntersectionObserver(params, node) {
     if (params?.duration) {
         node.style.setProperty('--aos-duration', `${params.duration}ms`);
     }
@@ -133,10 +119,10 @@ function setipObserver(params, node) {
     return { io, mo };
 }
 /**
- * Create a Svelte attacheemnt that observes elements with `data-aos` and toggles
+ * Create a Svelte attachment that observes elements with `data-aos` and toggles
  * animation classes when they intersect the viewport.
  *
- * The attachement will:
+ * The attachment will:
  * - Apply per-element CSS variables (duration/delay) from `data-aos-*` attributes
  *   or from the `params` defaults.
  * - Add the `.aos-animate` class when the element meets the `threshold`/`rootMargin` criteria.
@@ -149,7 +135,7 @@ function setipObserver(params, node) {
 export function aosObserver(params) {
     params = { ...defaultOptions, ...params };
     return function (node) {
-        const { io, mo } = setipObserver(params, node);
+        const { io, mo } = initializeIntersectionObserver(params, node);
         return () => {
             io.disconnect();
             mo.disconnect();
@@ -165,7 +151,7 @@ export function aosObserver(params) {
  */
 export function aosAction(node, params) {
     params = { ...defaultOptions, ...params };
-    const { io, mo } = setipObserver(params, node);
+    const { io, mo } = initializeIntersectionObserver(params, node);
     return {
         update: () => {
             // NOTHING

package/dist/no-mutation/AOS.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { initAOS } from './aos.js';
+	import type { AOSOptions } from '../types.js';
+
+	export let options: AOSOptions = {};
+
+	onMount(() => {
+		initAOS(options);
+	});
+</script>

package/dist/no-mutation/AOS.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { AOSOptions } from '../types.ts';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AOS: $$__sveltets_2_IsomorphicComponent<{
+    options?: AOSOptions;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AOS = InstanceType<typeof AOS>;
+export default AOS;

package/dist/no-mutation/aos.d.ts

@@ -0,0 +1,15 @@
+import type { AnimationType, AOSOptions, EasingType } from '../types.ts';
+export declare function initAOS(options?: AOSOptions): void;
+export type AOSElementOptions = {
+    animation?: AnimationType;
+    duration?: number;
+    delay?: number;
+    easing?: EasingType;
+    once?: boolean;
+    distance?: string;
+};
+export declare function aos(options?: AOSElementOptions): (node: HTMLElement) => () => void | undefined;
+export declare function aosAction(node: HTMLElement, options?: AOSElementOptions): {
+    update: () => void;
+    destroy(): void;
+};

package/dist/no-mutation/aos.js

@@ -0,0 +1,143 @@
+import { detectDeviceType } from "../utils.js";
+const defaultOptions = {
+    delay: 0,
+    easing: 'ease',
+    duration: 600,
+    disable: 'mobile',
+    once: false,
+    anchorPlacement: 'top-bottom',
+    offset: 120,
+    threshold: 0.1
+    // TODO: implement these later
+    // animatedClassName: 'aos-animate',
+    // initClassName?: 'aos-init',
+    // useClassNames: false,
+    // disableMutationObserver: false
+};
+function isValidDistance(value) {
+    const el = document.createElement('div');
+    el.style.width = '';
+    el.style.width = value;
+    return el.style.width !== '';
+}
+class IntersectionObserverManager {
+    observer;
+    options;
+    elements = new Map();
+    constructor(options) {
+        this.options = options;
+        this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+            threshold: options.threshold,
+            rootMargin: `0px 0px -${options.offset}px 0px`
+        });
+        console.log('disabled options:', options);
+        // handle disable option
+        if (typeof options?.disable === 'boolean' && options.disable) {
+            document.body.classList.add('aos-disabled');
+        }
+        else if (typeof options?.disable === 'string') {
+            const deviceType = detectDeviceType();
+            if (options.disable === deviceType) {
+                document.body.classList.add('aos-disabled');
+            }
+        }
+        else if (typeof options?.disable === 'function') {
+            if (options.disable()) {
+                document.body.classList.add('aos-disabled');
+            }
+        }
+    }
+    handleIntersect(entries) {
+        console.log('Handling intersections with options:', this.options);
+        entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.intersectionRatio > 0.05) {
+                if (this.elements.has(entry.target)) {
+                    entry.target.classList.add('aos-animate');
+                    const elementOptions = this.elements.get(entry.target);
+                    if (elementOptions?.once) {
+                        // if only once why keep observing
+                        this.observer.unobserve(entry.target);
+                    }
+                }
+                else {
+                    // this should never happen if it does don't observe the element
+                    console.warn('No options found for element:', entry.target);
+                    this.observer.unobserve(entry.target);
+                }
+            }
+            else {
+                const once = entry.target.hasAttribute('data-aos-once') || this.options.once;
+                if (!once) {
+                    entry.target.classList.remove('aos-animate');
+                }
+            }
+        });
+    }
+    observe(element, options) {
+        console.log('Before Observing element with options:', element, options);
+        this.elements.set(element, this.options);
+        if (options.animation) {
+            element.setAttribute('data-aos', options.animation);
+        }
+        if (options.duration) {
+            element.style.setProperty('--aos-duration', `${options.duration}ms`);
+        }
+        if (options.delay) {
+            element.style.setProperty('--aos-delay', `${options.delay}ms`);
+        }
+        if (options.easing) {
+            element.style.setProperty('--aos-easing', options.easing);
+        }
+        if (options.distance && isValidDistance(options.distance)) {
+            element.style.setProperty('--aos-distance', options.distance);
+        }
+        this.observer.observe(element);
+    }
+    unobserve(element) {
+        this.observer.unobserve(element);
+        this.elements.delete(element);
+    }
+}
+let observerManager = null;
+export function initAOS(options = {}) {
+    console.log('Initializing AOS with options:', options);
+    if (typeof window === 'undefined') {
+        console.warn('AOS can only be initialized in a browser environment.');
+        return;
+    }
+    const requiredOptions = { ...defaultOptions, ...options };
+    if (!observerManager) {
+        observerManager = new IntersectionObserverManager(requiredOptions);
+    }
+    else {
+        console.warn('AOS already initialzed, ');
+    }
+}
+function observe(node, options) {
+    if (observerManager) {
+        observerManager.observe(node, options);
+    }
+    else {
+        console.warn('AOS not initialized. Please call initialize it first.');
+    }
+    return () => observerManager?.unobserve(node);
+}
+export function aos(options = {
+    animation: 'fade'
+}) {
+    return (node) => {
+        const unobserve = observe(node, options);
+        return unobserve;
+    };
+}
+export function aosAction(node, options = {
+    animation: 'fade'
+}) {
+    const unobserve = observe(node, options);
+    return {
+        update: () => { },
+        destroy() {
+            unobserve();
+        }
+    };
+}

package/dist/no-mutation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AOS } from './AOS.svelte';
+export { aos, aosAction } from './aos.ts';

package/dist/no-mutation/index.js

@@ -0,0 +1,2 @@
+export { default as AOS } from './AOS.svelte';
+export { aos, aosAction } from "./aos.js";

package/dist/styles/base.css

@@ -6,36 +6,35 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* CSS Custom Properties (defaults) */
-			--aos-duration: 600ms;
-			--aos-delay: 50ms;
-			--aos-distance: 100px;
+		/* CSS Custom Properties (defaults) */
+		--aos-duration: 600ms;
+		--aos-delay: 50ms;
+		--aos-distance: 100px;
 
-			/* Base transition for all [data-aos] elements */
-			[data-aos] {
-				transition-duration: var(--aos-duration);
-				transition-delay: var(--aos-delay);
-				transition-timing-function: ease;
-			}
+		/* Base transition for all [data-aos] elements */
+		[data-aos] {
+			transition-duration: var(--aos-duration);
+			transition-delay: var(--aos-delay);
+			transition-timing-function: ease;
+		}
 
-			/* Default animated state */
-			[data-aos].aos-animate {
-				transform: translate3d(0, 0, 0) scale(1) rotate(0);
-			}
+		/* Default animated state */
+		[data-aos].aos-animate {
+			transform: translate3d(0, 0, 0) scale(1) rotate(0);
+		}
 
-			/* Reduced motion support */
-			@media (prefers-reduced-motion: reduce) {
-				[data-aos] {
-					opacity: 1 !important;
-					transform: none !important;
-					transition: none !important;
-				}
+		/* Reduced motion support */
+		@media (prefers-reduced-motion: reduce) {
+			[data-aos] {
+				opacity: 1 !important;
+				transform: none !important;
+				transition: none !important;
 			}
+		}
 
-			/* Disabled state */
-			[data-aos-disabled] [data-aos],
-			[data-aos][data-aos-disabled] {
+		/* this is used for the global disable option */
+		.aos-disabled {
+			* {
 				opacity: 1 !important;
 				transform: none !important;
 				transition: none !important;

package/dist/styles/easings.css

@@ -6,92 +6,90 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* Standard easings */
-			[data-aos][data-aos-easing='linear'] {
-				transition-timing-function: linear;
-			}
-
-			[data-aos][data-aos-easing='ease'] {
-				transition-timing-function: ease;
-			}
-
-			[data-aos][data-aos-easing='ease-in'] {
-				transition-timing-function: ease-in;
-			}
-
-			[data-aos][data-aos-easing='ease-out'] {
-				transition-timing-function: ease-out;
-			}
-
-			[data-aos][data-aos-easing='ease-in-out'] {
-				transition-timing-function: ease-in-out;
-			}
-
-			/* Back easings (overshoot) */
-			[data-aos][data-aos-easing='ease-in-back'] {
-				transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-			}
-
-			[data-aos][data-aos-easing='ease-out-back'] {
-				transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-			}
-
-			[data-aos][data-aos-easing='ease-in-out-back'] {
-				transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-			}
-
-			/* Sine easings (smooth) */
-			[data-aos][data-aos-easing='ease-in-sine'] {
-				transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
-			}
-
-			[data-aos][data-aos-easing='ease-out-sine'] {
-				transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-			}
-
-			[data-aos][data-aos-easing='ease-in-out-sine'] {
-				transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-			}
-
-			/* Quad easings (moderate acceleration) */
-			[data-aos][data-aos-easing='ease-in-quad'] {
-				transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-			}
-
-			[data-aos][data-aos-easing='ease-out-quad'] {
-				transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-			}
-
-			[data-aos][data-aos-easing='ease-in-out-quad'] {
-				transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-			}
-
-			/* Cubic easings (stronger acceleration) */
-			[data-aos][data-aos-easing='ease-in-cubic'] {
-				transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-			}
-
-			[data-aos][data-aos-easing='ease-out-cubic'] {
-				transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-			}
-
-			[data-aos][data-aos-easing='ease-in-out-cubic'] {
-				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-			}
-
-			/* Quart easings (aggressive acceleration) */
-			[data-aos][data-aos-easing='ease-in-quart'] {
-				transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-			}
-
-			[data-aos][data-aos-easing='ease-out-quart'] {
-				transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-			}
-
-			[data-aos][data-aos-easing='ease-in-out-quart'] {
-				transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-			}
+		/* Standard easings */
+		[data-aos][data-aos-easing='linear'] {
+			transition-timing-function: linear;
+		}
+
+		[data-aos][data-aos-easing='ease'] {
+			transition-timing-function: ease;
+		}
+
+		[data-aos][data-aos-easing='ease-in'] {
+			transition-timing-function: ease-in;
+		}
+
+		[data-aos][data-aos-easing='ease-out'] {
+			transition-timing-function: ease-out;
+		}
+
+		[data-aos][data-aos-easing='ease-in-out'] {
+			transition-timing-function: ease-in-out;
+		}
+
+		/* Back easings (overshoot) */
+		[data-aos][data-aos-easing='ease-in-back'] {
+			transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+		}
+
+		[data-aos][data-aos-easing='ease-out-back'] {
+			transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		}
+
+		[data-aos][data-aos-easing='ease-in-out-back'] {
+			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+		}
+
+		/* Sine easings (smooth) */
+		[data-aos][data-aos-easing='ease-in-sine'] {
+			transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
+		}
+
+		[data-aos][data-aos-easing='ease-out-sine'] {
+			transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+		}
+
+		[data-aos][data-aos-easing='ease-in-out-sine'] {
+			transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+		}
+
+		/* Quad easings (moderate acceleration) */
+		[data-aos][data-aos-easing='ease-in-quad'] {
+			transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+		}
+
+		[data-aos][data-aos-easing='ease-out-quad'] {
+			transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		}
+
+		[data-aos][data-aos-easing='ease-in-out-quad'] {
+			transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+		}
+
+		/* Cubic easings (stronger acceleration) */
+		[data-aos][data-aos-easing='ease-in-cubic'] {
+			transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		}
+
+		[data-aos][data-aos-easing='ease-out-cubic'] {
+			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		}
+
+		[data-aos][data-aos-easing='ease-in-out-cubic'] {
+			transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+		}
+
+		/* Quart easings (aggressive acceleration) */
+		[data-aos][data-aos-easing='ease-in-quart'] {
+			transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+		}
+
+		[data-aos][data-aos-easing='ease-out-quart'] {
+			transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+		}
+
+		[data-aos][data-aos-easing='ease-in-out-quart'] {
+			transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 		}
 	}
 }

package/dist/styles/fade.css

@@ -6,56 +6,54 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* Base for all fade animations */
-			[data-aos^='fade'][data-aos^='fade'] {
-				opacity: 0;
-				transition-property: opacity, transform;
-
-				&.aos-animate {
-					opacity: 1;
-					transform: none;
-				}
-			}
+		/* Base for all fade animations */
+		[data-aos^='fade'][data-aos^='fade'] {
+			opacity: 0;
+			transition-property: opacity, transform;
 
-			/* Simple fade (no movement) */
-			[data-aos='fade'] {
-				transform: translate3d(0, 0, 0);
+			&.aos-animate {
+				opacity: 1;
+				transform: none;
 			}
+		}
 
-			/* Directional fades */
-			[data-aos='fade-up'] {
-				transform: translate3d(0, var(--aos-distance), 0);
-			}
+		/* Simple fade (no movement) */
+		[data-aos='fade'] {
+			transform: translate3d(0, 0, 0);
+		}
 
-			[data-aos='fade-down'] {
-				transform: translate3d(0, calc(-1 * var(--aos-distance)), 0);
-			}
+		/* Directional fades */
+		[data-aos='fade-up'] {
+			transform: translate3d(0, var(--aos-distance), 0);
+		}
 
-			[data-aos='fade-left'] {
-				transform: translate3d(var(--aos-distance), 0, 0);
-			}
+		[data-aos='fade-down'] {
+			transform: translate3d(0, calc(-1 * var(--aos-distance)), 0);
+		}
 
-			[data-aos='fade-right'] {
-				transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0);
-			}
+		[data-aos='fade-left'] {
+			transform: translate3d(var(--aos-distance), 0, 0);
+		}
 
-			/* Diagonal fades */
-			[data-aos='fade-up-left'] {
-				transform: translate3d(var(--aos-distance), var(--aos-distance), 0);
-			}
+		[data-aos='fade-right'] {
+			transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0);
+		}
 
-			[data-aos='fade-up-right'] {
-				transform: translate3d(calc(-1 * var(--aos-distance)), var(--aos-distance), 0);
-			}
+		/* Diagonal fades */
+		[data-aos='fade-up-left'] {
+			transform: translate3d(var(--aos-distance), var(--aos-distance), 0);
+		}
 
-			[data-aos='fade-down-left'] {
-				transform: translate3d(var(--aos-distance), calc(-1 * var(--aos-distance)), 0);
-			}
+		[data-aos='fade-up-right'] {
+			transform: translate3d(calc(-1 * var(--aos-distance)), var(--aos-distance), 0);
+		}
 
-			[data-aos='fade-down-right'] {
-				transform: translate3d(calc(-1 * var(--aos-distance)), calc(-1 * var(--aos-distance)), 0);
-			}
+		[data-aos='fade-down-left'] {
+			transform: translate3d(var(--aos-distance), calc(-1 * var(--aos-distance)), 0);
+		}
+
+		[data-aos='fade-down-right'] {
+			transform: translate3d(calc(-1 * var(--aos-distance)), calc(-1 * var(--aos-distance)), 0);
 		}
 	}
 }

package/dist/styles/flip.css

@@ -6,33 +6,31 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* Base for all flip animations */
-			[data-aos^='flip'][data-aos^='flip'] {
-				backface-visibility: hidden;
-				transition-property: transform;
+		/* Base for all flip animations */
+		[data-aos^='flip'][data-aos^='flip'] {
+			backface-visibility: hidden;
+			transition-property: transform;
 
-				&.aos-animate {
-					transform: perspective(2500px) rotateX(0) rotateY(0);
-				}
+			&.aos-animate {
+				transform: perspective(2500px) rotateX(0) rotateY(0);
 			}
+		}
 
-			/* Flip directions */
-			[data-aos='flip-up'] {
-				transform: perspective(2500px) rotateX(-100deg);
-			}
+		/* Flip directions */
+		[data-aos='flip-up'] {
+			transform: perspective(2500px) rotateX(-100deg);
+		}
 
-			[data-aos='flip-down'] {
-				transform: perspective(2500px) rotateX(100deg);
-			}
+		[data-aos='flip-down'] {
+			transform: perspective(2500px) rotateX(100deg);
+		}
 
-			[data-aos='flip-left'] {
-				transform: perspective(2500px) rotateY(-100deg);
-			}
+		[data-aos='flip-left'] {
+			transform: perspective(2500px) rotateY(-100deg);
+		}
 
-			[data-aos='flip-right'] {
-				transform: perspective(2500px) rotateY(100deg);
-			}
+		[data-aos='flip-right'] {
+			transform: perspective(2500px) rotateY(100deg);
 		}
 	}
 }

package/dist/styles/slide.css

@@ -6,34 +6,32 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* Base for all slide animations */
-			[data-aos^='slide'][data-aos^='slide'] {
-				transition-property: transform;
-				visibility: hidden;
+		/* Base for all slide animations */
+		[data-aos^='slide'][data-aos^='slide'] {
+			transition-property: transform;
+			visibility: hidden;
 
-				&.aos-animate {
-					visibility: visible;
-					transform: translate3d(0, 0, 0);
-				}
+			&.aos-animate {
+				visibility: visible;
+				transform: translate3d(0, 0, 0);
 			}
+		}
 
-			/* Slide directions */
-			[data-aos='slide-up'] {
-				transform: translate3d(0, 100%, 0);
-			}
+		/* Slide directions */
+		[data-aos='slide-up'] {
+			transform: translate3d(0, 100%, 0);
+		}
 
-			[data-aos='slide-down'] {
-				transform: translate3d(0, -100%, 0);
-			}
+		[data-aos='slide-down'] {
+			transform: translate3d(0, -100%, 0);
+		}
 
-			[data-aos='slide-left'] {
-				transform: translate3d(100%, 0, 0);
-			}
+		[data-aos='slide-left'] {
+			transform: translate3d(100%, 0, 0);
+		}
 
-			[data-aos='slide-right'] {
-				transform: translate3d(-100%, 0, 0);
-			}
+		[data-aos='slide-right'] {
+			transform: translate3d(-100%, 0, 0);
 		}
 	}
 }

package/dist/styles/zoom.css

@@ -6,59 +6,57 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* Base for all zoom animations */
-			[data-aos^='zoom'][data-aos^='zoom'] {
-				opacity: 0;
-				transition-property: opacity, transform;
+		/* Base for all zoom animations */
+		[data-aos^='zoom'][data-aos^='zoom'] {
+			opacity: 0;
+			transition-property: opacity, transform;
 
-				&.aos-animate {
-					opacity: 1;
-					transform: translate3d(0, 0, 0) scale(1);
-				}
+			&.aos-animate {
+				opacity: 1;
+				transform: translate3d(0, 0, 0) scale(1);
 			}
+		}
 
-			/* Zoom In */
-			[data-aos='zoom-in'] {
-				transform: scale(0.6);
-			}
+		/* Zoom In */
+		[data-aos='zoom-in'] {
+			transform: scale(0.6);
+		}
 
-			[data-aos='zoom-in-up'] {
-				transform: translate3d(0, var(--aos-distance), 0) scale(0.6);
-			}
+		[data-aos='zoom-in-up'] {
+			transform: translate3d(0, var(--aos-distance), 0) scale(0.6);
+		}
 
-			[data-aos='zoom-in-down'] {
-				transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(0.6);
-			}
+		[data-aos='zoom-in-down'] {
+			transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(0.6);
+		}
 
-			[data-aos='zoom-in-left'] {
-				transform: translate3d(var(--aos-distance), 0, 0) scale(0.6);
-			}
+		[data-aos='zoom-in-left'] {
+			transform: translate3d(var(--aos-distance), 0, 0) scale(0.6);
+		}
 
-			[data-aos='zoom-in-right'] {
-				transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(0.6);
-			}
+		[data-aos='zoom-in-right'] {
+			transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(0.6);
+		}
 
-			/* Zoom Out */
-			[data-aos='zoom-out'] {
-				transform: scale(1.2);
-			}
+		/* Zoom Out */
+		[data-aos='zoom-out'] {
+			transform: scale(1.2);
+		}
 
-			[data-aos='zoom-out-up'] {
-				transform: translate3d(0, var(--aos-distance), 0) scale(1.2);
-			}
+		[data-aos='zoom-out-up'] {
+			transform: translate3d(0, var(--aos-distance), 0) scale(1.2);
+		}
 
-			[data-aos='zoom-out-down'] {
-				transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(1.2);
-			}
+		[data-aos='zoom-out-down'] {
+			transform: translate3d(0, calc(-1 * var(--aos-distance)), 0) scale(1.2);
+		}
 
-			[data-aos='zoom-out-left'] {
-				transform: translate3d(var(--aos-distance), 0, 0) scale(1.2);
-			}
+		[data-aos='zoom-out-left'] {
+			transform: translate3d(var(--aos-distance), 0, 0) scale(1.2);
+		}
 
-			[data-aos='zoom-out-right'] {
-				transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(1.2);
-			}
+		[data-aos='zoom-out-right'] {
+			transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(1.2);
 		}
 	}
 }

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare function detectDeviceType(): 'mobile' | 'tablet' | 'desktop';

package/dist/utils.js

@@ -0,0 +1,15 @@
+// TODO: Improve this device detection logic
+export function detectDeviceType() {
+    if (typeof navigator === 'undefined')
+        return 'desktop';
+    const ua = navigator.userAgent;
+    if (/Mobi|Android/i.test(ua)) {
+        return 'mobile';
+    }
+    else if (/Tablet|iPad/i.test(ua)) {
+        return 'tablet';
+    }
+    else {
+        return 'desktop';
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-aos",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "description": "Animate On Scroll (AOS) library for Svelte applications. Easily add scroll-based animations to your Svelte components with customizable options.",
   "author": {
@@ -31,6 +31,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./no-mutation": {
+      "types": "./dist/no-mutation/index.d.ts",
+      "svelte": "./dist/no-mutation/index.js"
+    },
     "./styles/base.css": {
       "svelte": "./dist/styles/base.css"
     },