@castlenine/svelte-aoe 1.3.0 → 1.5.0

package/LICENSE

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright (c) 2024 Alexandre "Castlenine"
+Copyright (c) 2024–2026 Alex "Castlenine"
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,9 +2,9 @@
 
 # `@castlenine/svelte-aoe`
 
-[![npm.badge]][npm] [![download.badge]][download]
+[![npm.badge]][npm] [![download.badge]][download] [![contribution.badge]][contribution]
 
-A Svelte component to animate elements, without dependencies
+A Svelte component to animate elements, with no dependencies
 </div>
 
 `@castlenine/svelte-aoe` utilizes the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when an element enters the viewport.
@@ -17,8 +17,8 @@ When the element is detected as being in the viewport, `@castlenine/svelte-aoe`
 
 Use your package manager to install:
 
-```bash
-npm i @castlenine/svelte-aoe --save-dev
+```shell
+npm i @castlenine/svelte-aoe
 ```
 
 ## Setup
@@ -95,7 +95,7 @@ File: `src/routes/+layout.svelte`
 
 ### Normal speed partial fade
 
-Start wih `0.25` opacity
+Start with `0.25` opacity
 
 - `partial-fade`
 - `partial-fade-up`
@@ -105,7 +105,7 @@ Start wih `0.25` opacity
 
 ### Fast speed partial fade
 
-Start wih `0.25` opacity
+Start with `0.25` opacity
 
 - `partial-fade-fast`
 - `partial-fade-up-fast`
@@ -115,7 +115,7 @@ Start wih `0.25` opacity
 
 ### Slow speed partial fade
 
-Start wih `0.25` opacity
+Start with `0.25` opacity
 
 - `partial-fade-slow`
 - `partial-fade-up-slow`
@@ -161,3 +161,5 @@ Inspired by [Animate on Scroll](https://michalsnik.github.io/aos/) and forked fr
 [npm.badge]: https://img.shields.io/npm/v/@castlenine/svelte-aoe
 [download]: https://www.npmjs.com/package/@castlenine/svelte-aoe
 [download.badge]: https://img.shields.io/npm/d18m/@castlenine/svelte-aoe
+[contribution]: https://github.com/Castlenine/svelte-aoe
+[contribution.badge]: https://img.shields.io/badge/contributions-welcome-green

package/dist/animations.css

@@ -1,565 +1,81 @@
 /* **************************************************** */
-/* [direction] */
+/* Base: shared transitions and configurable defaults */
 
-/* normal speed */
-[data-aoe='up'] {
-	transform: translateY(45px);
+[data-aoe] {
+	--_aoe-distance: 45px;
+	--_aoe-t-transform: 600ms;
+	--_aoe-t-opacity: 900ms;
 	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='right'] {
-	transform: translateX(-45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='down'] {
-	transform: translateY(-45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='left'] {
-	transform: translateX(45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-/* fast speed */
-[data-aoe='up-fast'] {
-	transform: translateY(45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='right-fast'] {
-	transform: translateX(-45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='down-fast'] {
-	transform: translateY(-45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='left-fast'] {
-	transform: translateX(45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-/* slow speed */
-[data-aoe='up-slow'] {
-	transform: translateY(45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='right-slow'] {
-	transform: translateX(-45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='down-slow'] {
-	transform: translateY(-45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='left-slow'] {
-	transform: translateX(45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
+		transform var(--_aoe-t-transform),
+		opacity var(--_aoe-t-opacity);
 }
 
 /* **************************************************** */
-/* fade-[direction] */
-
-/* normal speed */
-[data-aoe='fade'] {
-	opacity: 0;
-	transition: opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-up'] {
-	opacity: 0;
-	transform: translateY(45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-right'] {
-	opacity: 0;
-	transform: translateX(-45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-down'] {
-	opacity: 0;
-	transform: translateY(-45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-left'] {
-	opacity: 0;
-	transform: translateX(45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-/* fast speed */
-[data-aoe='fade-fast'] {
-	opacity: 0;
-	transition: opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-up-fast'] {
-	opacity: 0;
-	transform: translateY(45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-right-fast'] {
-	opacity: 0;
-	transform: translateX(-45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
+/* Speed modifiers */
 
-[data-aoe='fade-down-fast'] {
-	opacity: 0;
-	transform: translateY(-45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-left-fast'] {
-	opacity: 0;
-	transform: translateX(45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-/* slow speed */
-[data-aoe='fade-slow'] {
-	opacity: 0;
-	transition: opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transition-delay: 0s;
-	}
+[data-aoe$='-fast'] {
+	--_aoe-t-transform: 370ms;
+	--_aoe-t-opacity: 555ms;
 }
 
-[data-aoe='fade-up-slow'] {
-	opacity: 0;
-	transform: translateY(45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-right-slow'] {
-	opacity: 0;
-	transform: translateX(-45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-down-slow'] {
-	opacity: 0;
-	transform: translateY(-45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='fade-left-slow'] {
-	opacity: 0;
-	transform: translateX(45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
+[data-aoe$='-slow'] {
+	--_aoe-t-transform: 975ms;
+	--_aoe-t-opacity: 1500ms;
 }
 
 /* **************************************************** */
-/* partial-fade-[direction] */
+/* Direction: initial displaced state */
 
-/* normal speed */
-[data-aoe='partial-fade'] {
-	opacity: 0.25;
-	transition: opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transition-delay: 0s;
-	}
+[data-aoe*='up'] {
+	transform: translateY(var(--_aoe-distance));
 }
 
-[data-aoe='partial-fade-up'] {
-	opacity: 0.25;
-	transform: translateY(45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
+[data-aoe*='right'] {
+	transform: translateX(calc(-1 * var(--_aoe-distance)));
 }
 
-[data-aoe='partial-fade-right'] {
-	opacity: 0.25;
-	transform: translateX(-45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
+[data-aoe*='down'] {
+	transform: translateY(calc(-1 * var(--_aoe-distance)));
 }
 
-[data-aoe='partial-fade-down'] {
-	opacity: 0.25;
-	transform: translateY(-45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
+[data-aoe*='left'] {
+	transform: translateX(var(--_aoe-distance));
 }
 
-[data-aoe='partial-fade-left'] {
-	opacity: 0.25;
-	transform: translateX(45px);
-	transition:
-		transform 600ms,
-		opacity ease-in 900ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-/* fast speed */
-[data-aoe='partial-fade-fast'] {
-	opacity: 0.25;
-	transition: opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='partial-fade-up-fast'] {
-	opacity: 0.25;
-	transform: translateY(45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='partial-fade-right-fast'] {
-	opacity: 0.25;
-	transform: translateX(-45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='partial-fade-down-fast'] {
-	opacity: 0.25;
-	transform: translateY(-45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
-}
-
-[data-aoe='partial-fade-left-fast'] {
-	opacity: 0.25;
-	transform: translateX(45px);
-	transition:
-		transform 370ms,
-		opacity ease-in 555ms;
+/* **************************************************** */
+/* Opacity: initial hidden state */
 
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
+[data-aoe^='fade'] {
+	opacity: 0;
 }
 
-/* slow speed */
-[data-aoe='partial-fade-slow'] {
+[data-aoe^='partial-fade'] {
 	opacity: 0.25;
-	transition: opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transition-delay: 0s;
-	}
 }
 
-[data-aoe='partial-fade-up-slow'] {
-	opacity: 0.25;
-	transform: translateY(45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
+/* **************************************************** */
+/* Animated state */
 
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
+[data-aoe].aoe {
+	transition-delay: 0s;
 }
 
-[data-aoe='partial-fade-right-slow'] {
-	opacity: 0.25;
-	transform: translateX(-45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
+[data-aoe*='up'].aoe,
+[data-aoe*='down'].aoe {
+	transform: translateY(0);
 }
 
-[data-aoe='partial-fade-down-slow'] {
-	opacity: 0.25;
-	transform: translateY(-45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0s;
-	}
+[data-aoe*='right'].aoe,
+[data-aoe*='left'].aoe {
+	transform: translateX(0);
 }
 
-[data-aoe='partial-fade-left-slow'] {
-	opacity: 0.25;
-	transform: translateX(45px);
-	transition:
-		transform 975ms,
-		opacity ease-in 1500ms;
-
-	&.aoe {
-		opacity: 1;
-		transform: translateX(0);
-		transition-delay: 0s;
-	}
+[data-aoe^='fade'].aoe,
+[data-aoe^='partial-fade'].aoe {
+	opacity: 1;
 }
 
-/** You can add your own animations by following the same in your own css file
+/** You can add your own animations by following the same pattern in your own CSS file
 [data-aoe='your-animation'] {
 	transform: translateX(-45px);
 	transition:

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAE5C,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAE5C,eAAe,cAAc,CAAC"}

package/dist/index.svelte

@@ -4,21 +4,16 @@ export let root = null;
 export let rootMargin = "0px";
 export let threshold = 0.3;
 onMount(() => {
-    const ELEMENTS_TO_LOAD_IN = /* @__PURE__ */ new Set([...document.querySelectorAll("[data-aoe]")]);
-    const OBSERVER_OPTIONS = {
-        root,
-        rootMargin,
-        threshold
-    };
-    function observerCallback(entries) {
+    const OBSERVER = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
             if (entry.isIntersecting) {
                 entry.target.classList.add("aoe");
+                OBSERVER.unobserve(entry.target);
             }
         });
-    }
-    const OBSERVER = new IntersectionObserver(observerCallback, OBSERVER_OPTIONS);
-    ELEMENTS_TO_LOAD_IN.forEach((el) => OBSERVER.observe(el));
+    }, { root, rootMargin, threshold });
+    document.querySelectorAll("[data-aoe]").forEach((el) => OBSERVER.observe(el));
+    return () => OBSERVER.disconnect();
 });
 </script>
 
@@ -29,7 +24,7 @@ This component is used to animate elements when they enter the viewport with the
 
 &nbsp;
 
-@param {Document | Element | null | undefined} `root` - The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. Defaults to null (browser viewport).
+@param {Document | Element | null | undefined} `root` - The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if `null`.
 @param {string | undefined} `rootMargin` - Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. Defaults to '0px' (no margin).
 @param {number | number[]} `threshold` - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. A value of 0.0 indicates that even a single pixel of the target is visible. A value of 1.0 indicates that the target is completely visible. Defaults to 0.3 (30%).
 -->

package/dist/index.svelte.d.ts

@@ -20,7 +20,7 @@ export type IndexSlots = typeof __propDef.slots;
  *
  *  
  *
- * @param {Document | Element | null | undefined} `root` - The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. Defaults to null (browser viewport).
+ * @param {Document | Element | null | undefined} `root` - The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if `null`.
  * @param {string | undefined} `rootMargin` - Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. Defaults to '0px' (no margin).
  * @param {number | number[]} `threshold` - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. A value of 0.0 indicates that even a single pixel of the target is visible. A value of 1.0 indicates that the target is completely visible. Defaults to 0.3 (30%).
  */

package/dist/index.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/index.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,kBAAkB,CAAC;AAyC1B,QAAA,MAAM,SAAS;;eADyE,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS;qBAAe,MAAM,GAAG,SAAS;oBAAc,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;;;;;;CAClJ,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/lib/index.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,kBAAkB,CAAC;AAqC1B,QAAA,MAAM,SAAS;;eADyE,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS;qBAAe,MAAM,GAAG,SAAS;oBAAc,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;;;;;;CAChJ,CAAC;AAC1D,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@castlenine/svelte-aoe",
-	"version": "1.3.0",
-	"description": "A Svelte component to animate elements, without dependencies.",
+	"version": "1.5.0",
+	"description": "A Svelte component to animate elements, with no dependencies.",
 	"license": "MIT",
 	"keywords": [
 		"animate-on-scroll",
@@ -14,7 +14,7 @@
 		"sveltekit"
 	],
 	"author": {
-		"name": "Alexandre Castlenine",
+		"name": "Alex Castlenine",
 		"url": "https://github.com/Castlenine"
 	},
 	"homepage": "https://github.com/castlenine/svelte-aoe",
@@ -27,12 +27,13 @@
 	},
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"import": "./dist/index.js",
 	"svelte": "./dist/index.js",
+	"sideEffects": [
+		"**/*.css"
+	],
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js",
 			"svelte": "./dist/index.js"
 		}
 	},
@@ -94,7 +95,7 @@
 		"svelte-eslint-parser": "^0.35.0",
 		"svelte-preprocess": "^5.1.4",
 		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
+		"typescript": "~4.9.5",
 		"vite": "^4.5.3"
 	}
 }