svelte-aos 0.0.1

package/README.md

@@ -0,0 +1,305 @@
+# AOS Svelte
+
+Animate On Scroll library for Svelte 5. Trigger CSS animations when elements scroll into view.
+
+## Quick Start
+
+```svelte
+<script>
+	import { aosObserver } from 'svelte-aos';
+	import 'svelte-aos/styles/full.css';
+</script>
+
+<main {@attach aosObserver()}>
+	<div data-aos="fade-up">I animate when scrolled into view</div>
+</main>
+```
+
+## Installation
+
+```bash
+npm install svelte-aos
+```
+
+## Usage
+
+### 1. Import Styles
+
+```js
+// All animations
+import 'svelte-aos/styles/full.css';
+
+// Or selective (smaller bundle)
+import 'svelte-aos/styles/base.css'; // Required
+import 'svelte-aos/styles/fade.css'; // Optional
+import 'svelte-aos/styles/zoom.css'; // Optional
+import 'svelte-aos/styles/flip.css'; // Optional
+import 'svelte-aos/styles/slide.css'; // Optional
+import 'svelte-aos/styles/easings.css'; // Optional
+```
+
+### 2. Add Observer
+
+**Svelte 5 attachment:**
+
+```svelte
+<main {@attach aosObserver()}>
+	<!-- elements with data-aos will animate -->
+</main>
+```
+
+**Svelte action:**
+
+```svelte
+<main use:aosAction>
+	<!-- elements with data-aos will animate -->
+</main>
+```
+
+### 3. Add Animations
+
+```svelte
+<div data-aos="fade-up">Fade up</div>
+<div data-aos="zoom-in">Zoom in</div>
+<div data-aos="flip-left">Flip left</div>
+```
+
+Or use the `toAosAttributes` helper to generate attributes programmatically.
+
+```svelte
+<script>
+	import { toAosAttributes } from 'svelte-aos';
+	const attrs = toAosAttributes({
+		animation: 'fade-up',
+		delay: 150,
+		duration: 400,
+		once: true
+	});
+</script>
+
+<div {...attrs}>Animated</div>
+<!-- or inline -->
+<div data-aos="fade-up" {...toAosAttributes({ delay: 150, duration: 400, once: true })}>
+	Animated
+</div>
+```
+
+## Animations
+
+### Fade
+
+```text
+fade  fade-up  fade-down  fade-left  fade-right
+fade-up-left  fade-up-right  fade-down-left  fade-down-right
+```
+
+### Zoom
+
+```text
+zoom-in  zoom-in-up  zoom-in-down  zoom-in-left  zoom-in-right
+zoom-out  zoom-out-up  zoom-out-down  zoom-out-left  zoom-out-right
+```
+
+### Flip
+
+```text
+flip-up  flip-down  flip-left  flip-right
+```
+
+### Slide
+
+```text
+slide-up  slide-down  slide-left  slide-right
+```
+
+## Per-Element Options
+
+```svelte
+<!-- Duration (ms) -->
+<div data-aos="fade" data-aos-duration="1000">Slow fade</div>
+
+<!-- Delay (ms) -->
+<div data-aos="fade" data-aos-delay="300">Delayed</div>
+
+<!-- Easing -->
+<div data-aos="fade" data-aos-easing="ease-out-back">Bouncy</div>
+
+<!-- Animate only once -->
+<div data-aos="fade" data-aos-once>Once only</div>
+```
+
+### Staggered Animation
+
+```svelte
+<div data-aos="fade-up" data-aos-delay="0">First</div>
+<div data-aos="fade-up" data-aos-delay="100">Second</div>
+<div data-aos="fade-up" data-aos-delay="200">Third</div>
+```
+
+## Easings
+
+```text
+linear  ease  ease-in  ease-out  ease-in-out
+ease-in-back  ease-out-back  ease-in-out-back
+ease-in-sine  ease-out-sine  ease-in-out-sine
+ease-in-quad  ease-out-quad  ease-in-out-quad
+ease-in-cubic  ease-out-cubic  ease-in-out-cubic
+ease-in-quart  ease-out-quart  ease-in-out-quart
+```
+
+## Global Options
+
+```svelte
+<main {@attach aosObserver({
+  threshold: 0.1,         // 0-1, visibility ratio to trigger
+  offset: 120,            // px from viewport edge
+  duration: 600,          // default duration (ms)
+  delay: 0,               // default delay (ms)
+  easing: 'ease',         // default easing
+  once: false,            // animate only once
+  disable: false,         // disable all animations
+  anchorPlacement: 'top-bottom'
+})}>
+```
+
+### Disable Option
+
+```js
+// Disable on device type
+aosObserver({ disable: 'mobile' }); // 'mobile' | 'tablet' | 'desktop'
+
+// Disable entirely
+aosObserver({ disable: true });
+
+// Custom condition
+aosObserver({ disable: () => window.innerWidth < 768 });
+```
+
+## API
+
+### aosObserver(options?)
+
+Svelte 5 attachment. Observes all `[data-aos]` elements inside the container, this is where all the magic happens, it uses a mutation observer and an intersection observer under the hood.
+
+```svelte
+<main {@attach aosObserver({ once: true })}>
+	<div data-aos="fade">...</div>
+</main>
+```
+
+### aosAction
+
+Svelte action (use: directive). Same options as `aosObserver`.
+
+```svelte
+<main use:aosAction={{ threshold: 0.2 }}>
+	<div data-aos="fade">...</div>
+</main>
+```
+
+### toAosAttributes(options)
+
+Generate attributes programmatically:
+
+```svelte
+<script>
+  import { toAosAttributes } from 'svelte-aos';
+
+  const attrs = toAosAttributes({
+    animation: 'fade-up',
+    delay: 150,
+    duration: 400,
+    once: true
+  });
+</script>
+
+<div {...attrs}>Animated</div>
+
+<!-- Equivalent to: -->
+<div data-aos="fade-up" data-aos-delay="150" data-aos-duration="400" data-aos-once>
+```
+
+## CSS Files
+
+| File          | Contents                                 |
+| ------------- | ---------------------------------------- |
+| `base.css`    | Core setup, CSS variables (**required**) |
+| `fade.css`    | Fade animations                          |
+| `zoom.css`    | Zoom animations                          |
+| `flip.css`    | Flip animations                          |
+| `slide.css`   | Slide animations                         |
+| `easings.css` | Custom easing functions                  |
+| `full.css`    | All of the above                         |
+
+## Examples
+
+### Basic Page
+
+```svelte
+<script>
+	import { aosObserver } from 'svelte-aos';
+	import 'svelte-aos/styles/full.css';
+</script>
+
+<main {@attach aosObserver()}>
+	<section>
+		<h1 data-aos="fade-down">Welcome</h1>
+		<p data-aos="fade-up" data-aos-delay="100">Scroll to see more</p>
+	</section>
+
+	<section>
+		<div data-aos="fade-right">Card 1</div>
+		<div data-aos="fade-right" data-aos-delay="100">Card 2</div>
+		<div data-aos="fade-right" data-aos-delay="200">Card 3</div>
+	</section>
+</main>
+```
+
+### Animate Once
+
+```svelte
+<main {@attach aosObserver({ once: true })}>
+	<div data-aos="zoom-in">Animates once, stays visible</div>
+</main>
+```
+
+### With Dynamic Content
+
+```svelte
+<script>
+	import { aosObserver } from 'svelte-aos';
+	import 'svelte-aos/styles/full.css';
+
+	let items = $state([]);
+
+	async function loadMore() {
+		items = [...items, ...(await fetchItems())];
+	}
+</script>
+
+<!-- MutationObserver auto-detects new [data-aos] elements -->
+<main {@attach aosObserver()}>
+	{#each items as item, i}
+		<div data-aos="fade-up" data-aos-delay={i * 50}>{item.name}</div>
+	{/each}
+	<button onclick={loadMore}>Load More</button>
+</main>
+```
+
+### Minimal Bundle (Fade Only)
+
+```svelte
+<script>
+	import { aosObserver } from 'svelte-aos';
+	import 'svelte-aos/styles/base.css';
+	import 'svelte-aos/styles/fade.css';
+</script>
+
+<main {@attach aosObserver()}>
+	<div data-aos="fade-up">Only fade animations available</div>
+</main>
+```
+
+## License
+
+MIT

