@castlenine/svelte-aoe 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2024 Alexandre "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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+<div align="center">
+
+# `@castlenine/svelte-aoe`
+
+[![npm.badge]][npm] [![download.badge]][download]
+
+A Svelte component to animate elements, without 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.
+
+When the element is detected as being in the viewport, `@castlenine/svelte-aoe` applies a class that triggers a CSS animation.
+
+## 🚀 [Demo](https://casltenine-svelte-aoe.vercel.app/)
+
+## Installation
+
+Use your package manager to install:
+
+```bash
+npm i @castlenine/svelte-aoe --save-dev
+```
+
+## Setup
+
+- Import the package
+
+```svelte
+import AnimateOnEnter from '@castlenine/svelte-aoe';
+```
+
+- Add the component to your layout/page/component.
+
+```svelte
+<AnimateOnEnter />
+```
+
+- Add a `data-aoe` attribute to the element that you want to animate and define an animation.
+
+```svelte
+<img data-aoe="fade-up" src="https://dummyimage.com/500x300"/>
+```
+
+## Example: SvelteKit Global Setup
+
+File: `src/routes/+layout.svelte`
+
+```svelte
+<script>
+  import AnimateOnEnter from '@castlenine/svelte-aoe';
+</script>
+
+<AnimateOnEnter />
+
+<slot />
+```
+
+## Animations
+
+### Normal speed
+
+- `up`
+- `right`
+- `left`
+- `down`
+- `fade`
+- `fade-up`
+- `fade-right`
+- `fade-left`
+- `fade-down`
+
+### Fast speed
+
+- `up-fast`
+- `right-fast`
+- `left-fast`
+- `down-fast`
+- `fade-fast`
+- `fade-up-fast`
+- `fade-right-fast`
+- `fade-left-fast`
+- `fade-down-fast`
+
+### Slow speed
+
+- `up-slow`
+- `right-slow`
+- `left-slow`
+- `down-slow`
+- `fade-slow`
+- `fade-up-slow`
+- `fade-right-slow`
+- `fade-left-slow`
+- `fade-down-slow`
+
+You can add your own animations by following the same pattern in your CSS.
+
+```css
+[data-aoe='your-animation'] {
+  transform: translateX(-45px);
+  transition:
+    transform 600ms,
+    opacity 900ms;
+
+  &.aoe {
+    transform: translateX(0);
+    transition-delay: 0s;
+  }
+}
+```
+
+## Properties
+
+| Property name | Type                                         | Default value |
+| ------------- | -------------------------------------------- | ------------- |
+| `root`        | `Document`, `Element`, `null`, `undefined`   | `null`        |
+| `rootMargin`  | `string` in pixel (`px`) or percentage (`%`) | `0px`         |
+| `threshold`   | `number`, `number[]` between `0` and `1.0`   | `0.3`         |
+
+`root` is 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).
+
+`rootMargin` is the 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).
+
+`threshold` is 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` or `0` indicates that even a single pixel of the target is visible. A value of `1.0` or `1` indicates that the target is completely visible. Defaults to `0.3` (30%).
+
+---
+
+Inspired by [Animate on Scroll](https://michalsnik.github.io/aos/) and [lliamscholtz/svelte-aoe](https://github.com/lliamscholtz/svelte-aoe)
+
+[npm]: https://www.npmjs.com/package/@castlenine/svelte-aoe
+[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

package/dist/animations.css

@@ -0,0 +1,370 @@
+/* **************************************************** */
+/* [direction] */
+
+/* normal speed */
+[data-aoe='up'] {
+	transform: translateY(45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='right'] {
+	transform: translateX(-45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='down'] {
+	transform: translateY(-45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='left'] {
+	transform: translateX(45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+/* fast speed */
+[data-aoe='up-fast'] {
+	transform: translateY(45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='right-fast'] {
+	transform: translateX(-45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='down-fast'] {
+	transform: translateY(-45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='left-fast'] {
+	transform: translateX(45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+/* slow speed */
+[data-aoe='up-slow'] {
+	transform: translateY(45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='right-slow'] {
+	transform: translateX(-45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='down-slow'] {
+	transform: translateY(-45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='left-slow'] {
+	transform: translateX(45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+/* **************************************************** */
+/* fade-[direction] */
+
+/* normal speed */
+[data-aoe='fade'] {
+	opacity: 0;
+	transition: opacity 900ms;
+
+	&.aoe {
+		opacity: 1;
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-up'] {
+	opacity: 0;
+	transform: translateY(45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-right'] {
+	opacity: 0;
+	transform: translateX(-45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-down'] {
+	opacity: 0;
+	transform: translateY(-45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-left'] {
+	opacity: 0;
+	transform: translateX(45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+/* fast speed */
+[data-aoe='fade-fast'] {
+	opacity: 0;
+	transition: opacity 555ms;
+
+	&.aoe {
+		opacity: 1;
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-up-fast'] {
+	opacity: 0;
+	transform: translateY(45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-right-fast'] {
+	opacity: 0;
+	transform: translateX(-45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-down-fast'] {
+	opacity: 0;
+	transform: translateY(-45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-left-fast'] {
+	opacity: 0;
+	transform: translateX(45px);
+	transition:
+		transform 370ms,
+		opacity 555ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+/* slow speed */
+[data-aoe='fade-slow'] {
+	opacity: 0;
+	transition: opacity 1500ms;
+
+	&.aoe {
+		opacity: 1;
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-up-slow'] {
+	opacity: 0;
+	transform: translateY(45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-right-slow'] {
+	opacity: 0;
+	transform: translateX(-45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-down-slow'] {
+	opacity: 0;
+	transform: translateY(-45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateY(0);
+		transition-delay: 0s;
+	}
+}
+
+[data-aoe='fade-left-slow'] {
+	opacity: 0;
+	transform: translateX(45px);
+	transition:
+		transform 975ms,
+		opacity 1500ms;
+
+	&.aoe {
+		opacity: 1;
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+
+/** You can add your own animations by following the same pattern
+[data-aoe='your-animation'] {
+	transform: translateX(-45px);
+	transition:
+		transform 600ms,
+		opacity 900ms;
+
+	&.aoe {
+		transform: translateX(0);
+		transition-delay: 0s;
+	}
+}
+**/

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import AnimateOnEnter from './index.svelte';
+export default AnimateOnEnter;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import AnimateOnEnter from './index.svelte';
+export default AnimateOnEnter;

package/dist/index.svelte

@@ -0,0 +1,35 @@
+<script>import "./animations.css";
+import { onMount } from "svelte";
+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) {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add("aoe");
+            }
+        });
+    }
+    const OBSERVER = new IntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+    ELEMENTS_TO_LOAD_IN.forEach((el) => OBSERVER.observe(el));
+});
+</script>
+
+<!--
+@component
+### AnimationOnEnter (AOE)
+This component is used to animate elements when they enter the viewport with the help of [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+
+&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 {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

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import './animations.css';
+declare const __propDef: {
+    props: {
+        root?: Document | Element | null | undefined;
+        rootMargin?: string | undefined;
+        threshold?: number | number[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+/**
+ * ### AnimationOnEnter (AOE)
+ * This component is used to animate elements when they enter the viewport with the help of [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+ *
+ * &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 {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%).
+ */
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};
+//# sourceMappingURL=index.svelte.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,98 @@
+{
+	"name": "@castlenine/svelte-aoe",
+	"version": "1.1.0",
+	"description": "A Svelte component to animate elements, without dependencies.",
+	"license": "MIT",
+	"keywords": [
+		"animate-on-scroll",
+		"animate",
+		"animation-on-scroll",
+		"animation",
+		"css",
+		"svelte"
+	],
+	"author": {
+		"name": "Alexandre Castlenine",
+		"url": "https://github.com/Castlenine"
+	},
+	"homepage": "https://github.com/castlenine/svelte-aoe",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/castlenine/svelte-aoe.git"
+	},
+	"bugs": {
+		"url": "https://github.com/castlenine/svelte-aoe/issues"
+	},
+	"type": "module",
+	"types": "./dist/index.d.ts",
+	"import": "./dist/index.js",
+	"svelte": "./dist/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"package": "npm run remove-dist-folder && svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"eslint": "eslint --ignore-path ./.eslintignore .",
+		"eslint:fix": "eslint --fix --ignore-path ./.eslintignore .",
+		"prettier": "prettier --ignore-path ./.prettierignore --check .",
+		"prettier:fix": "prettier --ignore-path ./.prettierignore --write .",
+		"stylelint": "stylelint **/*.{css,scss,sass,html,js,md,mjs,svelte,svg,ts}",
+		"clean-code": "npm run stylelint && npm run prettier:fix && npm run eslint:fix",
+		"remove-dist-folder": "rimraf dist",
+		"publish-package": "npm publish -access public"
+	},
+	"peerDependencies": {
+		"svelte": "^3.54.0 || ^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.30.4",
+		"@sveltejs/package": "^2.3.1",
+		"@typescript-eslint/eslint-plugin": "^7.8.0",
+		"@typescript-eslint/parser": "^7.8.0",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-html": "^8.1.1",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-no-loops": "^0.3.0",
+		"eslint-plugin-only-warn": "^1.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-security": "^1.7.1",
+		"eslint-plugin-svelte": "^2.38.0",
+		"prettier": "^3.2.5",
+		"prettier-eslint": "^16.3.0",
+		"prettier-eslint-cli": "^8.0.1",
+		"prettier-plugin-svelte": "^3.2.3",
+		"prettier-stylelint": "^0.4.2",
+		"publint": "^0.2.7",
+		"rimraf": "^5.0.5",
+		"stylelint": "^15.11.0",
+		"stylelint-config-html": "^1.1.0",
+		"stylelint-config-standard": "^34.0.0",
+		"stylelint-no-unsupported-browser-features": "^7.0.0",
+		"stylelint-order": "^6.0.4",
+		"stylelint-scss": "^5.3.2",
+		"stylelint-selector-bem-pattern": "^3.0.1",
+		"svelte": "^4.2.15",
+		"svelte-check": "^3.7.1",
+		"svelte-eslint-parser": "^0.35.0",
+		"svelte-preprocess": "^5.1.4",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.5",
+		"vite": "^4.5.3"
+	}
+}