package/dist/aos.d.ts

@@ -0,0 +1,70 @@
+import type { AnimationType, DisableOption, EasingType, AnchorPlacement } from './types.ts';
+/**
+ * Create a Svelte attacheemnt that observes elements with `data-aos` and toggles
+ * animation classes when they intersect the viewport.
+ *
+ * The attachement 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.
+ * - Remove `.aos-animate` on exit unless `once` is true (or element has `data-aos-once="true").
+ * - If `once` is true, the element will be unobserved after its first entry.
+ * - Applies `params.easing` to elements that do not have `data-aos-easing` set.
+ *
+ * @param {Object} [params] - Global observer and animation options.
+ */
+export declare function aosObserver(params?: {
+    duration?: number;
+    threshold?: number;
+    delay?: number;
+    once?: boolean;
+    disable?: DisableOption;
+    anchorPlacement?: AnchorPlacement;
+    offset?: number;
+    easing?: EasingType;
+}): (node: HTMLElement) => () => void;
+/**
+ * This is to use if attachements are not available in your svelte setup.
+ * @param node - HTML element to attach AOS behavior to
+ *
+ * @param params - AOS options
+ * @returns
+ */
+export declare function aosAction(node: HTMLElement, params?: {
+    duration?: number;
+    threshold?: number;
+    delay?: number;
+    once?: boolean;
+    disable?: DisableOption;
+    anchorPlacement?: AnchorPlacement;
+    offset?: number;
+    easing?: EasingType;
+}): {
+    update: () => void;
+    destroy(): void;
+};
+/**
+ * Convert a small configuration object into a map of `data-aos-*` attributes.
+ *
+ * Useful for demos or programmatically attaching attributes to an element (e.g. in Svelte
+ * you can spread the returned object with `{...toAosAttributes({...})}`).
+ *
+ * @param {Object} options - Per-element options
+ * @param {number} [options.delay] - Delay in ms
+ * @param {number} [options.duration] - Duration in ms
+ * @param {EasingType} [options.easing] - Easing name
+ * @param {AnimationType} [options.animation] - Animation name
+ * @param {boolean} [options.once] - If true, set `data-aos-once` on the element
+ * @returns {Record<string,string>} Map of attributes (keys are attribute names, values are strings)
+ *
+ * @example
+ * const attrs = toAosAttributes({ animation: 'fade-up', delay: 150, duration: 400 });
+ * // => { 'data-aos': 'fade-up', 'data-aos-delay': '150', 'data-aos-duration': '400' }
+ */
+export declare function toAosAttributes(options: {
+    delay?: number;
+    duration?: number;
+    easing?: EasingType;
+    animation?: AnimationType;
+    once?: boolean;
+}): Record<string, string>;

package/dist/aos.js

@@ -0,0 +1,214 @@
+// 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') {
+        return `0px 0px -${offset}px 0px`; // trigger when element top hits viewport bottom - offset
+    }
+    if (anchorPlacement === 'bottom-top') {
+        return `-${offset}px 0px 0px 0px`;
+    }
+    if (anchorPlacement === 'center-center') {
+        return `-50% 0px -50% 0px`;
+    }
+    return `0px 0px 0px 0px`;
+};
+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 setipObserver(params, node) {
+    if (params?.duration) {
+        node.style.setProperty('--aos-duration', `${params.duration}ms`);
+    }
+    // handle disable option
+    if (typeof params?.disable === 'boolean' && params.disable) {
+        node.classList.add('aos-disabled');
+    }
+    else if (typeof params?.disable === 'string') {
+        const deviceType = detectDeviceType();
+        if (params.disable === deviceType) {
+            node.classList.add('aos-disabled');
+        }
+    }
+    else if (typeof params?.disable === 'function') {
+        if (params.disable()) {
+            node.classList.add('aos-disabled');
+        }
+    }
+    if (params?.delay) {
+        node.style.setProperty('--aos-delay', `${params.delay}ms`);
+    }
+    const io = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.intersectionRatio > 0.05) {
+                // handle intersection
+                entry.target.classList.add('aos-animate');
+                if (params?.once) {
+                    // why keep observing if we only want once?
+                    io.unobserve(entry.target);
+                }
+            }
+            else {
+                const once = entry.target.hasAttribute('data-aos-once') || params?.once;
+                if (!once) {
+                    entry.target.classList.remove('aos-animate');
+                }
+            }
+        });
+    }, {
+        threshold: params?.threshold ?? 0.1,
+        rootMargin: computeRootMargin(params?.anchorPlacement ?? 'top-bottom', params?.offset ?? 0)
+    });
+    const observeNode = (el) => {
+        if (!el.classList.contains('aos-animate')) {
+            // set al lthe custom css variable and values here we do not to do that on intersection
+            const dataDuration = el.getAttribute('data-aos-duration') || params?.duration;
+            if (dataDuration) {
+                el.style.setProperty('--aos-duration', `${dataDuration}ms`);
+            }
+            const dataDelay = el.getAttribute('data-aos-delay') || params?.delay;
+            if (dataDelay) {
+                el.style.setProperty('--aos-delay', `${dataDelay}ms`);
+            }
+            const easing = el.getAttribute('data-aos-easing');
+            if (!easing && params?.easing) {
+                el.setAttribute('data-aos-easing', params.easing);
+            }
+            io.observe(el);
+        }
+    };
+    // Observe all existing [data-aos] elements
+    node.querySelectorAll('[data-aos]').forEach(observeNode);
+    // Watch for new elements or attribute changes
+    const mo = new MutationObserver((mutations) => {
+        mutations.forEach((m) => {
+            // New nodes
+            m.addedNodes.forEach((n) => {
+                if (n.nodeType === 1) {
+                    const el = n;
+                    if (el.matches('[data-aos]'))
+                        observeNode(el);
+                    el.querySelectorAll('[data-aos]').forEach(observeNode);
+                }
+            });
+            // Attribute changes
+            if (m.type === 'attributes' && m.attributeName === 'data-aos') {
+                const target = m.target;
+                observeNode(target);
+            }
+        });
+    });
+    mo.observe(node, {
+        childList: true,
+        subtree: true,
+        // attributes: true,
+        attributeFilter: ['data-aos']
+    });
+    return { io, mo };
+}
+/**
+ * Create a Svelte attacheemnt that observes elements with `data-aos` and toggles
+ * animation classes when they intersect the viewport.
+ *
+ * The attachement 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.
+ * - Remove `.aos-animate` on exit unless `once` is true (or element has `data-aos-once="true").
+ * - If `once` is true, the element will be unobserved after its first entry.
+ * - Applies `params.easing` to elements that do not have `data-aos-easing` set.
+ *
+ * @param {Object} [params] - Global observer and animation options.
+ */
+export function aosObserver(params) {
+    params = { ...defaultOptions, ...params };
+    return function (node) {
+        const { io, mo } = setipObserver(params, node);
+        return () => {
+            io.disconnect();
+            mo.disconnect();
+        };
+    };
+}
+/**
+ * This is to use if attachements are not available in your svelte setup.
+ * @param node - HTML element to attach AOS behavior to
+ *
+ * @param params - AOS options
+ * @returns
+ */
+export function aosAction(node, params) {
+    params = { ...defaultOptions, ...params };
+    const { io, mo } = setipObserver(params, node);
+    return {
+        update: () => {
+            // NOTHING
+        },
+        destroy() {
+            console.log('AOS Action destroyed for	 node:', node);
+            io.disconnect();
+            mo.disconnect();
+        }
+    };
+}
+/**
+ * Convert a small configuration object into a map of `data-aos-*` attributes.
+ *
+ * Useful for demos or programmatically attaching attributes to an element (e.g. in Svelte
+ * you can spread the returned object with `{...toAosAttributes({...})}`).
+ *
+ * @param {Object} options - Per-element options
+ * @param {number} [options.delay] - Delay in ms
+ * @param {number} [options.duration] - Duration in ms
+ * @param {EasingType} [options.easing] - Easing name
+ * @param {AnimationType} [options.animation] - Animation name
+ * @param {boolean} [options.once] - If true, set `data-aos-once` on the element
+ * @returns {Record<string,string>} Map of attributes (keys are attribute names, values are strings)
+ *
+ * @example
+ * const attrs = toAosAttributes({ animation: 'fade-up', delay: 150, duration: 400 });
+ * // => { 'data-aos': 'fade-up', 'data-aos-delay': '150', 'data-aos-duration': '400' }
+ */
+export function toAosAttributes(options) {
+    const attrs = {};
+    if (options.delay !== undefined) {
+        attrs['data-aos-delay'] = options.delay.toString();
+    }
+    if (options.duration !== undefined) {
+        attrs['data-aos-duration'] = options.duration.toString();
+    }
+    if (options.easing !== undefined) {
+        attrs['data-aos-easing'] = options.easing;
+    }
+    if (options.once) {
+        attrs['data-aos-once'] = '';
+    }
+    attrs['data-aos'] = options.animation ?? 'fade';
+    return attrs;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { aosObserver, aosAction, toAosAttributes } from './aos.ts';
+export type { AOSOptions, AnimationType, EasingType } from './types.ts';

package/dist/index.js

@@ -0,0 +1,2 @@
+// Reexport your entry components here
+export { aosObserver, aosAction, toAosAttributes } from "./aos.js";

package/dist/styles/base.css

@@ -0,0 +1,45 @@
+/* 
+  AOS Base Styles
+  Core transition setup for all AOS animations
+  Required: Always import this file
+*/
+
+@media screen {
+	html:not(.no-js) {
+		:not(.aos-disabled) {
+			/* 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;
+			}
+
+			/* 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;
+				}
+			}
+
+			/* Disabled state */
+			[data-aos-disabled] [data-aos],
+			[data-aos][data-aos-disabled] {
+				opacity: 1 !important;
+				transform: none !important;
+				transition: none !important;
+			}
+		}
+	}
+}

package/dist/styles/easings.css

@@ -0,0 +1,97 @@
+/* 
+  AOS Easing Functions
+  Custom easing curves for animations
+  Requires: base.css
+*/
+
+@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);
+			}
+		}
+	}
+}

package/dist/styles/fade.css

@@ -0,0 +1,61 @@
+/* 
+  AOS Fade Animations
+  fade, fade-up, fade-down, fade-left, fade-right, and diagonal variants
+  Requires: base.css
+*/
+
+@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;
+				}
+			}
+
+			/* Simple fade (no movement) */
+			[data-aos='fade'] {
+				transform: translate3d(0, 0, 0);
+			}
+
+			/* Directional fades */
+			[data-aos='fade-up'] {
+				transform: translate3d(0, var(--aos-distance), 0);
+			}
+
+			[data-aos='fade-down'] {
+				transform: translate3d(0, calc(-1 * var(--aos-distance)), 0);
+			}
+
+			[data-aos='fade-left'] {
+				transform: translate3d(var(--aos-distance), 0, 0);
+			}
+
+			[data-aos='fade-right'] {
+				transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0);
+			}
+
+			/* Diagonal fades */
+			[data-aos='fade-up-left'] {
+				transform: translate3d(var(--aos-distance), var(--aos-distance), 0);
+			}
+
+			[data-aos='fade-up-right'] {
+				transform: translate3d(calc(-1 * 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-down-right'] {
+				transform: translate3d(calc(-1 * var(--aos-distance)), calc(-1 * var(--aos-distance)), 0);
+			}
+		}
+	}
+}

package/dist/styles/flip.css

@@ -0,0 +1,38 @@
+/* 
+  AOS Flip Animations
+  3D flip effects in all directions
+  Requires: base.css
+*/
+
+@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;
+
+				&.aos-animate {
+					transform: perspective(2500px) rotateX(0) rotateY(0);
+				}
+			}
+
+			/* Flip directions */
+			[data-aos='flip-up'] {
+				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-right'] {
+				transform: perspective(2500px) rotateY(100deg);
+			}
+		}
+	}
+}

package/dist/styles/full.css

@@ -0,0 +1,23 @@
+/* 
+  AOS All Styles
+  Import this file for all animations, or import individual files for tree-shaking.
+  
+  Usage:
+    // All animations
+    import 'svelte-aos/styles';
+    
+    // Or selective imports
+    import 'svelte-aos/styles/base.css';    // Required
+    import 'svelte-aos/styles/fade.css';    // Optional
+    import 'svelte-aos/styles/zoom.css';    // Optional
+    import 'svelte-aos/styles/flip.css';    // Optional
+    import 'svelte-aos/styles/slide.css';   // Optional
+    import 'svelte-aos/styles/easings.css'; // Optional (for custom easings)
+*/
+
+@import './base.css';
+@import './fade.css';
+@import './zoom.css';
+@import './flip.css';
+@import './slide.css';
+@import './easings.css';

package/dist/styles/slide.css

@@ -0,0 +1,39 @@
+/* 
+  AOS Slide Animations
+  Slide in from edges (no opacity change, uses visibility)
+  Requires: base.css
+*/
+
+@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;
+
+				&.aos-animate {
+					visibility: visible;
+					transform: translate3d(0, 0, 0);
+				}
+			}
+
+			/* Slide directions */
+			[data-aos='slide-up'] {
+				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-right'] {
+				transform: translate3d(-100%, 0, 0);
+			}
+		}
+	}
+}

package/dist/styles/zoom.css

@@ -0,0 +1,64 @@
+/* 
+  AOS Zoom Animations
+  zoom-in, zoom-out, and directional variants
+  Requires: base.css
+*/
+
+@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;
+
+				&.aos-animate {
+					opacity: 1;
+					transform: translate3d(0, 0, 0) scale(1);
+				}
+			}
+
+			/* 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-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-right'] {
+				transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(0.6);
+			}
+
+			/* 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-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-right'] {
+				transform: translate3d(calc(-1 * var(--aos-distance)), 0, 0) scale(1.2);
+			}
+		}
+	}
+}

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+export type AnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
+export type AnimationType = 'fade' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'fade-up-left' | 'fade-up-right' | 'fade-down-left' | 'fade-down-right' | 'zoom-in' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'flip-up' | 'flip-down' | 'flip-left' | 'flip-right' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+export type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'ease-in-back' | 'ease-out-back' | 'ease-in-out-back' | 'ease-in-sine' | 'ease-out-sine' | 'ease-in-out-sine' | 'ease-in-quad' | 'ease-out-quad' | 'ease-in-out-quad' | 'ease-in-cubic' | 'ease-out-cubic' | 'ease-in-out-cubic' | 'ease-in-quart' | 'ease-out-quart' | 'ease-in-out-quart';
+export type DisableOption = boolean | 'mobile' | 'phone' | 'tablet' | (() => boolean);
+export interface AOSOptions {
+    /** Offset (in px) from the original trigger point */
+    offset?: number;
+    /** Values from 0 to 3000, with step 50ms */
+    delay?: number;
+    /** Duration of animation (accepts values from 0 to 3000, with step 50ms) */
+    duration?: number;
+    /** Easing for AOS animations */
+    easing?: EasingType;
+    /** Whether animation should happen only once - while scrolling down */
+    once?: boolean;
+    /** Defines which position of the element regarding to window should trigger the animation */
+    anchorPlacement?: AnchorPlacement;
+    /** Condition when AOS should be disabled */
+    disable?: DisableOption;
+    threshold?: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "svelte-aos",
+  "version": "0.0.1",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./styles/base.css": {
+      "svelte": "./dist/styles/base.css"
+    },
+    "./styles/easings.css": {
+      "svelte": "./dist/styles/easings.css"
+    },
+    "./styles/fade.css": {
+      "svelte": "./dist/styles/fade.css"
+    },
+    "./styles/flip.css": {
+      "svelte": "./dist/styles/flip.css"
+    },
+    "./styles/full.css": {
+      "svelte": "./dist/styles/full.css"
+    },
+    "./styles/slide.css": {
+      "svelte": "./dist/styles/slide.css"
+    },
+    "./styles/zoom.css": {
+      "svelte": "./dist/styles/zoom.css"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.39.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^22",
+    "@vitest/browser-playwright": "^4.0.15",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.13.1",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "playwright": "^1.57.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vitest": "^4.0.15",
+    "vitest-browser-svelte": "^2.0.1"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "lint-staged": {
+    "*.{js,ts,svelte,css,md,json}": "prettier --write"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run"
+  }
+}