From b1eef7aa3ecb961347757f02d07a36e77a671a83 Mon Sep 17 00:00:00 2001 From: Jesvi Jonathan Date: Sat, 28 Mar 2026 23:31:55 +0530 Subject: [PATCH 1/2] updated to 1.0.0, refactored everything... --- .github/workflows/ci.yml | 41 + .github/workflows/pages.yml | 39 + .github/workflows/release.yml | 50 + .gitignore | 35 +- .prettierrc | 7 + README.md | 1193 ++++------ bundler/bundle.ps1 | 92 - bundler/bundle.sh | 141 -- bundler/config/package.json | 51 - bundler/config/postcss.config.js | 6 - bundler/config/rollup.config_css.mjs | 26 - bundler/config/rollup.config_css_full.mjs | 26 - bundler/config/rollup.config_css_min.mjs | 26 - bundler/config/rollup.config_js.mjs | 39 - bundler/config/rollup.config_js_min.mjs | 39 - bundler/config/throw/rollup.config_full.mjs | 32 - .../config/throw/rollup.config_full_min.mjs | 33 - demo/index.html | 589 +++++ dev/index.html | 508 ----- dev/jos.css | 594 ----- dev/jos.js | 700 ------ dev/jos.min.css | 1 - dev/jos.min.js | 11 - dist/.htaccess | 0 dist/jos.css | 602 ++++- dist/jos.debug.css | 594 ----- dist/jos.debug.js | 1990 +++++++++++------ dist/jos.js | 1446 +++++++++++- dist/jos.min.css | 2 +- dist/jos.min.js | 3 +- dist/v0.3/jos.css | 225 -- dist/v0.3/jos.js | 161 -- dist/v0.5/jos.css | 250 --- dist/v0.5/jos.js | 473 ---- dist/v0.6/jos.css | 250 --- dist/v0.6/jos.debug.js | 2 - dist/v0.6/jos.debug.min.js | 2 - dist/v0.6/jos.js | 212 -- dist/v0.6/jos.min.js | 2 - dist/v0.7/.htaccess | 0 dist/v0.7/jos.css | 2 - dist/v0.7/jos.debug.js | 459 ---- dist/v0.7/jos.dev.js | 623 ------ dist/v0.7/jos.js | 264 --- dist/v0.7/jos.min.js | 2 - dist/v0.8.8/.htaccess | 0 dist/v0.8.8/jos.css | 1 - dist/v0.8.8/jos.debug.js | 526 ----- dist/v0.8.8/jos.js | 389 ---- dist/v0.8.8/jos.min.js | 1 - dist/v0.8/.htaccess | 0 dist/v0.8/jos.css | 1 - dist/v0.8/jos.debug.js | 414 ---- dist/v0.8/jos.js | 309 --- dist/v0.8/jos.min.js | 1 - dist/v0.9.1/.htaccess | 0 dist/v0.9.1/jos.css | 1 - dist/v0.9.1/jos.debug.css | 594 ----- dist/v0.9.1/jos.debug.js | 698 ------ dist/v0.9.1/jos.js | 1 - dist/v0.9.1/jos.min.css | 1 - dist/v0.9.1/jos.min.js | 1 - dist/v0.9.2/.htaccess | 0 dist/v0.9.2/jos.css | 1 - dist/v0.9.2/jos.debug.css | 594 ----- dist/v0.9.2/jos.debug.js | 702 ------ dist/v0.9.2/jos.js | 1 - dist/v0.9.2/jos.min.css | 1 - dist/v0.9.2/jos.min.js | 1 - dist/v0.9/.htaccess | 0 dist/v0.9/jos.css | 1 - dist/v0.9/jos.debug.css | 518 ----- dist/v0.9/jos.debug.js | 556 ----- dist/v0.9/jos.js | 1 - dist/v0.9/jos.min.css | 1 - dist/v0.9/jos.min.js | 1 - docs/404.html | 16 - docs/index.html | 562 ----- docs/index2.html | 678 ------ docs/index3.html | 25 - docs/indexOld.html | 291 --- docs/style.css | 216 -- package.json | 68 +- postcss.config.js | 11 + rollup.config.mjs | 124 + src/animations/jos.css | 601 +++++ src/core/DebugOverlay.js | 394 ++++ src/core/ElementManager.js | 184 ++ src/core/JOS.js | 251 +++ src/core/ObserverManager.js | 298 +++ src/core/ScrollTracker.js | 183 ++ src/core/StyleManager.js | 45 + src/core/defaults.js | 20 + src/index.full.js | 18 + src/index.js | 19 + src/utils/dom.js | 41 + 96 files changed, 6793 insertions(+), 14411 deletions(-) create mode 100644 .github/workflows/ci.yml create mode 100644 .github/workflows/pages.yml create mode 100644 .github/workflows/release.yml create mode 100644 .prettierrc delete mode 100644 bundler/bundle.ps1 delete mode 100644 bundler/bundle.sh delete mode 100644 bundler/config/package.json delete mode 100644 bundler/config/postcss.config.js delete mode 100644 bundler/config/rollup.config_css.mjs delete mode 100644 bundler/config/rollup.config_css_full.mjs delete mode 100644 bundler/config/rollup.config_css_min.mjs delete mode 100644 bundler/config/rollup.config_js.mjs delete mode 100644 bundler/config/rollup.config_js_min.mjs delete mode 100644 bundler/config/throw/rollup.config_full.mjs delete mode 100644 bundler/config/throw/rollup.config_full_min.mjs create mode 100644 demo/index.html delete mode 100644 dev/index.html delete mode 100644 dev/jos.css delete mode 100644 dev/jos.js delete mode 100644 dev/jos.min.css delete mode 100644 dev/jos.min.js delete mode 100644 dist/.htaccess delete mode 100644 dist/jos.debug.css delete mode 100644 dist/v0.3/jos.css delete mode 100644 dist/v0.3/jos.js delete mode 100644 dist/v0.5/jos.css delete mode 100644 dist/v0.5/jos.js delete mode 100644 dist/v0.6/jos.css delete mode 100644 dist/v0.6/jos.debug.js delete mode 100644 dist/v0.6/jos.debug.min.js delete mode 100644 dist/v0.6/jos.js delete mode 100644 dist/v0.6/jos.min.js delete mode 100644 dist/v0.7/.htaccess delete mode 100644 dist/v0.7/jos.css delete mode 100644 dist/v0.7/jos.debug.js delete mode 100644 dist/v0.7/jos.dev.js delete mode 100644 dist/v0.7/jos.js delete mode 100644 dist/v0.7/jos.min.js delete mode 100644 dist/v0.8.8/.htaccess delete mode 100644 dist/v0.8.8/jos.css delete mode 100644 dist/v0.8.8/jos.debug.js delete mode 100644 dist/v0.8.8/jos.js delete mode 100644 dist/v0.8.8/jos.min.js delete mode 100644 dist/v0.8/.htaccess delete mode 100644 dist/v0.8/jos.css delete mode 100644 dist/v0.8/jos.debug.js delete mode 100644 dist/v0.8/jos.js delete mode 100644 dist/v0.8/jos.min.js delete mode 100644 dist/v0.9.1/.htaccess delete mode 100644 dist/v0.9.1/jos.css delete mode 100644 dist/v0.9.1/jos.debug.css delete mode 100644 dist/v0.9.1/jos.debug.js delete mode 100644 dist/v0.9.1/jos.js delete mode 100644 dist/v0.9.1/jos.min.css delete mode 100644 dist/v0.9.1/jos.min.js delete mode 100644 dist/v0.9.2/.htaccess delete mode 100644 dist/v0.9.2/jos.css delete mode 100644 dist/v0.9.2/jos.debug.css delete mode 100644 dist/v0.9.2/jos.debug.js delete mode 100644 dist/v0.9.2/jos.js delete mode 100644 dist/v0.9.2/jos.min.css delete mode 100644 dist/v0.9.2/jos.min.js delete mode 100644 dist/v0.9/.htaccess delete mode 100644 dist/v0.9/jos.css delete mode 100644 dist/v0.9/jos.debug.css delete mode 100644 dist/v0.9/jos.debug.js delete mode 100644 dist/v0.9/jos.js delete mode 100644 dist/v0.9/jos.min.css delete mode 100644 dist/v0.9/jos.min.js delete mode 100644 docs/404.html delete mode 100644 docs/index.html delete mode 100644 docs/index2.html delete mode 100644 docs/index3.html delete mode 100644 docs/indexOld.html delete mode 100644 docs/style.css create mode 100644 postcss.config.js create mode 100644 rollup.config.mjs create mode 100644 src/animations/jos.css create mode 100644 src/core/DebugOverlay.js create mode 100644 src/core/ElementManager.js create mode 100644 src/core/JOS.js create mode 100644 src/core/ObserverManager.js create mode 100644 src/core/ScrollTracker.js create mode 100644 src/core/StyleManager.js create mode 100644 src/core/defaults.js create mode 100644 src/index.full.js create mode 100644 src/index.js create mode 100644 src/utils/dom.js diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..ef38480 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,41 @@ +name: CI + +on: + push: + branches: [master, main] + pull_request: + branches: [master, main] + +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [18, 20, 22] + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: npm + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Run tests + run: npm test + + - name: Upload build artifacts + if: matrix.node-version == 20 + uses: actions/upload-artifact@v4 + with: + name: dist + path: dist/ + retention-days: 7 diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 0000000..4897946 --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,39 @@ +name: Deploy Docs to GitHub Pages + +on: + push: + branches: [master, main] + paths: + - "docs/**" + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/ + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..d514924 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,50 @@ +name: Release & Publish + +on: + push: + tags: + - "v*" + +permissions: + contents: write + +jobs: + release: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + registry-url: https://registry.npmjs.org + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Run tests + run: npm test + + - name: Create GitHub Release + uses: softprops/action-gh-release@v2 + with: + files: | + dist/jos.js + dist/jos.min.js + dist/jos.esm.js + dist/jos.css + dist/jos.min.css + dist/jos.full.js + dist/jos.full.min.js + generate_release_notes: true + + - name: Publish to npm + run: npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore index d97ecd4..5ccdc6a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,16 +1,31 @@ +# Dependencies +node_modules/ +package-lock.json + +# Build output +dist/ + +# OS files +.DS_Store +Thumbs.db + +# Editor +.vscode/ +*.swp +*.swo +*~ + +# Logs +*.log +npm-debug.log* + +# Legacy / temp files changelog.md dd.html test.js -.vscode -tmp_tk_rough_implements dd.js -scripts -# rollup -dev/index2.html +scripts/ +tmp_tk_rough_implements/ bundler/index.html -bundler/export/* -bundler/original/* bundler/config/package.js -bundler/config/package-lock.js -node_modules -package-lock.json \ No newline at end of file +bundler/config/package-lock.js \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..5ff0127 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": true, + "singleQuote": false, + "trailingComma": "es5", + "printWidth": 90, + "tabWidth": 2 +} diff --git a/README.md b/README.md index b29b19a..da5308a 100644 --- a/README.md +++ b/README.md @@ -1,979 +1,554 @@ - - -

- - JOS-Animation + + JOS Animation Library - -

JOS : Animation Library

- -

- A simple & easy to use animation library for web developers -
-
- JOS-Animation - npm version - npm version -
-
- Git Pages - · - Playground Demo - · - Report Bug - · - Request Feature - -

- - -## About This Project +

JOS Animation Library

-JOS-Animation, Javascript On Scroll Animation library is a simple & easy to use animation library package to instantly add professional animation to your website. It was built to make my life easier while developing websites & comes with tons of features and is fully customizable. It is lightweight & has a very small footprint. The best part of all is that it has no (\*minimum) toll on performance. +

+ A lightweight, performant scroll animation library for the web +

+ npm version + jsDelivr + bundle size + MIT License +

+ Playground · Docs · Report Bug · Request Feature +

-- Open source, no download or tiring setup, just add a script tag (Embed). -- Includes Preset and expert custom animation options. -- Works with all major browsers & Platforms. -- Fast, light and small with no/min toll on performance. -- Simple & easy to setup for both beginners & experts. -- Customize animation settings and build your own scroll invoked functions -- [npm](https://www.npmjs.com/package/jos-animation) & [CDNjs](https://cdnjs.com/libraries/jos-animation) approved library for the fastest deliveries -- And lots more stuff... explore it yourself. +--- -This project is currently being developed by me & the dev community, So you can expect more features and updates quite often.. +## About -Was inspired by GSAP, AOS libraries. I wanted something easier to use, with great performance and wanted to make the implementation better. So I worked on this project from scratch. +JOS (JavaScript On Scroll) is a scroll animation library that uses the Intersection Observer API for high-performance, jank-free animations. Add `class="jos"` to any element and it animates on scroll — zero configuration required. -Feel free to report an issue or request a feature in this repository :) -& for more information, Check out the [JOS Webpage](https://jos-animation.vercel.app). -
+**Key features:** -
- -Badges - +- **Tiny footprint** — under 3KB gzipped +- **60+ built-in animations** — fade, slide, zoom, flip, rotate, spin, skew, filters, and more +- **Stagger support** — sequential child animations with configurable delay +- **Scroll progress callbacks** — bind element properties to scroll position +- **Direction-aware** — animate only on scroll up or down +- **Anchor triggers** — trigger animations based on another element's visibility +- **Custom animations** — define your own with simple CSS classes +- **Framework-friendly** — works with React, Vue, Angular, Svelte, Next.js, Nuxt +- **Zero dependencies** — pure JavaScript + CSS +- **ES Modules, CJS, UMD** — works everywhere -
+## Quick Start -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default.svg) -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default_black.svg) +### CDN (fastest) ```html - - JOS-Animation + + ``` -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_black_inverse.svg) -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_white_inverse.svg) - -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_inside_logo_white.svg) -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_inside_logo_black.svg) - -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_plain_black.svg) -![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_plain_white.svg) - -![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_black.svg) -![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_white.svg) - -![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_white.svg) -![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_black.svg) -![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_transparent.svg) -![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_transparent_black.svg) - -![jos-animation-image](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_full_white.svg) -![jos-animation-image](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_full_black.svg) +That's it. The JS-only build auto-injects the required CSS. For separate CSS control: -
-
- -Video Tutorial - -
- -- JOS-Animation v0.6 JOS V0.6 Cubes (Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest)) -
-- JOS-Animation v0.8JOS V0.8.8 (Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest)) - -
-
- -
- - JOS v0.9.2 11 Nov 2023 Jesvi Jonathan - -
- -### Built With - -- [JavaScript](https://www.w3schools.com/js/) -- [CSS](https://www.w3schools.com/css/) - -## Installing JOS - -### Embedding JOS - - +```html + + +``` - - +### npm - - - - +```js +import JOS from "jos-animation"; +import "jos-animation/css"; // optional — only needed if using the JS-only bundle - + + -You have the option to use the latest version of JOS from a variety of sources : + + +``` -##### [CDNJS](https://cdnjs.com/libraries/jos-animation) +## Usage - +### 1. Add the `jos` class ```html - +
I'll fade in on scroll
``` -##### (or) [JSDELIVR](https://cdnjs.com/libraries/jos-animation) +### 2. Customize with data attributes ```html - +
+ Flip up once with a delay +
``` -
-
-Click here to check out other Sources / CDNs - -- #### [JSDELIVR](https://www.jsdelivr.com/package/npm/jos-animation) - - - - ```html - - ``` - - (or) - - ```html - - ``` - - (or) - - ```html - - ``` - -- #### [UNPKG](https://unpkg.com/jos-animation/) - - - - ```html - - ``` - - (or) - - ```html - - ``` - -- #### [Github](https://raw.githubusercontent.com/jesvijonathan/JOS-Animation-Library/master/dist/jos.js) - - - - ```html - - ``` - -
- -
- -You can add minified version of the script by replacing jos.js with -jos.min.js in the above script tag. - - - -- jos.js for basic. - jos.min.js for production use. - - jos.debug.js for debugging along with some other - function From v0.9 onwards, by default jos.js does not - require you to add the stylesheet jos.css, it will be exported - along with the script. But you can still add the stylesheet if you want to for - some reason. ### Importing JOS 1. Install JOS using npm (yarn or pnpm) : ```bash - npm install jos-animation - -#### Version Tags - - - -- Latest : jos-animation@latest -- Stable : jos-animation@0.8.8 -- Beta : jos-animation@0.9.0-beta.1 - -So it would be https://unpkg.com/jos-animation/@latest/dist/jos.js (embed) for the latest version. or jos-animation/@0.8.8/dist/jos.js (npm install) for a specific version. - - - - - - - - -
- -## Importing JOS - -1. Install JOS using npm (yarn or pnpm) : - -```bash -npm install jos-animation ``` -2. Import JOS in your project : - -```js -// import "jos-animation/dist/jos.css"; -// Above is required only for v0.8.8 & below (or) if you want to overide jos by using style from the stylesheet +## Animations -import JOS from "jos-animation"; +### Transform Animations -// Other ways to import JOS -// import JOS from "jos-animation/dist/jos.js"; -// import JOS from "jos-animation/dist/jos.min.js"; -// import JOS from "jos-animation/dist/jos.debug.js"; -``` +| Category | Animations | +|----------|-----------| +| **Fade** | `fade`, `fade-up`, `fade-down`, `fade-left`, `fade-right`, `fade-left-up`, `fade-left-down`, `fade-right-up`, `fade-right-down` | +| **Slide** | `slide`, `slide-left`, `slide-up`, `slide-down`, `slide-right-up`, `slide-right-down`, `slide-left-up`, `slide-left-down` | +| **Zoom** | `zoom`, `zoom-in`, `zoom-out-right`, `zoom-out-left`, `zoom-out-up`, `zoom-out-down`, `zoom-in-right`, `zoom-in-left`, `zoom-in-up`, `zoom-in-down` | +| **Flip** | `flip`, `flip-left`, `flip-up`, `flip-down` | +| **Rotate** | `rotate`, `rotate-left` | +| **Spin** | `spin`, `spin-left` | +| **Revolve** | `revolve`, `revolve-left` | +| **Grow** | `grow`, `grow-right`, `grow-left`, `grow-up`, `grow-down` | +| **Shrink** | `shrink`, `shrink-right`, `shrink-left`, `shrink-up`, `shrink-down` | +| **Stretch** | `stretch`, `stretch-vertical` | +| **Skew** | `skew`, `skew-left`, `skew-right`, `skew-up`, `skew-down` | +| **Slant** | `slant`, `slant-right`, `slant-left` | +| **Bar** | `bar`, `bar_horizontal` | - +### Filter Animations -### Frameworks +`blur`, `grey`, `sepia`, `invert`, `brightness`, `saturate`, `hue-rotate`, `backdrop` -
-Vue / Nuxt.js +### Playable (Looping) Animations -```js -// main.js +`slide-play`, `slide-vertical-play`, `zoom-in-play`, `zoom-play`, `flip-play`, `rotate-play`, `spin-play`, `revolve-play`, `grow-play`, `shrink-play`, `stretch-play`, `stretch-vertical-play`, `fade-play`, `fade-horizontal-play`, `fade-vertical-play`, `blink-play`, `pulse-play` -import { createApp } from "vue"; -import { watch, nextTick } from "vue"; +### Utility Classes -import JOS from "jos-animation"; // jos-animation/dist/jos.debug.js +`static`, `none`, `hidden`, `visible`, `no-transition` -import App from "./App.vue"; +## Features -const app = createApp(App); -app.mount("#app"); +### Stagger -JOS.init(); -//JOS.version(); - -watch( - () => router.currentRoute.value, - () => { - nextTick(() => { - JOS.refresh(); - }); - } -); +Animate children sequentially: -// To observe elements after a route change -``` - -Used in : [https://jos-animation.vercel.app/](https://github.com/jesvijonathan/JOS-Animation-Playground/blob/main/src/main.js) - -This above example for Vue.js is also applicable for Nuxt.js - -
- -
-React - -```js -// index.js - -import JOS from "jos-animation/dist/jos.js"; - -onload = () => { - const options = { - debugMode: true, - animation: "flip", - duration: 0.7, - rootMargin: "0% 0% 0% 0%", - }; - JOS.init(options); - //JOS.version(); -}; - -function Main() { - useEffect(() => { - JOS.refresh(); - }, []); - // To observe elements after a route change - - return ( - - - - ); -} - -ReactDOM.createRoot(document.getElementById("root")).render(
); -``` - -Used in : [https://azzle.netlify.app](https://azzle.netlify.app/) - -This above example is for React.js is also applicable for Next.js & Preact.js -
- -
-Next.js - -```js -// app/layout.tsx - -import jos from "jos-animation/dist/jos.js"; - -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { -const jos_options = { - debugMode: false, - passive: true, - animation: "fade", - duration: 0.4, - rootMargin: "20% 0% 30% 0%", - }; - - useEffect(() => { - jos.init(jos_options); - }, []); // Once - - useEffect(() => { - jos.refresh(); - }); // For every update - - return (); -} -// To observe elements after a route change +```html +
+
First
+
Second (0.1s later)
+
Third (0.2s later)
+
``` -Used in : [https://bitspace-nextjs-jos.vercel.app](https://github.com/jesvijonathan/bitspace-org-in/blob/master/src/app/layout.tsx) - -
- -
-Angular +### Scroll Direction -```js -import { Component, OnInit, AfterViewChecked } from '@angular/core'; +Animate only when scrolling in a specific direction: -import JOS from 'jos-animation'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent implements OnInit, AfterViewChecked { - - ngOnInit(): void { - JOS.init(); // Once - } - - ngAfterViewChecked(): void { - JOS.refresh(); // For every update - } - - // ... rest of your code - -} +```html +
+ Only animates on scroll down +
``` - - -You can check this discussion thread for more information : [JOS for Angular](https://github.com/jesvijonathan/JOS-Animation-Library/issues/41#issuecomment-1914803098) - -
-
+### Scroll Progress Callback -## Setup - -1. Use JOS.init(); to initialize the library with default settings. +Bind element properties to scroll position: ```html - - -``` - -2. (Or) Use JOS.init(options); to overide the default settings with your custom settings. +
+ 0% +
-```html - ``` -3. Set class="jos" to the element you want to animate : - -```html - -
-``` +### Anchor Triggers -4. Set data-jos \*attributes to customize the element you want to animate,
(although these attributes are optional and will work without them) : +Animate an element based on another element's visibility: ```html - -
+
Scroll me into view...
+
+ I animate when #trigger-area enters the viewport +
``` -See [JOS Props](#jos-attributes) for full information regarding the animation, attributes, and options. - -## Custom Animation - -1. Create a custom animation by adding the following code to your stylesheet : - -```css -/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/ -.jos-my-custom-animation { - /* Set the initial state of the element */ -} -``` +### Inverse Animations -2. Use your custom animation by setting the data-jos_animation attribute to my-custom-animation : +Apply a different animation on exit: ```html -
+
+ Normal on enter, custom animation on exit +
``` -Example : [Custom Animation]() - -## Custom Inverse Animation +### Custom Animations -1. Create a custom inverse animation by adding the following code to your stylesheet : +Define your own with a CSS class prefixed with `jos-`: ```css -/* Custom inverse animation class name starts with 'jos-' keyword followed by the animation name*/ -.jos-my-custom-animation-inverse { - /* Set the initial state of the element */ +.jos-my-animation { + opacity: 0; + transform: translateX(-50px) rotate(-10deg); } ``` -2. Use your custom inverse animation by setting the data-jos_animationInverse attribute to my-custom-animation-inverse : - ```html -
+
Custom!
``` -This is especially useful when you want to animate an element when it is **scrolled out of its rootMargin**, this gives more customizability for beautiful animations. - -You can also use a combination of both data-jos_animation ("none", "static", no-transition, etc) & data-jos_animationInverse attributes to create a custom animation. +### Invoke Callbacks -Example : [Custom Inverse Animation]() - -## Playable Animation - -1. Create a playable animation by adding the following code to your stylesheet : - -```css -/* Custom playable animation class name starts with 'jos-' keyword followed by the animation name*/ +Run functions on enter/exit: -/* My Custom Playable Animation */ -.jos-my-custom-animation { - transition: 1s; - animation: jos-my-custom-animation 1s ease-in-out infinite; - transform: translateX(100px); -} -/* Add Keyframes */ -@keyframes jos-my-custom-animation { - 0% { - opacity: 1; - } +```html +
+ Check the console +
- 50% { - transform: translateX(-100px); - } -} + ``` -1. Use the playable animation by setting the data-jos_animation attribute to my-custom-animation & data-jos_animationInverse attribute to my-custom-animation-play : +### Once / Repeat Count ```html -
+
Animates once
+
Animates 3 times
``` -Here the data-jos_animationinverse attribute is set to static to prevent the element from animating out of view & to keep it in the final state. The Playable animation is triggered and starts playing when the element is scrolled into view. - -Example : [Playable Animation]() - -## Custom Timing Function - -1. Create a custom timing function by adding the following code to your stylesheet : - -```css -/* Custom timing function attribute name starts with 'data-jos_timing_function' keyword & a custom name of your choice */ -[data-jos_timing_function="myCustom-timingFunc"] { - /* Set the timing of the element */ - transition-timing-function: cubic-bezier(0.2, 0.5, 0.2, 0.5) !important; -} -``` +### Start Visible -2. Use your custom timing function by setting the data-jos_timing-function attribute to my-custom-timing-function : +Skip initial animation for above-the-fold elements: ```html -
+
Visible immediately
+
Visible after 2s
``` -Example : [Custom Timing Function]() +### Scroll Progress CSS Custom Properties -## Anchors to trigger animation +Every element with `data-jos_scroll` gets live CSS custom properties you can use directly in CSS: -1. Create an element that you want to use as an anchor & add an id to it : +| Property | Range | Description | +|----------|-------|-------------| +| `--jos_scroll` | `0` → `1` | Scroll progress (0 at bottom trigger, 1 at top) | +| `--jos_scroll_reverse` | `1` → `0` | Inverse of `--jos_scroll` | +| `--jos_scroll_perc` | `0%` → `100%` | Progress as percentage string | +| `--jos_scroll_deg` | `0deg` → `360deg` | Progress as rotation | +| `--jos_windowScroll` | `0` → `1` | Element position relative to viewport | +| `--jos_windowScroll_reverse` | `1` → `0` | Inverse of window scroll | +| `--jos_rootScroll` | `0` → `1` | Same as `--jos_scroll` | +| `--jos_rootScroll_reverse` | `1` → `0` | Same as `--jos_scroll_reverse` | ```html - -
-``` - -1. Create an element that you want to animate & add the data-jos_anchor attribute to it, with the id starting with suffix # : - -```html - -
+ +
+ Parallax element +
``` -This triggers the animation when the myElement element is scrolled into view.
-This feature is useful especially when you want to animate an element which is in a fixed position. - -Example : [Anchor](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/dev/index.html?plain=1#L35) +### Anchor-to-Anchor Scroll Progress -## Direction Based Animation - -1. Create an element that you want to animate & add the data-jos_scrollDirection attribute to it : +Track scroll between two reference elements instead of the viewport: ```html - -
-``` +
Start
-This triggers the animation when the element is scrolled into view from the up to down direction.
& you can do the same for down to up direction. - -This is particularly useful when you want to animate an element when it is **scrolled into view from a particular direction.** +
+ 0% at #start-marker, 100% at #end-marker +
-Example : [Direction Based Animation]() +
End
+``` -## Start Visible +### Debug Mode -1. Create an element that you want to have a visible state when the page is loaded & add the data-jos_startVisible attribute to it : +Enable `debugMode` to show an interactive overlay with draggable trigger lines: -```html - -
+```js +JOS.init({ debugMode: true }); ``` -This sets the element to be visible when the page is loaded. you can add a delay to it by setting the value in ms : +The overlay shows top/right/bottom/left trigger lines that can be dragged to adjust `rootMargin` in real-time. Anchor-to-anchor elements get a fixed progress indicator on the left edge. -```html - -
-``` +To auto-hide the overlay while the hero/landing section is visible, add a sentinel element: -This sets the element to be visible when the page is loaded after 3000ms or instantly if the value is 0 (or) true. +```html +
+``` + +The overlay hides whenever this element is in the viewport and appears once scrolled past it. + +## Attributes Reference + +| Attribute | Type | Default | Description | +|-----------|------|---------|-------------| +| `data-jos_animation` | string | `fade` | Animation type | +| `data-jos_animationinverse` | string | — | Exit animation type | +| `data-jos_duration` | number | `0.4` | Transition duration (seconds) | +| `data-jos_delay` | number | `0` | Transition delay (seconds) | +| `data-jos_timing_function` | string | `ease-in-out` | CSS timing function | +| `data-jos_once` | bool/int | `false` | Animate once or N times | +| `data-jos_mirror` | string | — | `"false"` for instant reverse | +| `data-jos_rootmargin` | string | — | Override root margin per element | +| `data-jos_rootmargin_top` | string | — | Override top margin | +| `data-jos_rootmargin_bottom` | string | — | Override bottom margin | +| `data-jos_scrollDirection` | string | — | `"up"`, `"down"`, `"left"`, `"right"`, or `"none"` | +| `data-jos_startVisible` | bool/int | — | `true` or delay in ms | +| `data-jos_anchor` | string | — | Anchor element ID (e.g. `"#myId"`) | +| `data-jos_scroll` | string | — | Scroll progress callback function name | +| `data-jos_invoke` | string | — | Enter callback function name | +| `data-jos_invoke_out` | string | — | Exit callback function name | +| `data-jos_rootmargin_top` | string | — | Override top margin | +| `data-jos_rootmargin_right` | string | — | Override right margin | +| `data-jos_rootmargin_bottom` | string | — | Override bottom margin | +| `data-jos_rootmargin_left` | string | — | Override left margin | +| `data-jos_threshold` | number | `0` | IntersectionObserver threshold | +| `data-jos_scroll_start` | string | — | Anchor-to-anchor start element ID | +| `data-jos_scroll_end` | string | — | Anchor-to-anchor end element ID | +| `data-jos_scroll_axis` | string | `"y"` | Scroll axis: `"x"` or `"y"` | + +### Stagger Attributes + +| Attribute | Description | +|-----------|-------------| +| `data-jos_stagger` | Animation for children | +| `data-jos_stagger_seq` | Delay between children (seconds) | +| `data-jos_stagger_delay` | Base delay for all children | +| `data-jos_stagger_duration` | Duration for all children | +| `data-jos_stagger_once` | Once setting for children | +| `data-jos_stagger_anchor` | Anchor for children (`"true"` = parent) | +| `data-jos_stagger_mirror` | Mirror for children | +| `data-jos_stagger_rootmargin` | Root margin for children | +| `data-jos_stagger_scrolldirection` | Scroll direction for children | +| `data-jos_stagger_startVisible` | Start visible for children | +| `data-jos_stagger_scroll` | Scroll callback for children | +| `data-jos_stagger_invoke` | Enter callback for children | +| `data-jos_stagger_invoke_out` | Exit callback for children | +| `data-jos_stagger_timingFunction` | Timing function for children | +| `data-jos_staggerinverse` | Exit animation for children | + +## API Methods + +| Method | Description | Parameters | +|--------|-------------|------------| +| `JOS.init(options)` | Initialize with options | `options: {}` (see above) | +| `JOS.start(state)` | Start animations | `0`: full restart, `-1`: resume | +| `JOS.stop(state)` | Stop animations | `0`: stop (show), `1`: stop (hide), `-1`: pause | +| `JOS.refresh()` | Re-scan DOM for new elements | — | +| `JOS.destroy(state)` | Destroy instance | `0`: keep styles, `1`: remove styles | +| `JOS.version()` | Print version info | — | + +## Framework Integration -This feature is useful especially when you want an element which is in a fixed position, or is present in the landing page to be at initially in a visible state with no animation . +
+React / Next.js -Example : [Start Visible]() +```jsx +import { useEffect } from "react"; +import JOS from "jos-animation"; -## Create Custom Function +function App() { + useEffect(() => { + JOS.init({ animation: "fade", duration: 0.4 }); + return () => JOS.destroy(); + }, []); -1. Create a custom function by adding the following code to your script : + // Call JOS.refresh() after route changes or dynamic content + useEffect(() => { JOS.refresh(); }); -```js -// Create a custom function -function myCustomFunction() { - // Do something + return
Hello
; } ``` +
-2. Use your custom function by setting the data-jos_invoke attribute to myCustomFunction : - -```html -
-``` - -This triggers the myCustomFunction() function when the element is scrolled into view. - -You can use data-jos_invoke_out attribute to trigger the function when the element is scrolled out of view. +
+Vue / Nuxt -Example : [Custom Function]() +```js +// main.js +import JOS from "jos-animation"; +import { watch, nextTick } from "vue"; +import { useRouter } from "vue-router"; -## Scroll Progress Callback +const router = useRouter(); -1. Create an element that you want to animate & add the data-jos_scroll attribute to it : +JOS.init(); -```html -
- Scroll Trigger Element -
+watch(() => router.currentRoute.value, () => { + nextTick(() => JOS.refresh()); +}); ``` +
+ +
+Angular -2. Create a custom function by adding the following code to your script : +```ts +import { Component, OnInit, AfterViewChecked } from "@angular/core"; +import JOS from "jos-animation"; -```js -your_callbackFunction = (element) => { - // windowScrollProgress : element scroll pixel - console.log(element.id, element.jos.windowScrollProgress); - // scrollProgress : 0-1 - element.style.opacity = element.jos.scrollProgress; - // rootScrollProgress : +-0 to +-1 - element.style.innerHTML = element.jos.rootScrollProgress; -}; +@Component({ selector: "app-root", templateUrl: "./app.component.html" }) +export class AppComponent implements OnInit, AfterViewChecked { + ngOnInit() { JOS.init(); } + ngAfterViewChecked() { JOS.refresh(); } +} ``` +
-This triggers the your_callbackFunction() function when the element is scrolled. This way you can handle the scroll progress of the element. - -Example : [Custom Function](https://github.com/jesvijonathan/JOS-Animation-Library/releases/tag/v0.8.8) +
+Svelte -## Staggering Animation +```svelte + -```html -
- - - - -
- -
- -
- -
+
Hello from Svelte
``` +
-The data-jos_stagger attribute along with jos class in parent element is Required/Must to enable staggering even if you are using other attributes. - -- data-jos_stagger=true would auto asign id for parent element & use it as a anchor for child elements. -- data-jos_stagger=#id would use the given id as a anchor for child elements. -- not using data-jos_stagger_anchor make the element independent of the parent element. - -data-jos_stagger_seq is used to set the delay between each element in the sequence (to trigger one after other) whereas data-jos_stagger_delay total delay for each element as a whole. - -Example : [Staggering Animation]()
- -## JOS Attributes - -| Attribute | Type | Default | Description | Values | -| -------------------------------- | ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| data-jos_animation | string | fade | Set the animation type for the element. | `static`, `no-transition`, `fade`, `fade-up`, `fade-down`, `fade-left`, `fade-right`, `fade-up-right`, `fade-up-left`, `fade-down-right`, `fade-down-left`, `flip`, `flip-up`, `flip-down`, `flip-left`, `flip-right`, `slide`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `slide-up-right`, `slide-up-left`, `slide-down-right`, `slide-down-left`, `zoom`, `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`, `grow`, `grow-right`, `grow-left`, `grow-up`, `grow-down`, `shrink`, `shrink-right`, `shrink-left`, `shrink-up`, `shrink-down`, `rotate`, `rotate-right`, `rotate-left`, `spin`, `spin-right`, `spin-left`, `revolve`, `revolve-right`, `revolve-left`, `stretch`, `stretch-vertical`, `stretch-horizontal`, `skew`, `skew-left`, `skew-right`, `skew-down`, `skew-up`, `slant`, `slant-right`, `slant-left`, `blur`, `sepia`, `invert`, `backdrop`, `brightness`, `saturate`, `hue-rotate`, `bar`, `bar_horizontal`, `grey`, `slide-play`, `slide-horizontal-play`, `slide-vertical-play`, `zoom-in-play`, `pulse-play`, `zoom-play`, `zoom-out-play`, `pulse-out-play`, `flip-play`, `rotate-play`, `spin-play`, `revolve-play`, `grow-play`, `shrink-play`, `stretch-play`, `stretch-vertical-play`, `fade-play`, `fade-horizontal-play`, `fade-vertical-play`, `blink-play`, `my-custom-animation` | -| data-jos_animationInverse | string | static | Set the Inverse animation type for the element. | `static`, `no-transition`, `fade`, `fade-up`, `fade-down`, `fade-left`, `fade-right`, `fade-up-right`, `fade-up-left`, `fade-down-right`, `fade-down-left`, `flip`, `flip-up`, `flip-down`, `flip-left`, `flip-right`, `slide`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `slide-up-right`, `slide-up-left`, `slide-down-right`, `slide-down-left`, `zoom`, `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`, `grow`, `grow-right`, `grow-left`, `grow-up`, `grow-down`, `shrink`, `shrink-right`, `shrink-left`, `shrink-up`, `shrink-down`, `rotate`, `rotate-right`, `rotate-left`, `spin`, `spin-right`, `spin-left`, `revolve`, `revolve-right`, `revolve-left`, `stretch`, `stretch-vertical`, `stretch-horizontal`, `skew`, `skew-left`, `skew-right`, `skew-down`, `skew-up`, `slant`, `slant-right`, `slant-left`, `blur`, `sepia`, `invert`, `backdrop`, `brightness`, `saturate`, `hue-rotate`, `bar`, `bar_horizontal`, `grey`, `slide-play`, `slide-horizontal-play`, `slide-vertical-play`, `zoom-in-play`, `pulse-play`, `zoom-play`, `zoom-out-play`, `pulse-out-play`, `flip-play`, `rotate-play`, `spin-play`, `revolve-play`, `grow-play`, `shrink-play`, `stretch-play`, `stretch-vertical-play`, `fade-play`, `fade-horizontal-play`, `fade-vertical-play`, `blink-play`, `my-custom-animation` | -| data-jos_once | boolean | false | Set whether the element should animate only once. | `true`, `false` | -| data-jos_delay | int | 0 | Set the delay for the animation to start. | `(float: 0-1)` & `(int: 0, 1, 2, 3, 4, 5)` | -| data-jos_duration | float | 0.4 | Set the duration for the animation playback. | `(float: 0-1)` & `(int: 0, 1, 2, 3, 4, 5)` | -| data-jos_timing-function | string | ease | Set the timing function for the animation playback. | `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end`, `steps(1, start)`, `steps(1, end)`, `cubic-bezier(0.1, 0.7, 1.0, 0.1)`, `my-custom-timingFunc` | -| data-jos_invoke | string | null | Set the function to be invoked when the element is scrolled into view. | `function`, `myCustomFunction` | -| data-jos_invoke_out | string | null | Set the function to be invoked when the element is scrolled out of view. | `function`, `myCustomFunction` | -| data-once | boolean & int | false | Set whether the element should animate only | `(boolean: true, false)` & `(int: 0-infinity)` | -| data-jos_rootMargin | string | 0% -10% 0% -50% | Sets the margin for an element to animate on in a viewport when scrolled. | `(string: "right% top% left% bottom%")` | -| data-jos_rootMargin_top | string | 0% | Sets the margin for an element to animate on the top of a viewport when scrolled. | `(string: "top%")` | -| data-jos_rootMargin_bottom | string | 0% | Sets the margin for an element to animate on the bottom of a viewport when scrolled. | `(string: "bottom%")` | -| data-jos_scrollDirection | string | down | Sets the direction for an element to animate on ina viewport when scrolled. | `(string: "up", "down", "none")` | -| data-jos_startVisible | boolean & int | false | Set whether the element should start at the final state when the page is loaded (also works with delay). | `(boolean: true, false)` & `(int: 0-10000 ms)` | -| data-jos_anchor | string | null | Sets the anchor element for an element to animate on in a viewport when scrolled. | `(string: "#elementID")` | -| data-jos_scroll | string | null | Sets the callback function for an element to animate on in a viewport when scrolled. | `function`, `your_callbackFunction` | -| data-jos_stagger | string | fade | Sets the stagger animation for an child stagger element to animate on in a viewport when scrolled. | `string`, `fade` | -| data-jos_staggerinverse | string | static | Sets the stagger inverse animation for an child stagger element to animate on in a viewport when scrolled (play animation). | `string`, `fade-play` | -| data-jos_stagger_anchor | string | null | Sets the anchor element for an child stagger element to animate on in a viewport when scrolled. | `string`, `#elementID` | -| data-jos_stagger_seq | float | null | Sets the sequence delay for an child stagger element to animate on in a viewport when scrolled. | `float`, `0-1` | -| data-jos_stagger_delay | float | null | Sets the delay for an child stagger element to animate on in a viewport when scrolled. | `float`, `0-1` | -| data-jos_stagger_duration | float | null | Sets the duration for an element to child stagger animate on in a viewport when scrolled. | `float`, `0-1` | -| data-jos_stagger_timing-function | string | null | Sets the timing function for an child stagger element to animate on in a viewport when scrolled. | `string`, `ease` | -| data-jos_stagger_mirror | boolean | null | Sets the mirror animation for an child stagger element to animate on in a viewport when scrolled. | `boolean`, `true`, `false` | -| data-jos_stagger_rootMargin | string | null | Sets the margin for an child stagger element to animate on in a viewport when scrolled. | `(string: "right% top% left% bottom%")` | -| data-jos_stagger_scrollDirection | string | null | Sets the direction for an child stagger element to animate on ina viewport when scrolled. | `(string: "up", "down", "none")` | -| data-jos_stagger_startVisible | boolean & int | null | Set whether the child stagger element should start at the final state when the page is loaded (also works with delay). | `(boolean: true, false)` & `(int: 0-10000 ms)` | -| data-jos_stagger_once | boolean | null | Set whether the element should animate only once or n count. | `true`, `false`, `int` | -| data-jos_stagger_scroll | string | null | Sets the callback function for an child stagger to animate on in a viewport when scrolled. | `function`, `your_callbackFunction` | -| data-jos_stagger_invoke | string | null | Set the function to be invoked when the child stagger element is scrolled into view. | `function`, `myCustomFunction` | -| data-jos_stagger_invoke_out | string | null | Set the function to be invoked when the child stagger element is scrolled out of view. | `function`, `myCustomFunction` | - - - -## JOS Methods - -| Method | Description | Parameters | -| --------- | ------------------------ | ------------------------------------------------------------------------------------------------------- | -| init() | Initialize/Reset JOS | options = `{}` (refer [JOS.Init(options)]() ) | -| refresh() | Refresh JOS | none | -| stop() | Stop/Pause JOS | state = (`0` - Stop at final state, `1` - Stop at initial state, `-1` - Pause at current state) | -| start() | Start/Resume JOS Service | state = (`0` - Normal/Full start, `-1` - Resume from current state) | -| destroy() | Destroy JOS Instance | state = (`0` - Destroy JOS instance excluding stylesheet, `1` - Full Destroy along with JOS-stylesheet) | - -## Bundling JOS - -Once you are done and have finished developing a version of JOS, you can bundle it using the following command from project root : +## Development ```bash -# JOS-Animation-Library -# |-dev -# |-dist -# |-bundler -# |-config -# |-export <-- Check this folder for the output files -# |-jos.css -# |-jos.js -# |... -# |-original -# |-bundle.sh <-- Run this file to bundle JOS -# ... -``` +# Clone +git clone https://github.com/jesvijonathan/JOS-Animation-Library.git +cd JOS-Animation-Library -```bash -# Change/Move to bundler directory -cd ./bundler +# Install +npm install -# Bundle the project -sh bundle.sh +# Build +npm run build -# View the output files -ls ./export +# Dev (watch mode) +npm run dev ``` -## Bugs and Issues +### Project Structure -Moved to [issues](https://github.com/jesvijonathan/JOS-Animation-Library/issues) +``` +src/ +├── index.js # Entry point (JS only) +├── index.full.js # Entry point (JS + CSS embedded) +├── core/ +│ ├── JOS.js # Main JOS class +│ ├── ElementManager.js # Element initialization & stagger +│ ├── ObserverManager.js# IntersectionObserver management +│ ├── ScrollTracker.js # Scroll progress tracking (rAF) +│ ├── StyleManager.js # Dynamic stylesheet injection +│ ├── DebugOverlay.js # Debug trigger line overlay +│ └── defaults.js # Default configuration +├── utils/ +│ └── dom.js # DOM helpers +└── animations/ + └── jos.css # All animation definitions +``` -## Contributing +### Build Outputs -- Fork it from [main branch](https://github.com/jesvijonathan/JOS-Animation-Library) -- Add your useful feature or fix a bug -- Commit your changes -- Create a pull request +| File | Format | Use Case | +|------|--------|----------| +| `dist/jos.js` | UMD | ` + + + + + diff --git a/dev/index.html b/dev/index.html deleted file mode 100644 index f7a58a3..0000000 --- a/dev/index.html +++ /dev/null @@ -1,508 +0,0 @@ - - - - JOS : Animation Library | Demo - - - - - - - - - - - - - -
- -
-
-

- JOS Demo -

-
- Scroll Down -
-
- Next Demo -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- - - -
-
- -
- -
- -
-
-
- - - -
-
- -
-
- - - - - - - - - - - - - - - - - diff --git a/dev/jos.css b/dev/jos.css deleted file mode 100644 index 51534da..0000000 --- a/dev/jos.css +++ /dev/null @@ -1,594 +0,0 @@ -/* -JOS v0.9.2 By Jesvi Jonathan -*/ - -/* jos default */ -.jos { - /* opacity: 1;*/ - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - /* display: block; */ - /* transition-timing-function: ease-in-out; - transition-property: all; - transition-delay: 0; - transition-duration: 0.4s; */ -} -/* .jos:not([class]):not([class*="display"]):not(:has([class*="display"])) { - display: block; -} */ - -.jos-anchor { - opacity: 0; - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - transition-timing-function: ease-in-out; -} -.jos-static { - transform: translate(0, 0); - opacity: 1; -} -.jos-no-transition { - transition-timing-function: linear; - transition-duration: 0s; -} -.jos-none { -} -.jos-hidden { - display: none; -} -.jos-visible { - display: block; - opacity: 1; -} -.jos-stagger { - /* some cool transition */ - /* do not nullify this */ -} - -/* .jos-no-mirror { - transition: 0s forwards !important; -} */ - -/* fade */ -.jos-fade { - opacity: 0; -} -.jos-fade-right { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-fade-right-up { - opacity: 0; - transform: translateX(-100px) translateY(50px); -} -.jos-fade-right-down { - opacity: 0; - transform: translateX(-100px) translateY(-50px); -} -.jos-fade-left-up { - opacity: 0; - transform: translateX(100px) translateY(50px); -} -.jos-fade-left-down { - opacity: 0; - transform: translateX(100px) translateY(-50px); -} - -/* slide */ - -.jos-slide, -.jos-slide-right { - transform: translateX(-100px); -} -.jos-slide-left { - transform: translateX(100px); -} -.jos-slide-up { - transform: translateY(100px); -} -.jos-slide-down { - transform: translateY(-100px); -} -.jos-slide-right-up { - transform: translateX(-100px) translateY(100px); -} -.jos-slide-right-down { - transform: translateX(-100px) translateY(-100px); -} -.jos-slide-left-up { - transform: translateX(100px) translateY(100px); -} -.jos-slide-left-down { - transform: translateX(100px) translateY(-100px); -} - -/* zoom out */ -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); -} -.jos-zoom-out-right, -.jos-zoom-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0px, -100px); -} -.jos-zoom-out-left, -.jos-zoom-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0px, -100px); -} -.jos-zoom-out-down, -.jos-zoom-down { - opacity: 0; - transform: scale(0.8) translate3d(0px, -100px, 0px); -} -.jos-zoom-out-up, -.jos-zoom-up { - opacity: 0; - transform: scale(0.8) translate3d(0px, 100px, 0px); -} - -/* grow */ -.jos-grow { - transform: scale(0); -} -.jos-grow-right { - transform: scale(0) translate3d(-100px, 0px, -100px); -} -.jos-grow-left { - transform: scale(0) translate3d(100px, 0px, -100px); -} -.jos-grow-down { - transform: scale(0) translate3d(0px, -100px, 0px); -} -.jos-grow-up { - transform: scale(0) translate3d(0px, 100px, 0px); -} - -/* zoom in */ -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0px, -100px, 0px); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0px, 100px, 0px); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0px, -100px); -} - -/* shrink */ -.jos-shrink { - transform: scale(1.4); -} -.jos-shrink-right { - transform: scale(1.4) translate3d(-100px, 0px, -100px); -} -.jos-shrink-left { - transform: scale(1.4) translate3d(100px, 0px, -100px); -} -.jos-shrink-down { - transform: scale(1.4) translate3d(0px, -100px, 0px); -} -.jos-shrink-up { - transform: scale(1.4) translate3d(0px, 100px, 0px); -} - -/* flip */ -.jos-flip, -.jos-flip-right { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} - -/* rotate */ -.jos-rotate, -.jos-rotate-right { - opacity: 0; - transform: rotate(-180deg); -} -.jos-rotate-left { - opacity: 0; - transform: rotate(180deg); -} - -/* spin */ -.jos-spin, -.jos-spin-right { - opacity: 0; - transform: rotate(-180deg) scale(0); -} -.jos-spin-left { - opacity: 0; - transform: rotate(180deg) scale(0); -} - -/* revolve */ -.jos-revolve, -.jos-revolve-right { - opacity: 0; - transform: rotate(-360deg) scale(0); -} -.jos-revolve-left { - opacity: 0; - transform: rotate(360deg) scale(0); -} - -/* stretch */ -.jos-stretch { - opacity: 0; - transform: scaleX(0); -} -.jos-stretch-vertical { - opacity: 0; - transform: scaleY(0); -} - -/* skew */ -.jos-skew { - opacity: 0; - transform: skew(20deg, 20deg); -} -.jos-skew-right { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(-100px, 0px, -100px); -} -.jos-skew-left { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(100px, 0px, -100px); -} -.jos-skew-down { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, -100px, 0px); -} -.jos-skew-up { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, 100px, 0px); -} -.jos-slant { - transform: skew(25deg, 25deg); -} -.jos-slant-right { - transform: skew(25deg, 0deg); -} -.jos-slant-left { - transform: skew(0deg, 25deg); -} -.jos-bar, -.jos-bar_vertical { - transform: perspective(2500px) rotateY(-100deg); -} -.jos-bar_horizontal { - transform: perspective(2500px) rotateX(-100deg); -} - -.jos-grey { - filter: grayscale(100%); -} -.jos-blur { - filter: blur(7px); -} -.jos-backdrop { - backdrop-filter: blur(7px); - opacity: 0.8; -} -.jos-invert { - filter: invert(100%); -} -.jos-sepia { - filter: sepia(100%); -} -.jos-saturate { - filter: saturate(100%); -} -.jos-hue-rotate { - filter: hue-rotate(90deg); -} -.jos-brightness { - filter: brightness(0.5); -} - -/* timing function attribute */ -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} - -/* Playable animations */ - -.jos-slide-play, -.jos-slide-horizontal-play { - transition: 1s; - animation: jos-slide-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-play { - 0% { - transform: translateX(-100px); - } - - 100% { - transform: translateX(100px); - } -} - -.jos-slide-vertical-play { - animation: jos-slide-vertical-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-vertical-play { - 0% { - transform: translateY(-100px); - } - - 100% { - transform: translateY(100px); - } -} - -.jos-zoom-in-play, -.jos-pulse-play { - animation: jos-zoom-in-play 1s infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-in-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(0.8); - } -} - -.jos-zoom-play, -.jos-zoom-out-play, -.jos-pulse-out-play { - animation: jos-zoom-play 0.5s linear infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(1.1); - } -} - -.jos-flip-play { - animation: jos-flip-play 0.7s infinite; - animation-direction: alternate; -} -@keyframes jos-flip-play { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(180deg); - } -} - -.jos-rotate-play { - animation: jos-rotate-play 1s linear forwards infinite; - border-radius: 0%; - animation-direction: alternate-reverse; -} - -@keyframes jos-rotate-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-spin-play { - animation: jos-spin-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-spin-play { - 0% { - transform: rotate(0deg); - opacity: 0; - } - - 100% { - transform: rotate(360deg); - opacity: 1; - } -} - -.jos-revolve-play { - animation: jos-revolve-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-revolve-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-grow-play, -.jos-shrink-play { - animation: jos-grow-play 1s infinite; - animation-direction: alternate; -} -@keyframes jos-grow-play { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -.jos-shrink-play { - animation-direction: alternate-reverse; -} - -.jos-stretch-play { - animation: jos-stretch-play 0.7s infinite; - animation-direction: alternate; -} - -@keyframes jos-stretch-play { - 0% { - transform: scaleX(1); - } - - 100% { - transform: scaleX(0); - } -} - -.jos-stretch-vertical-play { - animation: jos-stretch-vertical-play 0.7s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-stretch-vertical-play { - 0% { - transform: scaleY(1); - } - - 100% { - transform: scaleY(0); - } -} - -.jos-fade-play { - animation: jos-fade-play 0.8s infinite; - animation-direction: alternate; -} - -@keyframes jos-fade-play { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.jos-fade-horizontal-play { - animation: jos-fade-horizontal-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-horizontal-play { - 0% { - opacity: 0; - transform: translateX(100px); - } - - 100% { - opacity: 1; - transform: translateX(-100px); - } -} - -.jos-fade-vertical-play { - animation: jos-fade-vertical-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-vertical-play { - 0% { - opacity: 0; - transform: translateY(100px); - } - - 100% { - opacity: 1; - transform: translateY(-100px); - } -} - -.jos-blink-play { - animation: jos-blink-play 1s steps(1, end) infinite; -} - -@keyframes jos-blink-play { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } -} diff --git a/dev/jos.js b/dev/jos.js deleted file mode 100644 index bbff9fe..0000000 --- a/dev/jos.js +++ /dev/null @@ -1,700 +0,0 @@ -// import "./jos.css"; -// For jos.debug.js & jos under development, you are required to manually include jos.css using tag. -// Other versions of jos.js will auto import jos.css & does not require or specific imports. -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - default_mirror = undefined; - setRange = new Set(); - - debug = false; - scrollProgressDisable = undefined; - disable = false; - - static version = "0.9.3 (Development)"; - static author = "Jesvi Jonathan"; - static webpage = "https://jos-animation.vercel.app"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - scrollEnter = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Webpage: ${jos.webpage} - - Github: ${jos.github}\n`); - } - //debugger = () => null; - debugger(type = 0) { - if (type === 0 && this.debugMode) { - this.version(); - - const settings = {}; - for (const key of Object.keys(this)) { - if (typeof this[key] !== "function") { - settings[key] = this[key]; - } - } - - console.log(`JOS Values:\n`, settings); - console.log("JOS Initialized:\n\n"); - } - } - - callbackRouter_anchor = (entries, observer) => { - if (this.disable) return; - - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - let parentAnchors = document.querySelectorAll("[data-jos_anchor='#" + parentTarget.id + "']"); - if (target.dataset.jos_once && (target.dataset.jos_once == "true" || target.dataset.jos_counter >= target.dataset.jos_once)) { - if (parentAnchors.length < 2) { - observer.unobserve(parentTarget); - } else if (parentAnchors.length > 1) { - target.removeAttribute("data-jos_anchor"); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }); - }; - - rand = (e) => { - if (Array.isArray(e)) return e[Math.floor(Math.random() * e.length)]; - - if (typeof e === "number") { - return e % 1 !== 0 ? Math.random() * e : Math.floor(Math.random() * e); - } - - return Math.random(); - }; - - // var box = target; - // console.log(box); - // const rootmargin = " 0% 0% -30% 0%"; - callbackScroller = (scl) => { - if (this.disable || this.scrollProgressDisable) return; - - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; - - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin; - const rootMarginValues = rootMargin.split(" ").map(parseFloat); - const topMargin = (wh * rootMarginValues[0]) / 100; - const bottomMargin = (wh * rootMarginValues[2]) / 100; - - box.jos = { - rootMargin, - rootMarginValues, - topMargin, - bottomMargin, - }; - const elementRect = box.getBoundingClientRect(); - const elementTop = elementRect.top - box.jos.topMargin; - const elementBottom = elementRect.bottom - box.jos.bottomMargin; - - const windowScrollProgress = elementRect.top / wh; - - const rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); - - let scrollProgress = 0; - - if (rootScrollProgress <= 0) { - scrollProgress = 0; - } else if (rootScrollProgress >= 100) { - scrollProgress = 1; - } else { - scrollProgress = rootScrollProgress; - } - - box.jos = { - elementRect, - elementTop, - elementBottom, - windowScrollProgress, - rootScrollProgress, - scrollProgress, - }; - - window[box.dataset.jos_scroll](box); - }; - - document.onscroll = (e) => { - if (this.disable || this.scrollProgressDisable) return; - scl.forEach(updateBox); - }; - }; - - // window["jos_scroll_" + box.id](obj); - callbackRouter = (entries, observer, type = 1) => { - if (this.disable) return; - - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } - - if (entry.isIntersecting) { - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter.push(target); - this.callbackScroller(this.scrollEnter); - } - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target.dataset.jos_mirror == "false") { - target.classList.remove("jos-no-mirror"); - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.toggle( - "jos-no-mirror", - target.dataset.jos_mirror == "false" - ); - - target.classList.add("jos-" + target_jos_animation); - - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - ); - this.callbackScroller(this.scrollEnter); - } - } - }; - - animationInit() { - let doit = []; - - let recursive_check = (box) => { - let object_default_once = box.dataset.jos_once || this.default_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = - box.dataset.jos_animationinverse || this.default_animationinverse; - let object_default_timingFunction = - box.dataset.jos_timingFunction || this.default_timingFunction; - let object_default_duration = - box.dataset.jos_duration || this.default_duration; - let object_default_delay = box.dataset.jos_delay || this.default_delay; - let object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - - if (box.dataset.jos_stagger) { - const defaultDelay = this.default_delay; - const defaultDuration = this.default_duration; - const defaultOnce = this.once; - const defaultMirror = this.mirror; - const defaultScrolldirection = this.scrolldirection; - const defaultRootMargin = this.rootMargin; - const defaultAnimationinverse = this.animationinverse; - if (!box.id) { - box.id = Math.random().toString(36).substring(7); - } - - Array.from(box.children).forEach((child, i) => { - if (!child.classList.contains("jos")) { - child.classList.add("jos"); - - if (!child.id) { - child.id = `${box.id}_${i}`; - } - - const stagger = box.dataset.jos_stagger; - const stagger_delay = box.dataset.jos_stagger_delay || defaultDelay; - const stagger_seq = box.dataset.jos_stagger_seq || 0; - const stagger_duration = - box.dataset.jos_stagger_duration || defaultDuration; - const stagger_once = box.dataset.jos_stagger_once || defaultOnce; - const staggerinverse = - box.dataset.jos_staggerinverse || defaultAnimationinverse; - const stagger_mirror = - box.dataset.jos_stagger_mirror || defaultMirror; - const stagger_visible = box.dataset.jos_stagger_startVisible; - const stagger_scrolldirection = - box.dataset.jos_stagger_scrolldirection || defaultScrolldirection; - const stagger_rootmargin = - box.dataset.jos_stagger_rootmargin || defaultRootMargin; - - if (box.dataset.jos_stagger_anchor || child.dataset.jos_anchor) { - const anchor = - box.dataset.jos_stagger_anchor === "true" - ? "#" + box.id - : box.dataset.jos_stagger_anchor; - child.setAttribute("data-jos_anchor", anchor); - } - - child.setAttribute("data-jos_animation", stagger); - - staggerinverse - ? child.setAttribute("data-jos_animationinverse", staggerinverse) - : null; - - child.setAttribute("data-jos_duration", stagger_duration); - - // let delg = parseFloat(stagger_seq, 2); - // delg = (delg * i).toFixed(1); - // delg = parseFloat(delg); - // console.log(delg); - // delg = delg + parseFloat(stagger_delay); - - // const delg = parseFloat((parseFloat(stagger_seq, 2) * i).toFixed(1)) + parseFloat(stagger_delay); - - const delg = parseFloat(stagger_seq * i + stagger_delay); - - child.setAttribute("data-jos_delay", delg); - - child.setAttribute("data-jos_once", stagger_once); - - if (stagger_mirror === "false") { - child.setAttribute("data-jos_mirror", "false"); - } - - if (stagger_visible) { - doit.push(child); - } - - if (stagger_scrolldirection) { - child.setAttribute( - "data-jos_scrolldirection", - stagger_scrolldirection - ); - } - - stagger_rootmargin - ? child.setAttribute("data-jos_rootmargin", stagger_rootmargin) - : null; - - if (box.dataset.jos_stagger_scroll) { - child.setAttribute( - "data-jos_scroll", - box.dataset.jos_stagger_scroll - ); - } - - if (box.dataset.jos_stagger_timingFunction) { - child.setAttribute( - "data-jos_timingFunction", - box.dataset.jos_stagger_timingFunction - ); - } - - if (box.dataset.jos_stagger_invoke) { - child.setAttribute( - "data-jos_invoke", - box.dataset.jos_stagger_invoke - ); - } - - if (box.dataset.jos_stagger_invoke_out) { - child.setAttribute( - "data-jos_invoke_out", - box.dataset.jos_stagger_invoke_out - ); - } - - this.boxes = [...this.boxes, child]; - recursive_check(child); - } - }); - - if (!box.dataset.jos_animation) { - box.classList.remove("jos"); - return; - } - } - - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - - if (object_default_mirror == "false") { - box.setAttribute("data-jos_mirror", object_default_mirror); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - this.setRange.add(parseFloat(object_default_duration)); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - this.setRange.add(parseFloat(object_default_delay)); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => { - const isNegative = value.startsWith("-"); - return isNegative ? value.substring(1) : `-${value}`; - }) - .join(" "); - - // let rootMargin = " 10% 0% -30% 0%"; - - let box_observer = { - rootMargin, - threshold: box.dataset.jos_threshold || this.default_threshold, - passive: box.dataset.jos_passive || this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }; - - this.boxes.forEach((box) => { - recursive_check(box); - }); - - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - } - - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); - } else { - box.classList.remove("jos-" + box.dataset.jos_animation); - } - }); - } - this.observers?.forEach((observer) => observer.disconnect()); - } - - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror" + " { transition: 0s forwards !important;}" - ); - //opacity " + s + ", transform - let property = "all "; - let s = - property + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - - styleSheet.insertRule(".jos {" + ("transition: " + s) + ";}"); - - for (const value of this.setRange) { - styleSheet.insertRule( - `[data-jos_duration="${value}"] { - transition-duration: ${value}s !important; - }` - ); - styleSheet.insertRule( - `[data-jos_delay="${value}"] { - transition-delay: ${value}s !important; - }` - ); - } - - this.jos_stylesheet = styleSheet; - } - - getBoxes() { - this.boxes = undefined; - - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); - } - return this.boxes; - } - - getDefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrolldirection, - intersectionRatio, - duration, - mirror, - delay, - debugMode, - disable, - scrollProgressDisable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = - animationinverse || this.default_animationinverse; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrolldirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - if (disable != undefined) { - this.disable = disable; - } - this.scrollProgressDisable = - scrollProgressDisable || this.scrollProgressDisable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - this.default_mirror = mirror || this.default_mirror; - } - - init(options = this.options) { - this.options = options; - this.getDefault(options); - - if (this.disable) return; - - this.getBoxes(); - if (this.debugMode) { - this.debugger(); - } - - this.start(); - - this.getStylesheet(); - } - - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); - } - this.disable = false; - return "Started"; - } - - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; - } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); - } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; - } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; - } - } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; - } -} -const JOS = new jos(); - -if (typeof module !== "undefined" && typeof module.exports !== "undefined") { - module.exports = JOS; -} else { - if (typeof define === "function" && define.amd) { - define([], function () { - return JOS; - }); - } else { - window.JOS = JOS; - } -} -//export default JOS; diff --git a/dev/jos.min.css b/dev/jos.min.css deleted file mode 100644 index 072fa32..0000000 --- a/dev/jos.min.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:.4s ease-in-out}.jos-anchor{opacity:0}.jos-static{transform:translate(0,0);opacity:1}.jos-no-transition{transition-timing-function:linear;transition-duration:0s}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{transform:perspective(2500px) rotateY(-100deg);opacity:0}.jos-flip-left{transform:perspective(2500px) rotateY(100deg);opacity:0}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-360deg) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(360deg) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5,end)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important} \ No newline at end of file diff --git a/dev/jos.min.js b/dev/jos.min.js deleted file mode 100644 index 3468df9..0000000 --- a/dev/jos.min.js +++ /dev/null @@ -1,11 +0,0 @@ -class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.2 (Minified)";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Webpage: ${jos.webpage} - - Github: ${jos.github} -`)}debugger(t=0){if(0===t&&this.debugMode){this.version();let s={};for(let e of Object.keys(this))"function"!=typeof this[e]&&(s[e]=this[e]);console.log(`JOS Values: -`,s),console.log("JOS Initialized:\n\n")}}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let e=t[0],a=e.target;document.querySelectorAll("[data-jos_anchor='#"+a.id+"']").forEach(t=>{let a=t.dataset.jos_animation,o=t.dataset.jos_animationinverse,i=1;if(e.isIntersecting){if(void 0!=t.dataset.jos_counter){let r=parseInt(t.dataset.jos_counter);r++,t.dataset.jos_counter=r}a&&(t.classList.remove("jos-"+a),void 0!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),(void 0!=t.dataset.jos_once||"false"!=t.dataset.jos_once)&&("true"==t.dataset.jos_once?s.unobserve(t):t.dataset.jos_counter>=t.dataset.jos_once&&s.unobserve(t)),void 0!=o&&t.classList.add("jos-"+o))}else(void 0===t.dataset.jos_scrolldirection||1===i&&"down"===t.dataset.jos_scrolldirection||0===i&&"up"===t.dataset.jos_scrolldirection||"none"===t.dataset.jos_scrolldirection)&&(t.classList.add("jos-"+a),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))})};rand=t=>Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:"number"==typeof t?t%1!=0?Math.random()*t:Math.floor(Math.random()*t):Math.random();callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;let s=this.default_rootMargin,e=window.innerHeight,a=t=>{let a=t.dataset.jos_rootmargin||s,o=a.split(" ").map(parseFloat),i=e*o[0]/100,r=e*o[2]/100;t.jos={rootMargin:a,rootMarginValues:o,topMargin:i,bottomMargin:r};let n=t.getBoundingClientRect(),d=n.top-t.jos.topMargin,l=n.bottom-t.jos.bottomMargin,u=n.top/e,h=d/(e-t.jos.topMargin-t.jos.bottomMargin),c=0;c=h<=0?0:h>=100?1:h,t.jos={elementRect:n,elementTop:d,elementBottom:l,windowScrollProgress:u,rootScrollProgress:h,scrollProgress:c},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(a)}};callbackRouter=(t,s,e=1)=>{if(this.disable)return;let a=t[0],o=a.target,i=o.dataset.jos_animation,r=o.dataset.jos_animationinverse,n=1;if(n=a.boundingClientRect.top<0?0:1,a.isIntersecting){if("false"!=o.dataset.jos_scroll&&void 0!=o.dataset.jos_scroll&&(this.scrollEnter.push(o),this.callbackScroller(this.scrollEnter)),void 0!=o.dataset.jos_counter){let d=parseInt(o.dataset.jos_counter);d++,o.dataset.jos_counter=d}"false"==o.dataset.jos_mirror&&o.classList.remove("jos-no-mirror"),i&&(o.classList.remove("jos-"+i),void 0!=o.dataset.jos_invoke&&window[o.dataset.jos_invoke](o),(void 0!=o.dataset.jos_once||"false"!=o.dataset.jos_once)&&("true"==o.dataset.jos_once?s.unobserve(o):o.dataset.jos_counter>=o.dataset.jos_once&&s.unobserve(o))),void 0!=r&&o.classList.add("jos-"+r)}else(void 0===o.dataset.jos_scrolldirection||1===n&&"down"===o.dataset.jos_scrolldirection||0===n&&"up"===o.dataset.jos_scrolldirection||"none"===o.dataset.jos_scrolldirection)&&(o.classList.toggle("jos-no-mirror","false"==o.dataset.jos_mirror),o.classList.add("jos-"+i),void 0!=r&&o.classList.remove("jos-"+r),void 0!==o.dataset.jos_invoke_out&&window[o.dataset.jos_invoke_out](o)),"false"!=o.dataset.jos_scroll&&void 0!=o.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter(t=>t.id!==o.id),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=e=>{let a=e.dataset.jos_once||this.default_once,o=e.dataset.jos_animation||this.default_animation,i=e.dataset.jos_animationinverse||this.default_animationinverse,r=e.dataset.jos_timingFunction||this.default_timingFunction,n=e.dataset.jos_duration||this.default_duration,d=e.dataset.jos_delay||this.default_delay,l=e.dataset.jos_mirror||this.default_mirror;if(e.classList.contains("jos_disabled")&&(e.classList.remove("jos_disabled"),e.classList.add("jos")),a&&("true"==a||/^\d+$/.test(a))?e.setAttribute("data-jos_once",a):e.setAttribute("data-jos_once",this.default_once?"1":"false"),e.dataset.jos_stagger){let u=this.default_delay,h=this.default_duration,c=this.once,j=this.mirror,g=this.scrolldirection,f=this.rootMargin,b=this.animationinverse;if(e.id||(e.id=Math.random().toString(36).substring(7)),Array.from(e.children).forEach((a,o)=>{if(!a.classList.contains("jos")){a.classList.add("jos"),a.id||(a.id=`${e.id}_${o}`);let i=e.dataset.jos_stagger,r=e.dataset.jos_stagger_delay||u,n=e.dataset.jos_stagger_seq||0,d=e.dataset.jos_stagger_duration||h,l=e.dataset.jos_stagger_once||c,m=e.dataset.jos_staggerinverse||b,v=e.dataset.jos_stagger_mirror||j,$=e.dataset.jos_stagger_startVisible,p=e.dataset.jos_stagger_scrolldirection||g,y=e.dataset.jos_stagger_rootmargin||f;if(e.dataset.jos_stagger_anchor||a.dataset.jos_anchor){let _="true"===e.dataset.jos_stagger_anchor?"#"+e.id:e.dataset.jos_stagger_anchor;a.setAttribute("data-jos_anchor",_)}a.setAttribute("data-jos_animation",i),m&&a.setAttribute("data-jos_animationinverse",m),a.setAttribute("data-jos_duration",d);let A=parseFloat(n*o+r);a.setAttribute("data-jos_delay",A),a.setAttribute("data-jos_once",l),"false"===v&&a.setAttribute("data-jos_mirror","false"),$&&t.push(a),p&&a.setAttribute("data-jos_scrolldirection",p),y&&a.setAttribute("data-jos_rootmargin",y),e.dataset.jos_stagger_scroll&&a.setAttribute("data-jos_scroll",e.dataset.jos_stagger_scroll),e.dataset.jos_stagger_timingFunction&&a.setAttribute("data-jos_timingFunction",e.dataset.jos_stagger_timingFunction),e.dataset.jos_stagger_invoke&&a.setAttribute("data-jos_invoke",e.dataset.jos_stagger_invoke),e.dataset.jos_stagger_invoke_out&&a.setAttribute("data-jos_invoke_out",e.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,a],s(a)}}),!e.dataset.jos_animation){e.classList.remove("jos");return}}e.setAttribute("data-jos_animation",o),i&&e.setAttribute("data-jos_animationinverse",i),r&&e.setAttribute("data-jos_timingFunction",r),"false"==l&&e.setAttribute("data-jos_mirror",l),n&&(e.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),d&&(e.setAttribute("data-jos_delay",d),this.setRange.add(parseFloat(d))),e.setAttribute("data-jos_counter","0"),e.classList.add("jos-"+o),(e.dataset.jos_startvisible||this.default_startVisible)&&t.push(e),this.default_scrolldirection&&e.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let m=[e.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],e.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],e.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],e.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3],].map(t=>{let s=t.startsWith("-");return s?t.substring(1):`-${t}`}).join(" "),v={rootMargin:m,threshold:e.dataset.jos_threshold||this.default_threshold,passive:e.dataset.jos_passive||this.default_passive};if(e.dataset.jos_anchor){let $=new IntersectionObserver(this.callbackRouter_anchor,v);this.observers.push($),$.observe(document.getElementById(e.dataset.jos_anchor.substring(1)))}else{let p=new IntersectionObserver(this.callbackRouter,v);this.observers.push(p),p.observe(e)}};this.boxes.forEach(t=>{s(t)}),setTimeout(()=>{t.forEach(t=>{let s=t.dataset.jos_startvisible;setTimeout(()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)},s||this.default_startVisible)})},100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach(s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)}),this.observers?.forEach(t=>t.disconnect())}getStylesheet(){let t=document.createElement("style");document.head.appendChild(t);let s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";for(let a of(s.insertRule(".jos {transition: "+e+";}"),this.setRange))s.insertRule(`[data-jos_duration="${a}"] { - transition-duration: ${a}s !important; - }`),s.insertRule(`[data-jos_delay="${a}"] { - transition-delay: ${a}s !important; - }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:a,timingFunction:o,threshold:i,startVisible:r,scrolldirection:n,intersectionRatio:d,duration:l,mirror:u,delay:h,debugMode:c,disable:j,scrollProgressDisable:g,rootMargin:f,rootMarginTop:b,rootMarginBottom:m}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=a||this.default_animationinverse,this.default_timingFunction=o||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=d||this.default_threshold,this.default_duration=l||this.default_duration,this.default_delay=h||this.default_delay,this.debugMode=c||this.debugMode,void 0!=j&&(this.disable=j),this.scrollProgressDisable=g||this.scrollProgressDisable,this.default_rootMargin=f||`${b||"-10%"} 0% ${m||"-40%"} 0%`,this.default_mirror=u||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return -1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){for(let s in this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0,this)this.hasOwnProperty(s)&&"function"!=typeof this[s]&&(this[s]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],function(){return JOS}):window.JOS=JOS; \ No newline at end of file diff --git a/dist/.htaccess b/dist/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/jos.css b/dist/jos.css index ea37fe9..d86389f 100644 --- a/dist/jos.css +++ b/dist/jos.css @@ -1 +1,601 @@ -.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} \ No newline at end of file +/*! JOS Animation Library v1.0.0-beta.1 | MIT License | https://jos-animation.vercel.app */ + +/* ============================================================ + Base + ============================================================ */ + +.jos { + transition: all 0.4s ease-in-out; +} + +.jos-anchor { + opacity: 0; + transition: all 0.4s ease-in-out; +} + +.jos-static { + transform: translate(0, 0); + opacity: 1; +} + +.jos-no-transition { + transition-timing-function: linear; + transition-duration: 0s; +} + +.jos-none {} + +.jos-hidden { + display: none; +} + +.jos-visible { + display: block; + opacity: 1; +} + +.jos-stagger {} + +/* ============================================================ + Fade + ============================================================ */ + +.jos-fade { + opacity: 0; +} + +.jos-fade-right { + opacity: 0; + transform: translateX(-100px); +} + +.jos-fade-left { + opacity: 0; + transform: translateX(100px); +} + +.jos-fade-up { + opacity: 0; + transform: translateY(50px); +} + +.jos-fade-down { + opacity: 0; + transform: translateY(-50px); +} + +.jos-fade-right-up { + opacity: 0; + transform: translateX(-100px) translateY(50px); +} + +.jos-fade-right-down { + opacity: 0; + transform: translateX(-100px) translateY(-50px); +} + +.jos-fade-left-up { + opacity: 0; + transform: translateX(100px) translateY(50px); +} + +.jos-fade-left-down { + opacity: 0; + transform: translateX(100px) translateY(-50px); +} + +/* ============================================================ + Slide + ============================================================ */ + +.jos-slide, +.jos-slide-right { + transform: translateX(-100px); +} + +.jos-slide-left { + transform: translateX(100px); +} + +.jos-slide-up { + transform: translateY(100px); +} + +.jos-slide-down { + transform: translateY(-100px); +} + +.jos-slide-right-up { + transform: translateX(-100px) translateY(100px); +} + +.jos-slide-right-down { + transform: translateX(-100px) translateY(-100px); +} + +.jos-slide-left-up { + transform: translateX(100px) translateY(100px); +} + +.jos-slide-left-down { + transform: translateX(100px) translateY(-100px); +} + +/* ============================================================ + Zoom Out + ============================================================ */ + +.jos-zoom, +.jos-zoom-out { + opacity: 0; + transform: scale(0.8); +} + +.jos-zoom-out-right, +.jos-zoom-right { + opacity: 0; + transform: scale(0.8) translate3d(-100px, 0, -100px); +} + +.jos-zoom-out-left, +.jos-zoom-left { + opacity: 0; + transform: scale(0.8) translate3d(100px, 0, -100px); +} + +.jos-zoom-out-down, +.jos-zoom-down { + opacity: 0; + transform: scale(0.8) translate3d(0, -100px, 0); +} + +.jos-zoom-out-up, +.jos-zoom-up { + opacity: 0; + transform: scale(0.8) translate3d(0, 100px, 0); +} + +/* ============================================================ + Grow + ============================================================ */ + +.jos-grow { + transform: scale(0); +} + +.jos-grow-right { + transform: scale(0) translate3d(-100px, 0, -100px); +} + +.jos-grow-left { + transform: scale(0) translate3d(100px, 0, -100px); +} + +.jos-grow-down { + transform: scale(0) translate3d(0, -100px, 0); +} + +.jos-grow-up { + transform: scale(0) translate3d(0, 100px, 0); +} + +/* ============================================================ + Zoom In + ============================================================ */ + +.jos-zoom-in { + opacity: 0; + transform: scale(1.1); +} + +.jos-zoom-in-down { + opacity: 0; + transform: scale(1.1) translate3d(0, -100px, 0); +} + +.jos-zoom-in-up { + opacity: 0; + transform: scale(1.1) translate3d(0, 100px, 0); +} + +.jos-zoom-in-right { + opacity: 0; + transform: scale(1.1) translate3d(-100px, 0, -100px); +} + +.jos-zoom-in-left { + opacity: 0; + transform: scale(1.1) translate3d(100px, 0, -100px); +} + +/* ============================================================ + Shrink + ============================================================ */ + +.jos-shrink { + transform: scale(1.4); +} + +.jos-shrink-right { + transform: scale(1.4) translate3d(-100px, 0, -100px); +} + +.jos-shrink-left { + transform: scale(1.4) translate3d(100px, 0, -100px); +} + +.jos-shrink-down { + transform: scale(1.4) translate3d(0, -100px, 0); +} + +.jos-shrink-up { + transform: scale(1.4) translate3d(0, 100px, 0); +} + +/* ============================================================ + Flip + ============================================================ */ + +.jos-flip, +.jos-flip-right { + opacity: 0; + transform: perspective(2500px) rotateY(-100deg); +} + +.jos-flip-left { + opacity: 0; + transform: perspective(2500px) rotateY(100deg); +} + +.jos-flip-up { + opacity: 0; + transform: perspective(2500px) rotateX(-100deg); +} + +.jos-flip-down { + opacity: 0; + transform: perspective(2500px) rotateX(100deg); +} + +/* ============================================================ + Rotate + ============================================================ */ + +.jos-rotate, +.jos-rotate-right { + opacity: 0; + transform: rotate(-180deg); +} + +.jos-rotate-left { + opacity: 0; + transform: rotate(180deg); +} + +/* ============================================================ + Spin + ============================================================ */ + +.jos-spin, +.jos-spin-right { + opacity: 0; + transform: rotate(-180deg) scale(0); +} + +.jos-spin-left { + opacity: 0; + transform: rotate(180deg) scale(0); +} + +/* ============================================================ + Revolve + ============================================================ */ + +.jos-revolve, +.jos-revolve-right { + opacity: 0; + transform: rotate(-360deg) scale(0); +} + +.jos-revolve-left { + opacity: 0; + transform: rotate(360deg) scale(0); +} + +/* ============================================================ + Stretch + ============================================================ */ + +.jos-stretch { + opacity: 0; + transform: scaleX(0); +} + +.jos-stretch-vertical { + opacity: 0; + transform: scaleY(0); +} + +/* ============================================================ + Skew + ============================================================ */ + +.jos-skew { + opacity: 0; + transform: skew(20deg, 20deg); +} + +.jos-skew-right { + opacity: 0; + transform: skew(20deg, 20deg) translate3d(-100px, 0, -100px); +} + +.jos-skew-left { + opacity: 0; + transform: skew(20deg, 20deg) translate3d(100px, 0, -100px); +} + +.jos-skew-down { + opacity: 0; + transform: skew(20deg, 20deg) translate3d(0, -100px, 0); +} + +.jos-skew-up { + opacity: 0; + transform: skew(20deg, 20deg) translate3d(0, 100px, 0); +} + +.jos-slant { + transform: skew(25deg, 25deg); +} + +.jos-slant-right { + transform: skew(25deg, 0deg); +} + +.jos-slant-left { + transform: skew(0deg, 25deg); +} + +/* ============================================================ + Bar + ============================================================ */ + +.jos-bar, +.jos-bar_vertical { + transform: perspective(2500px) rotateY(-100deg); +} + +.jos-bar_horizontal { + transform: perspective(2500px) rotateX(-100deg); +} + +/* ============================================================ + Filters + ============================================================ */ + +.jos-grey { + filter: grayscale(100%); +} + +.jos-blur { + filter: blur(7px); +} + +.jos-backdrop { + backdrop-filter: blur(7px); + opacity: 0.8; +} + +.jos-invert { + filter: invert(100%); +} + +.jos-sepia { + filter: sepia(100%); +} + +.jos-saturate { + filter: saturate(100%); +} + +.jos-hue-rotate { + filter: hue-rotate(90deg); +} + +.jos-brightness { + filter: brightness(0.5); +} + +/* ============================================================ + Timing Function Attribute Overrides + ============================================================ */ + +[data-jos_timing_function="ease"] { + transition-timing-function: ease !important; +} + +[data-jos_timing_function="ease-in"] { + transition-timing-function: ease-in !important; +} + +[data-jos_timing_function="ease-out"] { + transition-timing-function: ease-out !important; +} + +[data-jos_timing_function="ease-in-out"] { + transition-timing-function: ease-in-out !important; +} + +[data-jos_timing_function="linear"] { + transition-timing-function: linear !important; +} + +[data-jos_timing_function="step-start"] { + transition-timing-function: step-start !important; +} + +[data-jos_timing_function="step-end"] { + transition-timing-function: step-end !important; +} + +[data-jos_timing_function="steps"] { + transition-timing-function: steps(5, end) !important; +} + +/* ============================================================ + Playable Animations (Continuous / Looping) + ============================================================ */ + +/* Slide Play */ +.jos-slide-play, +.jos-slide-horizontal-play { + animation: jos-slide-play 0.7s ease-in-out infinite alternate-reverse; +} + +@keyframes jos-slide-play { + 0% { transform: translateX(-100px); } + 100% { transform: translateX(100px); } +} + +.jos-slide-vertical-play { + animation: jos-slide-vertical-play 0.7s ease-in-out infinite alternate-reverse; +} + +@keyframes jos-slide-vertical-play { + 0% { transform: translateY(-100px); } + 100% { transform: translateY(100px); } +} + +/* Zoom Play */ +.jos-zoom-in-play, +.jos-pulse-play { + animation: jos-zoom-in-play 1s infinite alternate; +} + +@keyframes jos-zoom-in-play { + 0% { transform: scale(1); opacity: 0; } + 100% { transform: scale(0.8); opacity: 1; } +} + +.jos-zoom-play, +.jos-zoom-out-play, +.jos-pulse-out-play { + animation: jos-zoom-play 0.5s linear infinite alternate; +} + +@keyframes jos-zoom-play { + 0% { transform: scale(1); opacity: 0; } + 100% { transform: scale(1.1); opacity: 1; } +} + +/* Flip Play */ +.jos-flip-play { + animation: jos-flip-play 0.7s infinite alternate; +} + +@keyframes jos-flip-play { + 0% { transform: rotateY(0deg); } + 100% { transform: rotateY(180deg); } +} + +/* Rotate Play */ +.jos-rotate-play { + animation: jos-rotate-play 1s linear infinite alternate-reverse; +} + +@keyframes jos-rotate-play { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Spin Play */ +.jos-spin-play { + animation: jos-spin-play 1.5s infinite alternate; +} + +@keyframes jos-spin-play { + 0% { transform: rotate(0deg); opacity: 0; } + 100% { transform: rotate(360deg); opacity: 1; } +} + +/* Revolve Play */ +.jos-revolve-play { + animation: jos-revolve-play 1.5s infinite alternate; +} + +@keyframes jos-revolve-play { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Grow / Shrink Play */ +.jos-grow-play { + animation: jos-grow-play 1s infinite alternate; +} + +.jos-shrink-play { + animation: jos-grow-play 1s infinite alternate-reverse; +} + +@keyframes jos-grow-play { + 0% { transform: scale(0); } + 100% { transform: scale(1); } +} + +/* Stretch Play */ +.jos-stretch-play { + animation: jos-stretch-play 0.7s infinite alternate; +} + +@keyframes jos-stretch-play { + 0% { transform: scaleX(1); } + 100% { transform: scaleX(0); } +} + +.jos-stretch-vertical-play { + animation: jos-stretch-vertical-play 0.7s infinite alternate-reverse; +} + +@keyframes jos-stretch-vertical-play { + 0% { transform: scaleY(1); } + 100% { transform: scaleY(0); } +} + +/* Fade Play */ +.jos-fade-play { + animation: jos-fade-play 0.8s infinite alternate; +} + +@keyframes jos-fade-play { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +.jos-fade-horizontal-play { + animation: jos-fade-horizontal-play 1s infinite alternate-reverse; +} + +@keyframes jos-fade-horizontal-play { + 0% { opacity: 0; transform: translateX(100px); } + 100% { opacity: 1; transform: translateX(-100px); } +} + +.jos-fade-vertical-play { + animation: jos-fade-vertical-play 1s infinite alternate-reverse; +} + +@keyframes jos-fade-vertical-play { + 0% { opacity: 0; transform: translateY(100px); } + 100% { opacity: 1; transform: translateY(-100px); } +} + +/* Blink Play */ +.jos-blink-play { + animation: jos-blink-play 1s steps(1, end) infinite; +} + +@keyframes jos-blink-play { + 0% { opacity: 1; } + 50% { opacity: 0; } +} diff --git a/dist/jos.debug.css b/dist/jos.debug.css deleted file mode 100644 index 51534da..0000000 --- a/dist/jos.debug.css +++ /dev/null @@ -1,594 +0,0 @@ -/* -JOS v0.9.2 By Jesvi Jonathan -*/ - -/* jos default */ -.jos { - /* opacity: 1;*/ - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - /* display: block; */ - /* transition-timing-function: ease-in-out; - transition-property: all; - transition-delay: 0; - transition-duration: 0.4s; */ -} -/* .jos:not([class]):not([class*="display"]):not(:has([class*="display"])) { - display: block; -} */ - -.jos-anchor { - opacity: 0; - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - transition-timing-function: ease-in-out; -} -.jos-static { - transform: translate(0, 0); - opacity: 1; -} -.jos-no-transition { - transition-timing-function: linear; - transition-duration: 0s; -} -.jos-none { -} -.jos-hidden { - display: none; -} -.jos-visible { - display: block; - opacity: 1; -} -.jos-stagger { - /* some cool transition */ - /* do not nullify this */ -} - -/* .jos-no-mirror { - transition: 0s forwards !important; -} */ - -/* fade */ -.jos-fade { - opacity: 0; -} -.jos-fade-right { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-fade-right-up { - opacity: 0; - transform: translateX(-100px) translateY(50px); -} -.jos-fade-right-down { - opacity: 0; - transform: translateX(-100px) translateY(-50px); -} -.jos-fade-left-up { - opacity: 0; - transform: translateX(100px) translateY(50px); -} -.jos-fade-left-down { - opacity: 0; - transform: translateX(100px) translateY(-50px); -} - -/* slide */ - -.jos-slide, -.jos-slide-right { - transform: translateX(-100px); -} -.jos-slide-left { - transform: translateX(100px); -} -.jos-slide-up { - transform: translateY(100px); -} -.jos-slide-down { - transform: translateY(-100px); -} -.jos-slide-right-up { - transform: translateX(-100px) translateY(100px); -} -.jos-slide-right-down { - transform: translateX(-100px) translateY(-100px); -} -.jos-slide-left-up { - transform: translateX(100px) translateY(100px); -} -.jos-slide-left-down { - transform: translateX(100px) translateY(-100px); -} - -/* zoom out */ -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); -} -.jos-zoom-out-right, -.jos-zoom-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0px, -100px); -} -.jos-zoom-out-left, -.jos-zoom-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0px, -100px); -} -.jos-zoom-out-down, -.jos-zoom-down { - opacity: 0; - transform: scale(0.8) translate3d(0px, -100px, 0px); -} -.jos-zoom-out-up, -.jos-zoom-up { - opacity: 0; - transform: scale(0.8) translate3d(0px, 100px, 0px); -} - -/* grow */ -.jos-grow { - transform: scale(0); -} -.jos-grow-right { - transform: scale(0) translate3d(-100px, 0px, -100px); -} -.jos-grow-left { - transform: scale(0) translate3d(100px, 0px, -100px); -} -.jos-grow-down { - transform: scale(0) translate3d(0px, -100px, 0px); -} -.jos-grow-up { - transform: scale(0) translate3d(0px, 100px, 0px); -} - -/* zoom in */ -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0px, -100px, 0px); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0px, 100px, 0px); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0px, -100px); -} - -/* shrink */ -.jos-shrink { - transform: scale(1.4); -} -.jos-shrink-right { - transform: scale(1.4) translate3d(-100px, 0px, -100px); -} -.jos-shrink-left { - transform: scale(1.4) translate3d(100px, 0px, -100px); -} -.jos-shrink-down { - transform: scale(1.4) translate3d(0px, -100px, 0px); -} -.jos-shrink-up { - transform: scale(1.4) translate3d(0px, 100px, 0px); -} - -/* flip */ -.jos-flip, -.jos-flip-right { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} - -/* rotate */ -.jos-rotate, -.jos-rotate-right { - opacity: 0; - transform: rotate(-180deg); -} -.jos-rotate-left { - opacity: 0; - transform: rotate(180deg); -} - -/* spin */ -.jos-spin, -.jos-spin-right { - opacity: 0; - transform: rotate(-180deg) scale(0); -} -.jos-spin-left { - opacity: 0; - transform: rotate(180deg) scale(0); -} - -/* revolve */ -.jos-revolve, -.jos-revolve-right { - opacity: 0; - transform: rotate(-360deg) scale(0); -} -.jos-revolve-left { - opacity: 0; - transform: rotate(360deg) scale(0); -} - -/* stretch */ -.jos-stretch { - opacity: 0; - transform: scaleX(0); -} -.jos-stretch-vertical { - opacity: 0; - transform: scaleY(0); -} - -/* skew */ -.jos-skew { - opacity: 0; - transform: skew(20deg, 20deg); -} -.jos-skew-right { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(-100px, 0px, -100px); -} -.jos-skew-left { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(100px, 0px, -100px); -} -.jos-skew-down { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, -100px, 0px); -} -.jos-skew-up { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, 100px, 0px); -} -.jos-slant { - transform: skew(25deg, 25deg); -} -.jos-slant-right { - transform: skew(25deg, 0deg); -} -.jos-slant-left { - transform: skew(0deg, 25deg); -} -.jos-bar, -.jos-bar_vertical { - transform: perspective(2500px) rotateY(-100deg); -} -.jos-bar_horizontal { - transform: perspective(2500px) rotateX(-100deg); -} - -.jos-grey { - filter: grayscale(100%); -} -.jos-blur { - filter: blur(7px); -} -.jos-backdrop { - backdrop-filter: blur(7px); - opacity: 0.8; -} -.jos-invert { - filter: invert(100%); -} -.jos-sepia { - filter: sepia(100%); -} -.jos-saturate { - filter: saturate(100%); -} -.jos-hue-rotate { - filter: hue-rotate(90deg); -} -.jos-brightness { - filter: brightness(0.5); -} - -/* timing function attribute */ -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} - -/* Playable animations */ - -.jos-slide-play, -.jos-slide-horizontal-play { - transition: 1s; - animation: jos-slide-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-play { - 0% { - transform: translateX(-100px); - } - - 100% { - transform: translateX(100px); - } -} - -.jos-slide-vertical-play { - animation: jos-slide-vertical-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-vertical-play { - 0% { - transform: translateY(-100px); - } - - 100% { - transform: translateY(100px); - } -} - -.jos-zoom-in-play, -.jos-pulse-play { - animation: jos-zoom-in-play 1s infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-in-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(0.8); - } -} - -.jos-zoom-play, -.jos-zoom-out-play, -.jos-pulse-out-play { - animation: jos-zoom-play 0.5s linear infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(1.1); - } -} - -.jos-flip-play { - animation: jos-flip-play 0.7s infinite; - animation-direction: alternate; -} -@keyframes jos-flip-play { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(180deg); - } -} - -.jos-rotate-play { - animation: jos-rotate-play 1s linear forwards infinite; - border-radius: 0%; - animation-direction: alternate-reverse; -} - -@keyframes jos-rotate-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-spin-play { - animation: jos-spin-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-spin-play { - 0% { - transform: rotate(0deg); - opacity: 0; - } - - 100% { - transform: rotate(360deg); - opacity: 1; - } -} - -.jos-revolve-play { - animation: jos-revolve-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-revolve-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-grow-play, -.jos-shrink-play { - animation: jos-grow-play 1s infinite; - animation-direction: alternate; -} -@keyframes jos-grow-play { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -.jos-shrink-play { - animation-direction: alternate-reverse; -} - -.jos-stretch-play { - animation: jos-stretch-play 0.7s infinite; - animation-direction: alternate; -} - -@keyframes jos-stretch-play { - 0% { - transform: scaleX(1); - } - - 100% { - transform: scaleX(0); - } -} - -.jos-stretch-vertical-play { - animation: jos-stretch-vertical-play 0.7s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-stretch-vertical-play { - 0% { - transform: scaleY(1); - } - - 100% { - transform: scaleY(0); - } -} - -.jos-fade-play { - animation: jos-fade-play 0.8s infinite; - animation-direction: alternate; -} - -@keyframes jos-fade-play { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.jos-fade-horizontal-play { - animation: jos-fade-horizontal-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-horizontal-play { - 0% { - opacity: 0; - transform: translateX(100px); - } - - 100% { - opacity: 1; - transform: translateX(-100px); - } -} - -.jos-fade-vertical-play { - animation: jos-fade-vertical-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-vertical-play { - 0% { - opacity: 0; - transform: translateY(100px); - } - - 100% { - opacity: 1; - transform: translateY(-100px); - } -} - -.jos-blink-play { - animation: jos-blink-play 1s steps(1, end) infinite; -} - -@keyframes jos-blink-play { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } -} diff --git a/dist/jos.debug.js b/dist/jos.debug.js index 76bc6b7..80ec8d9 100644 --- a/dist/jos.debug.js +++ b/dist/jos.debug.js @@ -1,702 +1,1446 @@ -// import "./jos.css"; -// For jos.debug.js & jos under development, you are required to manually include jos.css using tag. -// Other versions of jos.js will auto import jos.css & does not require or specific imports. -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - default_mirror = undefined; - setRange = new Set(); - - debug = false; - scrollProgressDisable = undefined; - disable = false; - - static version = "0.9.2 (Debug)"; - static author = "Jesvi Jonathan"; - static webpage = "https://jos-animation.vercel.app"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - scrollEnter = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Webpage: ${jos.webpage} - - Github: ${jos.github}\n`); +/*! + * JOS Animation Library v1.0.0-beta.1 + * https://jos-animation.vercel.app + * (c) 2026 Jesvi Jonathan + * Released under the MIT License + */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.JOS = factory()); +})(this, (function () { 'use strict'; + + /** + * Default configuration for JOS Animation Library. + */ + const DEFAULTS = Object.freeze({ + once: false, + animation: "fade", + animationInverse: null, + timingFunction: "ease-in-out", + threshold: 0, + duration: 0.4, + delay: 0, + rootMargin: "-10% 0% -40% 0%", + startVisible: null, + scrollDirection: null, + mirror: null, + passive: true, + disable: false, + debugMode: false, + scrollProgressDisable: false, + }); + + /** + * DOM utilities for JOS. + */ + + function getData(el, key, fallback) { + const val = el.dataset[key]; + return val !== undefined ? val : fallback; + } + + function setData(el, key, value) { + el.dataset[key] = value; + } + + function addClass(el, cls) { + if (cls) el.classList.add(cls); + } + + function removeClass(el, cls) { + if (cls) el.classList.remove(cls); + } + + function toggleClass(el, cls, force) { + el.classList.toggle(cls, force); + } + + function hasClass(el, cls) { + return el.classList.contains(cls); + } + + function queryAll(selector, root) { + return Array.from((document).querySelectorAll(selector)); + } + + function byId(id) { + return document.getElementById(id.charAt(0) === "#" ? id.slice(1) : id); + } + + let _id = 0; + function uniqueId(prefix) { + return (prefix) + "_" + (++_id) + "_" + ((Math.random() * 36e4) | 0).toString(36); } - //debugger = () => null; - debugger(type = 0) { - if (type === 0 && this.debugMode) { - this.version(); - const settings = {}; - for (const key of Object.keys(this)) { - if (typeof this[key] !== "function") { - settings[key] = this[key]; + /** + * ElementManager - Element initialization, stagger children, and attribute setup. + */ + + class ElementManager { + constructor(config) { + this._config = config; + this._durationSet = new Set(); + this._delaySet = new Set(); + this._startVisibleQueue = []; + } + + get durationSet() { return this._durationSet; } + get delaySet() { return this._delaySet; } + + initElement(el) { + const cfg = this._config; + const extras = []; + + // Reset any previous JOS state on re-init + el._josState = undefined; + el._josCooldown = false; + + if (hasClass(el, "jos_disabled")) { + removeClass(el, "jos_disabled"); + addClass(el, "jos"); + } + + // Resolve per-element settings with fallback to globals + const once = getData(el, "jos_once") || cfg.once; + const animation = getData(el, "jos_animation") || cfg.animation; + const inverse = getData(el, "jos_animationinverse") || cfg.animationInverse; + const timing = getData(el, "jos_timingfunction") || getData(el, "jos_timingFunction") || cfg.timingFunction; + const duration = getData(el, "jos_duration") || cfg.duration; + const delay = getData(el, "jos_delay") || cfg.delay; + const mirror = getData(el, "jos_mirror") || cfg.mirror; + + // Handle once + if (once && (once === "true" || /^\d+$/.test(String(once)))) { + setData(el, "jos_once", String(once)); + } else { + setData(el, "jos_once", cfg.once ? "1" : "false"); + } + + // Process stagger children + if (el.dataset.jos_stagger) { + const children = this._initStagger(el); + extras.push(...children); + if (!el.dataset.jos_animation) { + removeClass(el, "jos"); + return extras; } } - console.log(`JOS Values:\n`, settings); - console.log("JOS Initialized:\n\n"); + setData(el, "jos_animation", animation); + if (inverse) setData(el, "jos_animationinverse", inverse); + if (timing) setData(el, "jos_timingfunction", timing); + if (mirror === "false") setData(el, "jos_mirror", mirror); + + if (duration) { + setData(el, "jos_duration", duration); + this._durationSet.add(parseFloat(duration)); + } + if (delay) { + setData(el, "jos_delay", delay); + this._delaySet.add(parseFloat(delay)); + } + + // Reset counter + setData(el, "jos_counter", "0"); + + // Add animation class (the "off" state) + addClass(el, `jos-${animation}`); + + // Determine startVisible: + // Per-element data-jos_startvisible takes priority, then global config. + // Explicit "false" must NOT queue the element (fixes startVisible=false re-init bug). + const svAttr = el.dataset.jos_startvisible; + if (svAttr !== undefined && svAttr !== "false" && svAttr !== null) { + this._startVisibleQueue.push(el); + } else if (svAttr === undefined && cfg.startVisible) { + this._startVisibleQueue.push(el); + } + + // Set scroll direction + if (cfg.scrollDirection && !el.dataset.jos_scrolldirection) { + setData(el, "jos_scrolldirection", cfg.scrollDirection); + } + + return extras; } - } - callbackRouter_anchor = (entries, observer) => { - if (this.disable) return; - - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; + _initStagger(parent) { + const cfg = this._config; + const created = []; + + if (!parent.id) parent.id = uniqueId("jos-stagger"); + + const children = parent.children; + const stagger = parent.dataset.jos_stagger; + const sDelay = parseFloat(parent.dataset.jos_stagger_delay || cfg.delay); + const sSeq = parseFloat(parent.dataset.jos_stagger_seq || 0); + const sDur = parent.dataset.jos_stagger_duration || cfg.duration; + const sOnce = parent.dataset.jos_stagger_once || cfg.once; + const sInverse = parent.dataset.jos_staggerinverse || cfg.animationInverse; + const sMirror = parent.dataset.jos_stagger_mirror || cfg.mirror; + const sVisible = parent.dataset.jos_stagger_startVisible; + const sDir = parent.dataset.jos_stagger_scrolldirection || cfg.scrollDirection; + const sMargin = parent.dataset.jos_stagger_rootmargin || cfg.rootMargin; + + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (hasClass(child, "jos")) continue; + + addClass(child, "jos"); + if (!child.id) child.id = `${parent.id}_${i}`; + + if (parent.dataset.jos_stagger_anchor || child.dataset.jos_anchor) { + const anchor = parent.dataset.jos_stagger_anchor === "true" + ? `#${parent.id}` + : parent.dataset.jos_stagger_anchor; + setData(child, "jos_anchor", anchor); } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } + + setData(child, "jos_animation", stagger); + if (sInverse) setData(child, "jos_animationinverse", sInverse); + setData(child, "jos_duration", sDur); + setData(child, "jos_delay", parseFloat(sSeq * i + sDelay)); + setData(child, "jos_once", sOnce); + if (sMirror === "false") setData(child, "jos_mirror", "false"); + if (sVisible) this._startVisibleQueue.push(child); + if (sDir) setData(child, "jos_scrolldirection", sDir); + if (sMargin) setData(child, "jos_rootmargin", sMargin); + + // Pass-through attributes + const pass = [ + ["jos_stagger_scroll", "jos_scroll"], + ["jos_stagger_timingFunction", "jos_timingfunction"], + ["jos_stagger_invoke", "jos_invoke"], + ["jos_stagger_invoke_out", "jos_invoke_out"], + ]; + for (let j = 0; j < pass.length; j++) { + if (parent.dataset[pass[j][0]]) setData(child, pass[j][1], parent.dataset[pass[j][0]]); } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); + + created.push(child); + } + + return created; + } + + processStartVisible() { + const cfg = this._config; + // Use rAF instead of setTimeout(100) for faster first paint + requestAnimationFrame(() => { + for (let i = 0; i < this._startVisibleQueue.length; i++) { + const el = this._startVisibleQueue[i]; + const val = el.dataset.jos_startvisible; + const delayMs = val === "true" ? 0 : parseInt(val, 10) || cfg.startVisible || 0; + + if (delayMs <= 0) { + removeClass(el, `jos-${el.dataset.jos_animation}`); + } else { + setTimeout(() => { removeClass(el, `jos-${el.dataset.jos_animation}`); }, delayMs); } } + }); + } + + unsetElements(elements, state) { + if (!elements) return; + for (let i = 0; i < elements.length; i++) { + const el = elements[i]; + removeClass(el, "jos"); + addClass(el, "jos_disabled"); + if (state === 0) { + addClass(el, `jos-${el.dataset.jos_animation}`); + } else { + removeClass(el, `jos-${el.dataset.jos_animation}`); + } } - }); - }; + } + } - rand = (e) => { - if (Array.isArray(e)) return e[Math.floor(Math.random() * e.length)]; + /** + * ObserverManager - Manages IntersectionObserver instances for JOS elements. + */ + + class ObserverManager { + constructor(config, scrollTracker) { + this._config = config; + this._scrollTracker = scrollTracker; + this._observers = []; + this._minCooldownMs = 50; + this._lastScrollX = 0; + this._lastScrollY = 0; + + // Track horizontal scroll for left/right direction (#33) + if (typeof window !== "undefined") { + this._lastScrollX = window.scrollX || window.pageXOffset || 0; + this._lastScrollY = window.scrollY || window.pageYOffset || 0; + } + } - if (typeof e === "number") { - return e % 1 !== 0 ? Math.random() * e : Math.floor(Math.random() * e); + observe(el) { + const rootMargin = this._computeRootMargin(el); + const observer = new IntersectionObserver( + (entries) => this._handleIntersection(entries, observer), + { + rootMargin, + threshold: parseFloat(el.dataset.jos_threshold || this._config.threshold), + } + ); + this._observers.push(observer); + observer.observe(el); } - return Math.random(); - }; + observeAnchor(el) { + const anchorId = el.dataset.jos_anchor; + const anchorEl = byId(anchorId); + if (!anchorEl) { + if (this._config.debugMode) console.warn(`[JOS] Anchor "${anchorId}" not found`); + return; + } - // var box = target; - // console.log(box); - // const rootmargin = " 0% 0% -30% 0%"; - callbackScroller = (scl) => { - if (this.disable || this.scrollProgressDisable) return; + const rootMargin = this._computeRootMargin(el); + const observer = new IntersectionObserver( + (entries) => this._handleAnchorIntersection(entries, observer), + { + rootMargin, + threshold: parseFloat(el.dataset.jos_threshold || this._config.threshold), + } + ); + this._observers.push(observer); + observer.observe(anchorEl); + } - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; + disconnectAll() { + for (let i = 0; i < this._observers.length; i++) { + this._observers[i].disconnect(); + } + this._observers.length = 0; + } - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin; - const rootMarginValues = rootMargin.split(" ").map(parseFloat); - const topMargin = (wh * rootMarginValues[0]) / 100; - const bottomMargin = (wh * rootMarginValues[2]) / 100; + /** + * Compute rootMargin from element data attrs, falling back to global config. + * Supports per-element data-jos_rootmargin="..." (#47) and + * individual data-jos_rootmargin_top/right/bottom/left. + * Supports px, %, vw, vh, rem units (#27). + */ + _computeRootMargin(el) { + // Per-element shorthand takes priority (#47) + const perElem = el.dataset.jos_rootmargin; + const base = perElem || this._config.rootMargin; + const parts = base.trim().split(/\s+/); + + const top = el.dataset.jos_rootmargin_top || parts[0] || "0%"; + const right = el.dataset.jos_rootmargin_right || parts[1] || "0%"; + const bottom = el.dataset.jos_rootmargin_bottom || parts[2] || "0%"; + const left = el.dataset.jos_rootmargin_left || parts[3] || "0%"; + + // Invert sign: JOS positive=inward, IO negative=inward + return [top, right, bottom, left].map(this._invertValue).join(" "); + } - box.jos = { - rootMargin, - rootMarginValues, - topMargin, - bottomMargin, - }; - const elementRect = box.getBoundingClientRect(); - const elementTop = elementRect.top - box.jos.topMargin; - const elementBottom = elementRect.bottom - box.jos.bottomMargin; + /** + * Invert a single margin value (supports any CSS unit). + */ + _invertValue(v) { + if (v.startsWith("-")) return v.slice(1); + if (v === "0" || v === "0%" || v === "0px") return v; + return `-${v}`; + } + + /** + * Detect scroll direction: up, down, left, right (#33). + */ + _getScrollDirection(entry) { + const curY = window.scrollY || window.pageYOffset || 0; + const curX = window.scrollX || window.pageXOffset || 0; + const dy = curY - this._lastScrollY; + const dx = curX - this._lastScrollX; + this._lastScrollY = curY; + this._lastScrollX = curX; + + // Dominant axis + if (Math.abs(dy) >= Math.abs(dx)) { + return dy >= 0 ? "down" : "up"; + } + return dx >= 0 ? "right" : "left"; + } - const windowScrollProgress = elementRect.top / wh; + /** + * Cooldown = max(50ms, transition duration) so the animation finishes + * before state can flip. Prevents the IO feedback loop where an + * animation that changes element geometry triggers an immediate + * reverse callback. + */ + _getCooldownMs(el) { + var dur = parseFloat(el.dataset.jos_duration || this._config.duration) || 0.4; + return Math.max(this._minCooldownMs, dur * 1000); + } - const rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); + _shouldRespond(el, scrollDir) { + const filter = el.dataset.jos_scrolldirection; + if (!filter || filter === "none") return true; + return filter === scrollDir; + } - let scrollProgress = 0; + _handleIntersection(entries, observer) { + if (this._config.disable) return; + const entry = entries[0]; + const el = entry.target; + const animation = el.dataset.jos_animation; + const inverse = el.dataset.jos_animationinverse; + const dir = this._getScrollDirection(entry); - if (rootScrollProgress <= 0) { - scrollProgress = 0; - } else if (rootScrollProgress >= 100) { - scrollProgress = 1; + if (entry.isIntersecting) { + this._onEnter(el, animation, inverse, observer); } else { - scrollProgress = rootScrollProgress; + this._onLeave(el, animation, inverse, dir); } + } - box.jos = { - elementRect, - elementTop, - elementBottom, - windowScrollProgress, - rootScrollProgress, - scrollProgress, - }; + _handleAnchorIntersection(entries, observer) { + if (this._config.disable) return; + const entry = entries[0]; + const anchor = entry.target; + const elements = queryAll(`[data-jos_anchor='#${anchor.id}']`); + const dir = this._getScrollDirection(entry); - window[box.dataset.jos_scroll](box); - }; + for (let i = 0; i < elements.length; i++) { + const el = elements[i]; + const animation = el.dataset.jos_animation; + const inverse = el.dataset.jos_animationinverse; - document.onscroll = (e) => { - if (this.disable || this.scrollProgressDisable) return; - scl.forEach(updateBox); - }; - }; + if (entry.isIntersecting) { + this._onAnchorEnter(el, animation, inverse, observer, anchor); + } else { + this._onAnchorLeave(el, animation, inverse, dir); + } + } + } - // window["jos_scroll_" + box.id](obj); - callbackRouter = (entries, observer, type = 1) => { - if (this.disable) return; + _onEnter(el, animation, inverse, observer) { + if (el._josState === "in" || el._josCooldown) return; + el._josState = "in"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; + if (el.dataset.jos_scroll && el.dataset.jos_scroll !== "false") { + this._scrollTracker.track(el); + } - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } + this._incrementCounter(el); - if (entry.isIntersecting) { - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter.push(target); - this.callbackScroller(this.scrollEnter); + if (el.dataset.jos_mirror === "false") { + removeClass(el, "jos-no-mirror"); } - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; + // Remove hidden/off-screen state + if (animation) { + removeClass(el, `jos-${animation}`); + } + // Clean up inverse from a previous leave cycle + if (inverse) { + removeClass(el, `jos-${inverse}`); } - if (target.dataset.jos_mirror == "false") { - target.classList.remove("jos-no-mirror"); + + this._invokeCallback(el, "jos_invoke"); + if (animation) this._handleOnce(el, observer); + } + + _onLeave(el, animation, inverse, scrollDir) { + if (el._josState === "out" || el._josCooldown) return; + + // Check direction filter BEFORE committing state change + if (!this._shouldRespond(el, scrollDir)) return; + + var prevState = el._josState; // undefined on first IO, "in" after real enter + el._josState = "out"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + toggleClass(el, "jos-no-mirror", el.dataset.jos_mirror === "false"); + + // Only use inverse after element has been entered at least once. + // On initial IO false callback (_josState was undefined), use the + // base animation so "static" elements stay visible until first enter. + var useInverse = inverse && prevState === "in"; + + if (useInverse) { + addClass(el, `jos-${inverse}`); + } else if (animation) { + addClass(el, `jos-${animation}`); } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); + + this._invokeCallback(el, "jos_invoke_out"); + + // Don't untrack anchor-to-anchor elements — they track between anchors, not viewport + if (el.dataset.jos_scroll && el.dataset.jos_scroll !== "false") { + if (!el.dataset.jos_scroll_start && !el.dataset.jos_scroll_end) { + this._scrollTracker.untrack(el); } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); + } + } + + _onAnchorEnter(el, animation, inverse, observer, anchor) { + if (el._josState === "in" || el._josCooldown) return; + el._josState = "in"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + this._incrementCounter(el); + + if (animation) { + removeClass(el, `jos-${animation}`); + } + // Clean up inverse from previous leave + if (inverse) { + removeClass(el, `jos-${inverse}`); + } + + this._invokeCallback(el, "jos_invoke"); + + if (animation) { + const once = el.dataset.jos_once; + if (once && (once === "true" || parseInt(el.dataset.jos_counter) >= parseInt(once))) { + const siblings = queryAll(`[data-jos_anchor='#${anchor.id}']`); + if (siblings.length < 2) { + observer.unobserve(anchor); + } else { + el.removeAttribute("data-jos_anchor"); } } } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.toggle( - "jos-no-mirror", - target.dataset.jos_mirror == "false" - ); - - target.classList.add("jos-" + target_jos_animation); - - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } + } + + _onAnchorLeave(el, animation, inverse, scrollDir) { + if (el._josState === "out" || el._josCooldown) return; + if (!this._shouldRespond(el, scrollDir)) return; + + var prevState = el._josState; + el._josState = "out"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + var useInverse = inverse && prevState === "in"; + + if (useInverse) { + addClass(el, `jos-${inverse}`); + } else if (animation) { + addClass(el, `jos-${animation}`); } - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - ); - this.callbackScroller(this.scrollEnter); - } - } - }; - - animationInit() { - let doit = []; - - let recursive_check = (box) => { - let object_default_once = box.dataset.jos_once || this.default_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = - box.dataset.jos_animationinverse || this.default_animationinverse; - let object_default_timingFunction = - box.dataset.jos_timingFunction || this.default_timingFunction; - let object_default_duration = - box.dataset.jos_duration || this.default_duration; - let object_default_delay = box.dataset.jos_delay || this.default_delay; - let object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - - if (box.dataset.jos_stagger) { - const defaultDelay = this.default_delay; - const defaultDuration = this.default_duration; - const defaultOnce = this.once; - const defaultMirror = this.mirror; - const defaultScrolldirection = this.scrolldirection; - const defaultRootMargin = this.rootMargin; - const defaultAnimationinverse = this.animationinverse; - if (!box.id) { - box.id = Math.random().toString(36).substring(7); + + this._invokeCallback(el, "jos_invoke_out"); + } + + _incrementCounter(el) { + el.dataset.jos_counter = (parseInt(el.dataset.jos_counter || 0) + 1).toString(); + } + + _handleOnce(el, observer) { + const once = el.dataset.jos_once; + if (!once || once === "false") return; + if (once === "true" || parseInt(el.dataset.jos_counter) >= parseInt(once)) { + observer.unobserve(el); + } + } + + _invokeCallback(el, attr) { + const fnName = el.dataset[attr]; + if (!fnName) return; + const fn = typeof window !== "undefined" && window[fnName]; + if (typeof fn === "function") { + try { fn(el); } catch (e) { + if (this._config.debugMode) console.warn(`[JOS] Callback "${fnName}" error:`, e); } + } + } + } + + /** + * ScrollTracker - Scroll progress tracking with CSS custom properties (#26). + * Uses requestAnimationFrame for jank-free updates. + * + * Progress is 0% when element top hits the BOTTOM trigger line, + * and 100% when element top hits the TOP trigger line. + * + * Modes: + * - Element-to-viewport: uses rootMargin trigger zone + * - Anchor-to-anchor: data-jos_scroll_start="#a" data-jos_scroll_end="#b" + * - Horizontal: data-jos_scroll_axis="x" + */ + class ScrollTracker { + constructor() { + this._elements = new Set(); + this._ticking = false; + this._onScroll = this._onScroll.bind(this); + this._update = this._update.bind(this); + this._bound = false; + this._config = null; + } + + setConfig(config) { + this._config = config; + } + + track(el) { + this._elements.add(el); + if (!this._bound) { + document.addEventListener("scroll", this._onScroll, { passive: true }); + window.addEventListener("resize", this._onScroll, { passive: true }); + this._bound = true; + } + if (!this._ticking) { + this._ticking = true; + requestAnimationFrame(this._update); + } + } + + untrack(el) { + this._elements.delete(el); + if (this._bound && this._elements.size === 0) { + document.removeEventListener("scroll", this._onScroll); + window.removeEventListener("resize", this._onScroll); + this._bound = false; + } + } - Array.from(box.children).forEach((child, i) => { - if (!child.classList.contains("jos")) { - child.classList.add("jos"); - - if (!child.id) { - child.id = `${box.id}_${i}`; - } - - const stagger = box.dataset.jos_stagger; - const stagger_delay = box.dataset.jos_stagger_delay || defaultDelay; - const stagger_seq = box.dataset.jos_stagger_seq || 0; - const stagger_duration = - box.dataset.jos_stagger_duration || defaultDuration; - const stagger_once = box.dataset.jos_stagger_once || defaultOnce; - const staggerinverse = - box.dataset.jos_staggerinverse || defaultAnimationinverse; - const stagger_mirror = - box.dataset.jos_stagger_mirror || defaultMirror; - const stagger_visible = box.dataset.jos_stagger_startVisible; - const stagger_scrolldirection = - box.dataset.jos_stagger_scrolldirection || defaultScrolldirection; - const stagger_rootmargin = - box.dataset.jos_stagger_rootmargin || defaultRootMargin; - - if (box.dataset.jos_stagger_anchor || child.dataset.jos_anchor) { - const anchor = - box.dataset.jos_stagger_anchor === "true" - ? "#" + box.id - : box.dataset.jos_stagger_anchor; - child.setAttribute("data-jos_anchor", anchor); - } - - child.setAttribute("data-jos_animation", stagger); - - staggerinverse - ? child.setAttribute("data-jos_animationinverse", staggerinverse) - : null; - - child.setAttribute("data-jos_duration", stagger_duration); - - // let delg = parseFloat(stagger_seq, 2); - // delg = (delg * i).toFixed(1); - // delg = parseFloat(delg); - // console.log(delg); - // delg = delg + parseFloat(stagger_delay); - - // const delg = parseFloat((parseFloat(stagger_seq, 2) * i).toFixed(1)) + parseFloat(stagger_delay); - - const delg = parseFloat(stagger_seq * i + stagger_delay); - - child.setAttribute("data-jos_delay", delg); - - child.setAttribute("data-jos_once", stagger_once); - - if (stagger_mirror === "false") { - child.setAttribute("data-jos_mirror", "false"); - } - - if (stagger_visible) { - doit.push(child); - } - - if (stagger_scrolldirection) { - child.setAttribute( - "data-jos_scrolldirection", - stagger_scrolldirection - ); - } - - stagger_rootmargin - ? child.setAttribute("data-jos_rootmargin", stagger_rootmargin) - : null; - - if (box.dataset.jos_stagger_scroll) { - child.setAttribute( - "data-jos_scroll", - box.dataset.jos_stagger_scroll - ); - } - - if (box.dataset.jos_stagger_timingFunction) { - child.setAttribute( - "data-jos_timingFunction", - box.dataset.jos_stagger_timingFunction - ); - } - - if (box.dataset.jos_stagger_invoke) { - child.setAttribute( - "data-jos_invoke", - box.dataset.jos_stagger_invoke - ); - } - - if (box.dataset.jos_stagger_invoke_out) { - child.setAttribute( - "data-jos_invoke_out", - box.dataset.jos_stagger_invoke_out - ); - } - - this.boxes = [...this.boxes, child]; - recursive_check(child); + destroy() { + this._elements.clear(); + if (this._bound) { + document.removeEventListener("scroll", this._onScroll); + window.removeEventListener("resize", this._onScroll); + this._bound = false; + } + } + + _onScroll() { + if (!this._ticking) { + this._ticking = true; + requestAnimationFrame(this._update); + } + } + + _update() { + this._ticking = false; + var wh = window.innerHeight; + var ww = window.innerWidth; + var cfg = this._config; + // Global rootMargin as fallback (JOS convention: positive = inward) + var globalMargin = cfg ? cfg.rootMargin : "0% 0% 0% 0%"; + + for (var el of this._elements) { + var cbName = el.dataset.jos_scroll; + if (!cbName || cbName === "false") continue; + + var startId = el.dataset.jos_scroll_start; + var endId = el.dataset.jos_scroll_end; + var sp, wp; + + if (startId && endId) { + // ─── Anchor-to-anchor progress ─── + // 0% when viewport center is at start anchor, 100% at end anchor + var sEl = document.getElementById(startId.charAt(0) === "#" ? startId.slice(1) : startId); + var eEl = document.getElementById(endId.charAt(0) === "#" ? endId.slice(1) : endId); + if (sEl && eEl) { + var sR = sEl.getBoundingClientRect(); + var eR = eEl.getBoundingClientRect(); + var sY = sR.top + sR.height * 0.5; + var eY = eR.top + eR.height * 0.5; + var vc = wh * 0.5; + // eY > sY (end is below start in viewport coords because it's further down the page) + // As we scroll down, both decrease. Progress goes 0→1 as vc moves from sY to eY. + var denom = eY - sY; + sp = Math.abs(denom) > 0.5 ? (vc - sY) / denom : 0; + } else { + sp = 0; } - }); + sp = sp < 0 ? 0 : sp > 1 ? 1 : sp; + wp = sEl ? sEl.getBoundingClientRect().top / wh : 0; + } else if ((el.dataset.jos_scroll_axis || "y") === "x") { + // ─── Horizontal progress ─── + // Use left/right rootMargin trigger lines analogous to vertical top/bottom + var marginStrX = el.dataset.jos_rootmargin || globalMargin; + var mvx = marginStrX.trim().split(/\s+/); + var rightInset = this._parsePx(mvx[1] || "0%", ww); + var leftInset = this._parsePx(mvx[3] || mvx[1] || "0%", ww); + + // Trigger positions (px from left of viewport) + var leftTrigger = Math.abs(leftInset); + var rightTrigger = ww - Math.abs(rightInset); + + var rect = el.getBoundingClientRect(); + var zoneX = rightTrigger - leftTrigger; + + // 0% when rect.left = rightTrigger, 100% when rect.left = leftTrigger + sp = zoneX > 0 ? (rightTrigger - rect.left) / zoneX : 0; + sp = sp < 0 ? 0 : sp > 1 ? 1 : sp; + wp = rect.left / ww; + } else { + // ─── Vertical progress (default) ─── + // Use rootMargin trigger lines: 0% at bottom trigger, 100% at top trigger + var marginStr = el.dataset.jos_rootmargin || globalMargin; + var mv = marginStr.trim().split(/\s+/); + var topInset = this._parsePx(mv[0] || "0%", wh); + var bottomInset = this._parsePx(mv[2] || mv[0] || "0%", wh); + + // Trigger positions (px from top of viewport) + // rootMargin "10% 0% 30% 0%" → topTrigger at 10% from top, bottomTrigger at 30% from bottom + var topTrigger = Math.abs(topInset); + var bottomTrigger = wh - Math.abs(bottomInset); + + var rect2 = el.getBoundingClientRect(); + var zone = bottomTrigger - topTrigger; + + // 0% when rect.top = bottomTrigger, 100% when rect.top = topTrigger + sp = zone > 0 ? (bottomTrigger - rect2.top) / zone : 0; + sp = sp < 0 ? 0 : sp > 1 ? 1 : sp; + wp = rect2.top / wh; + } - if (!box.dataset.jos_animation) { - box.classList.remove("jos"); - return; + // Attach data for callback access + el.jos = { + scrollProgress: sp, + scrollProgressReverse: 1 - sp, + windowScrollProgress: wp, + rootScrollProgress: sp, + percent: Math.round(sp * 100), + }; + + // CSS custom properties (#26) + var st = el.style; + var s4 = sp.toFixed(4); + var sr4 = (1 - sp).toFixed(4); + st.setProperty("--jos_scroll", s4); + st.setProperty("--jos_scroll_reverse", sr4); + st.setProperty("--jos_scroll_perc", (sp * 100).toFixed(1) + "%"); + st.setProperty("--jos_scroll_deg", (sp * 360).toFixed(1) + "deg"); + st.setProperty("--jos_windowScroll", wp.toFixed(4)); + st.setProperty("--jos_windowScroll_reverse", (1 - wp).toFixed(4)); + st.setProperty("--jos_rootScroll", s4); + st.setProperty("--jos_rootScroll_reverse", sr4); + + if (typeof window !== "undefined" && typeof window[cbName] === "function") { + try { window[cbName](el); } catch (_) { /* silent */ } } } + } - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - - if (object_default_mirror == "false") { - box.setAttribute("data-jos_mirror", object_default_mirror); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - this.setRange.add(parseFloat(object_default_duration)); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - this.setRange.add(parseFloat(object_default_delay)); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => { - const isNegative = value.startsWith("-"); - return isNegative ? value.substring(1) : `-${value}`; - }) - .join(" "); - - // let rootMargin = " 10% 0% -30% 0%"; - - let box_observer = { - rootMargin, - threshold: box.dataset.jos_threshold || this.default_threshold, - passive: box.dataset.jos_passive || this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }; - - this.boxes.forEach((box) => { - recursive_check(box); - }); - - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); + _parsePx(val, viewportSize) { + if (!val) return 0; + var num = parseFloat(val); + if (isNaN(num)) return 0; + if (val.endsWith("px")) return num; + if (val.endsWith("vw")) return (num * window.innerWidth) / 100; + if (val.endsWith("vh")) return (num * window.innerHeight) / 100; + if (val.endsWith("rem")) { + var fs = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16; + return num * fs; + } + return (num * viewportSize) / 100; + } } - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); + /** + * StyleManager - Dynamic stylesheet injection for JOS. + */ + class StyleManager { + constructor() { + this._el = null; + this._sheet = null; + } + + create(config, durations, delays) { + // Remove previous stylesheet on re-init + this.destroy(); + + const style = document.createElement("style"); + style.setAttribute("data-jos", ""); + document.head.appendChild(style); + this._el = style; + this._sheet = style.sheet; + + const s = this._sheet; + s.insertRule(".jos-no-mirror { transition: 0s forwards !important; }"); + + const t = `all ${config.duration}s ${config.timingFunction} ${config.delay}s`; + s.insertRule(`.jos { transition: ${t}; }`); + + for (const v of durations) { + s.insertRule(`[data-jos_duration="${v}"] { transition-duration: ${v}s !important; }`); + } + for (const v of delays) { + s.insertRule(`[data-jos_delay="${v}"] { transition-delay: ${v}s !important; }`); + } + } + + disable() { + if (this._sheet) this._sheet.disabled = true; + } + + destroy() { + if (this._el && this._el.parentNode) { + this._el.parentNode.removeChild(this._el); + } + this._el = null; + this._sheet = null; + } + } + + /** + * DebugOverlay - Draggable trigger lines for JOS debug mode. + * Shows top/right/bottom/left trigger lines that can be dragged to adjust rootMargin. + * Calls onChange(topPct, rightPct, bottomPct, leftPct) when any line is dragged. + */ + class DebugOverlay { + constructor() { + this._container = null; + this._active = false; + this._onResize = null; + this.onChange = null; + this._pcts = { top: 0, right: 0, bottom: 0, left: 0 }; + this._lines = {}; + } + + create(config) { + if (this._active) this.destroy(); + if (typeof document === "undefined") return; + + var self = this; + var wh = window.innerHeight; + var ww = window.innerWidth; + var parts = config.rootMargin.trim().split(/\s+/); + this._pcts.top = Math.abs(parseFloat(parts[0]) || 0); + this._pcts.right = Math.abs(parseFloat(parts[1] || parts[0]) || 0); + this._pcts.bottom = Math.abs(parseFloat(parts[2] || parts[0]) || 0); + this._pcts.left = Math.abs(parseFloat(parts[3] || parts[1] || parts[0]) || 0); + + var c = document.createElement("div"); + c.setAttribute("data-jos-debug", ""); + c.style.cssText = "position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:99999;" + + "opacity:0;transition:opacity 0.4s;"; + + // Auto-show: find sentinel [data-jos-debug-after], show overlay when it enters viewport + this._showObserver = null; + var sentinel = document.querySelector("[data-jos-debug-after]"); + if (sentinel) { + this._showObserver = new IntersectionObserver(function (entries) { + if (entries[0].isIntersecting) { + c.style.opacity = "0"; + } else { + c.style.opacity = "1"; + } + }, { threshold: 0 }); + this._showObserver.observe(sentinel); + } else { + // No sentinel — show immediately + c.style.opacity = "1"; + } + + // Top line (horizontal, from top) + var topPx = (this._pcts.top / 100) * wh; + this._lines.top = this._makeHLine(topPx, "top"); + c.appendChild(this._lines.top.line); + + // Bottom line (horizontal, from bottom) + var bottomPx = (this._pcts.bottom / 100) * wh; + this._lines.bottom = this._makeHLine(bottomPx, "bottom"); + c.appendChild(this._lines.bottom.line); + + // Right line (vertical, from right) — only if > 0 + var rightPx = (this._pcts.right / 100) * ww; + this._lines.right = this._makeVLine(rightPx, "right"); + c.appendChild(this._lines.right.line); + if (this._pcts.right <= 0) this._lines.right.line.style.display = "none"; + + // Left line (vertical, from left) — only if > 0 + var leftPx = (this._pcts.left / 100) * ww; + this._lines.left = this._makeVLine(leftPx, "left"); + c.appendChild(this._lines.left.line); + if (this._pcts.left <= 0) this._lines.left.line.style.display = "none"; + + document.body.appendChild(c); + this._container = c; + this._active = true; + + this._updateLabels(); + + // Show anchor markers (green start, orange end) + this._createAnchorMarkers(c); + + // ─── Drag handling ─── + var dragging = null; + var startPointer = 0; + var startPx2 = 0; + + function onPointerDown(e) { + var x = e.clientX; + var y = e.clientY; + var h = window.innerHeight; + var w = window.innerWidth; + var threshold = 14; + + var tY = (self._pcts.top / 100) * h; + var bY = h - (self._pcts.bottom / 100) * h; + // Clamp to at least 6px from edge so lines at 0% are still reachable + var rX = Math.min(w - 6, w - (self._pcts.right / 100) * w); + var lX = Math.max(6, (self._pcts.left / 100) * w); + + if (Math.abs(y - tY) < threshold) { + dragging = "top"; startPointer = y; startPx2 = tY; + } else if (Math.abs(y - bY) < threshold) { + dragging = "bottom"; startPointer = y; startPx2 = bY; + } else if (Math.abs(x - lX) < threshold) { + dragging = "left"; startPointer = x; startPx2 = (self._pcts.left / 100) * w; + } else if (Math.abs(x - rX) < threshold) { + dragging = "right"; startPointer = x; startPx2 = w - (self._pcts.right / 100) * w; } else { - box.classList.remove("jos-" + box.dataset.jos_animation); + return; } - }); + e.preventDefault(); + var isH = dragging === "top" || dragging === "bottom"; + document.body.style.cursor = isH ? "ns-resize" : "ew-resize"; + document.body.style.userSelect = "none"; + } + + function onPointerMove(e) { + if (!dragging) return; + var h = window.innerHeight; + var w = window.innerWidth; + + if (dragging === "top") { + var dy = e.clientY - startPointer; + var pct = Math.max(0, Math.min(50, ((startPx2 + dy) / h) * 100)); + self._pcts.top = pct; + self._lines.top.line.style.top = ((pct / 100) * h) + "px"; + } else if (dragging === "bottom") { + var dy2 = e.clientY - startPointer; + var fromBtm = h - (startPx2 + dy2); + var pct2 = Math.max(0, Math.min(50, (fromBtm / h) * 100)); + self._pcts.bottom = pct2; + self._lines.bottom.line.style.bottom = ((pct2 / 100) * h) + "px"; + } else if (dragging === "left") { + var dx = e.clientX - startPointer; + var pct3 = Math.max(0, Math.min(50, ((startPx2 + dx) / w) * 100)); + self._pcts.left = pct3; + self._lines.left.line.style.left = ((pct3 / 100) * w) + "px"; + self._lines.left.line.style.display = pct3 > 0 ? "" : "none"; + } else if (dragging === "right") { + var dx2 = e.clientX - startPointer; + var fromRt = w - (startPx2 + dx2); + var pct4 = Math.max(0, Math.min(50, (fromRt / w) * 100)); + self._pcts.right = pct4; + self._lines.right.line.style.right = ((pct4 / 100) * w) + "px"; + self._lines.right.line.style.display = pct4 > 0 ? "" : "none"; + } + self._updateLabels(); + } + + function onPointerUp() { + if (!dragging) return; + dragging = null; + document.body.style.cursor = ""; + document.body.style.userSelect = ""; + if (self.onChange) { + self.onChange(self._pcts.top, self._pcts.right, self._pcts.bottom, self._pcts.left); + } + } + + document.addEventListener("pointerdown", onPointerDown); + document.addEventListener("pointermove", onPointerMove); + document.addEventListener("pointerup", onPointerUp); + + this._cleanupDrag = function () { + document.removeEventListener("pointerdown", onPointerDown); + document.removeEventListener("pointermove", onPointerMove); + document.removeEventListener("pointerup", onPointerUp); + }; + + // ─── Resize + scroll → update positions ─── + this._onResize = function () { + if (!self._active) return; + var h = window.innerHeight; + var w = window.innerWidth; + self._lines.top.line.style.top = ((self._pcts.top / 100) * h) + "px"; + self._lines.bottom.line.style.bottom = ((self._pcts.bottom / 100) * h) + "px"; + self._lines.right.line.style.right = ((self._pcts.right / 100) * w) + "px"; + self._lines.left.line.style.left = ((self._pcts.left / 100) * w) + "px"; + self._updateAnchorPositions(); + }; + window.addEventListener("resize", this._onResize, { passive: true }); + document.addEventListener("scroll", this._onResize, { passive: true }); } - this.observers?.forEach((observer) => observer.disconnect()); - } - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror" + " { transition: 0s forwards !important;}" - ); - //opacity " + s + ", transform - let property = "all "; - let s = - property + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - - styleSheet.insertRule(".jos {" + ("transition: " + s) + ";}"); - - for (const value of this.setRange) { - styleSheet.insertRule( - `[data-jos_duration="${value}"] { - transition-duration: ${value}s !important; - }` - ); - styleSheet.insertRule( - `[data-jos_delay="${value}"] { - transition-delay: ${value}s !important; - }` - ); + /** Horizontal line (top or bottom) — spans full width, with glowing grab handle below label */ + _makeHLine(posPx, side) { + var isTop = side === "top"; + var line = document.createElement("div"); + line.style.cssText = + "position:absolute;left:0;right:0;height:2px;" + + "background:rgba(99,102,241,0.25);" + + "border-" + (isTop ? "bottom" : "top") + ":1px dashed rgba(99,102,241,0.5);" + + "cursor:ns-resize;pointer-events:auto;padding:5px 0;margin:-5px 0;" + + "background-clip:content-box;" + + (isTop ? "top:" + posPx + "px;" : "bottom:" + posPx + "px;"); + + // Label + handle wrapper (stacked vertically, right side) + var wrapper = document.createElement("div"); + wrapper.style.cssText = + "position:absolute;right:12px;pointer-events:none;" + + "display:flex;flex-direction:column;align-items:center;gap:3px;" + + (isTop ? "top:6px;" : "bottom:6px;"); + + var label = document.createElement("div"); + label.style.cssText = + "font:11px/1.3 monospace;color:rgba(99,102,241,0.85);background:rgba(9,9,11,0.9);" + + "padding:2px 6px;border-radius:3px;white-space:nowrap;"; + + // Glowing grab bar (below label) + var handle = document.createElement("div"); + handle.style.cssText = + "width:36px;height:8px;border-radius:4px;" + + "background:rgba(99,102,241,0.6);" + + "box-shadow:0 0 8px rgba(99,102,241,0.7),0 0 16px rgba(99,102,241,0.3);"; + + wrapper.appendChild(label); + wrapper.appendChild(handle); + line.appendChild(wrapper); + + return { line: line, label: label, handle: handle }; } - this.jos_stylesheet = styleSheet; - } + /** Vertical line (left or right) — spans full height, with glowing grab handle below label */ + _makeVLine(posPx, side) { + var isLeft = side === "left"; + var line = document.createElement("div"); + line.style.cssText = + "position:absolute;top:0;bottom:0;width:2px;" + + "background:rgba(99,102,241,0.25);" + + "border-" + (isLeft ? "right" : "left") + ":1px dashed rgba(99,102,241,0.5);" + + "cursor:ew-resize;pointer-events:auto;padding:0 5px;margin:0 -5px;" + + "background-clip:content-box;" + + (isLeft ? "left:" + posPx + "px;" : "right:" + posPx + "px;"); + + // Label + handle wrapper (stacked vertically, bottom area) + var wrapper = document.createElement("div"); + wrapper.style.cssText = + "position:absolute;bottom:24px;pointer-events:none;" + + "display:flex;flex-direction:column;align-items:center;gap:3px;" + + (isLeft ? "left:6px;" : "right:6px;"); + + var label = document.createElement("div"); + label.style.cssText = + "font:11px/1.3 monospace;color:rgba(99,102,241,0.85);background:rgba(9,9,11,0.9);" + + "padding:2px 6px;border-radius:3px;white-space:nowrap;"; + + // Glowing grab bar (below label) + var handle = document.createElement("div"); + handle.style.cssText = + "width:8px;height:36px;border-radius:4px;" + + "background:rgba(99,102,241,0.6);" + + "box-shadow:0 0 8px rgba(99,102,241,0.7),0 0 16px rgba(99,102,241,0.3);"; + + wrapper.appendChild(label); + wrapper.appendChild(handle); + line.appendChild(wrapper); + + return { line: line, label: label, handle: handle }; + } - getBoxes() { - this.boxes = undefined; + /** Show anchor markers for elements with data-jos_scroll_start / data-jos_scroll_end */ + _createAnchorMarkers(container) { + this._anchorEls = []; + var anchors = document.querySelectorAll("[data-jos_scroll_start][data-jos_scroll_end]"); + for (var i = 0; i < anchors.length; i++) { + var el = anchors[i]; + var sId = el.dataset.jos_scroll_start; + var eId = el.dataset.jos_scroll_end; + var sEl = document.getElementById(sId.charAt(0) === "#" ? sId.slice(1) : sId); + var eEl = document.getElementById(eId.charAt(0) === "#" ? eId.slice(1) : eId); + if (!sEl || !eEl) continue; + + // ─── Fixed vertical progress indicator (left edge) ─── + var panel = document.createElement("div"); + panel.style.cssText = + "position:fixed;left:10px;top:50%;transform:translateY(-50%);" + + "width:32px;pointer-events:none;z-index:99999;" + + "display:flex;flex-direction:column;align-items:center;gap:0;" + + "opacity:0;transition:opacity 0.3s;"; + + // Start label + var sLabel = document.createElement("div"); + sLabel.style.cssText = + "font:9px/1.2 monospace;color:rgba(52,211,153,0.9);" + + "background:rgba(9,9,11,0.9);padding:2px 4px;border-radius:3px 3px 0 0;" + + "text-align:center;width:100%;white-space:nowrap;"; + sLabel.textContent = "0%"; + + // Track background + var track = document.createElement("div"); + track.style.cssText = + "width:6px;height:120px;background:rgba(255,255,255,0.08);" + + "border-radius:3px;position:relative;overflow:hidden;"; + + // Fill bar + var fill = document.createElement("div"); + fill.style.cssText = + "position:absolute;bottom:0;left:0;right:0;height:0%;" + + "background:linear-gradient(to top,rgba(52,211,153,0.8),rgba(99,102,241,0.8));" + + "border-radius:3px;transition:height 0.05s linear;" + + "box-shadow:0 0 6px rgba(52,211,153,0.5);"; + track.appendChild(fill); + + // End label + var eLabel = document.createElement("div"); + eLabel.style.cssText = + "font:9px/1.2 monospace;color:rgba(251,146,60,0.9);" + + "background:rgba(9,9,11,0.9);padding:2px 4px;border-radius:0 0 3px 3px;" + + "text-align:center;width:100%;white-space:nowrap;"; + eLabel.textContent = "100%"; + + // Percent badge (center) + var badge = document.createElement("div"); + badge.style.cssText = + "font:bold 11px/1.2 monospace;color:#fff;" + + "background:rgba(9,9,11,0.9);border:1px solid rgba(99,102,241,0.4);" + + "padding:2px 5px;border-radius:3px;margin-top:4px;" + + "text-align:center;white-space:nowrap;" + + "box-shadow:0 0 8px rgba(99,102,241,0.3);"; + badge.textContent = "0%"; + + panel.appendChild(sLabel); + panel.appendChild(track); + panel.appendChild(eLabel); + panel.appendChild(badge); + container.appendChild(panel); + + this._anchorEls.push({ + sEl: sEl, eEl: eEl, + sId: sId, eId: eId, + trackedEl: el, + panel: panel, + fill: fill, + badge: badge, + sLabel: sLabel, + eLabel: eLabel, + }); + } + this._updateAnchorPositions(); + } - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); + _updateAnchorPositions() { + if (!this._anchorEls) return; + var wh = window.innerHeight; + var vc = wh * 0.5; + + for (var i = 0; i < this._anchorEls.length; i++) { + var a = this._anchorEls[i]; + var sR = a.sEl.getBoundingClientRect(); + var eR = a.eEl.getBoundingClientRect(); + var sY = sR.top + sR.height * 0.5; + var eY = eR.top + eR.height * 0.5; + + // Progress: 0 at start, 1 at end + var denom = eY - sY; + var progress = Math.abs(denom) > 0.5 ? (vc - sY) / denom : 0; + var inRange = progress > 0 && progress < 1; + var pct = Math.round(Math.max(0, Math.min(1, progress)) * 100); + + // Show / hide debug panel only (don't touch the page element) + a.panel.style.opacity = inRange ? "1" : "0"; + + // Update fill + badge + a.fill.style.height = pct + "%"; + a.badge.textContent = pct + "%"; + a.sLabel.textContent = a.sId.replace(/^#/, ""); + a.eLabel.textContent = a.eId.replace(/^#/, ""); + } + } + + _updateLabels() { + var p = this._pcts; + if (this._lines.top) this._lines.top.label.textContent = "top: " + Math.round(p.top) + "%"; + if (this._lines.bottom) this._lines.bottom.label.textContent = "bottom: " + Math.round(p.bottom) + "%"; + if (this._lines.right) this._lines.right.label.textContent = "right: " + Math.round(p.right) + "%"; + if (this._lines.left) this._lines.left.label.textContent = "left: " + Math.round(p.left) + "%"; } - return this.boxes; - } - getDefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrolldirection, - intersectionRatio, - duration, - mirror, - delay, - debugMode, - disable, - scrollProgressDisable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = - animationinverse || this.default_animationinverse; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrolldirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - if (disable != undefined) { - this.disable = disable; - } - this.scrollProgressDisable = - scrollProgressDisable || this.scrollProgressDisable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - this.default_mirror = mirror || this.default_mirror; + destroy() { + if (this._container && this._container.parentNode) { + this._container.parentNode.removeChild(this._container); + } + if (this._onResize) { + window.removeEventListener("resize", this._onResize); + document.removeEventListener("scroll", this._onResize); + } + if (this._cleanupDrag) this._cleanupDrag(); + if (this._showObserver) { this._showObserver.disconnect(); this._showObserver = null; } + this._container = null; + this._active = false; + this._lines = {}; + this._anchorEls = null; + } } - init(options = this.options) { - this.options = options; - this.getDefault(options); + /** + * JOS - JavaScript On Scroll Animation Library + * + * @version 1.0.0-beta.1 + * @author Jesvi Jonathan + * @license MIT + * @see https://jos-animation.vercel.app + */ + + + class JOS { + static version = "1.0.0-beta.1"; + static author = "Jesvi Jonathan"; + static webpage = "https://jos-animation.vercel.app"; + static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; + + constructor() { + this._config = { ...DEFAULTS }; + this._elements = []; + this._scrollTracker = new ScrollTracker(); + this._observerManager = null; + this._elementManager = null; + this._styleManager = new StyleManager(); + this._debugOverlay = new DebugOverlay(); + this._initialized = false; + } + + /** + * Initialize JOS with user options. + * On re-init, fully resets config to DEFAULTS first (#29), + * then tears down previous state before rebuilding. + */ + init(options = {}) { + // On re-init: tear down old state completely + if (this._initialized) { + this._teardownObservers(); + this._scrollTracker.destroy(); + this._styleManager.destroy(); + this._debugOverlay.destroy(); + this._elements = []; + } + + // Always reset to DEFAULTS, then overlay user options (#29) + this._config = { ...DEFAULTS }; + this._applyOptions(options); + + if (this._config.disable) return; + + this._collectElements(); + + if (this._config.debugMode) { + this._printDebugInfo(); + } + + this._setup(); + this._styleManager.create( + this._config, + this._elementManager.durationSet, + this._elementManager.delaySet + ); - if (this.disable) return; + if (this._config.debugMode) { + this._debugOverlay.create(this._config); + this._debugOverlay.onChange = (topPct, rightPct, bottomPct, leftPct) => { + var newMargin = Math.round(topPct) + "% " + Math.round(rightPct) + "% " + Math.round(bottomPct) + "% " + Math.round(leftPct) + "%"; + this.init({ + ...this._config, + rootMargin: newMargin, + }); + }; + } - this.getBoxes(); - if (this.debugMode) { - this.debugger(); + this._initialized = true; } - this.start(); + /** + * Start or restart animations. + * @param {number} state - 0: full restart, -1: resume. + */ + start(state = 0) { + if (state !== -1) { + this.stop(); + this._setup(); + } + this._config.disable = false; + return "Started"; + } - this.getStylesheet(); - } + /** + * Stop animations. + * @param {number} state - 0: stop and show, 1: stop and hide, -1: pause. + */ + stop(state = 0) { + const internalState = state === 0 ? 1 : state === 1 ? 0 : state; + this._config.disable = true; - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); + if (internalState !== -1) { + this._teardownElements(internalState); + } + return "Stopped"; } - this.disable = false; - return "Started"; - } - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; + /** + * Refresh: re-scan DOM for new .jos elements. + */ + refresh() { + this._teardownObservers(); + this._collectElements(); + this._setup(); + return "Refreshed"; } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); + + /** + * Destroy the JOS instance completely. + * @param {number} state - 0: preserve styles, 1: remove styles. + */ + destroy(state = 0) { + this._teardownObservers(); + this._scrollTracker.destroy(); + this._debugOverlay.destroy(); + this._elements = []; + + if (state === 1) { + this._styleManager.destroy(); + } + + this._initialized = false; + return "Destroyed"; + } + + /** + * Print version information. + */ + version() { + console.log( + `JOS v${JOS.version} | ${JOS.webpage}` + ); } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; + // ─── Private ─────────────────────────────────────────────────── + + _applyOptions(options) { + const cfg = this._config; + + cfg.once = options.once ?? cfg.once; + cfg.animation = options.animation ?? cfg.animation; + cfg.animationInverse = + options.animationInverse ?? options.animationinverse ?? cfg.animationInverse; + cfg.timingFunction = options.timingFunction ?? cfg.timingFunction; + cfg.threshold = options.threshold ?? cfg.threshold; + cfg.duration = options.duration ?? cfg.duration; + cfg.delay = options.delay ?? cfg.delay; + cfg.startVisible = options.startVisible ?? cfg.startVisible; + cfg.scrollDirection = + options.scrollDirection ?? options.scrolldirection ?? cfg.scrollDirection; + cfg.mirror = options.mirror ?? cfg.mirror; + cfg.passive = options.passive ?? cfg.passive; + cfg.debugMode = options.debugMode ?? cfg.debugMode; + cfg.scrollProgressDisable = + options.scrollProgressDisable ?? cfg.scrollProgressDisable; + + if (options.disable !== undefined) { + cfg.disable = options.disable; + } + + if (options.rootMargin) { + cfg.rootMargin = options.rootMargin; + } else if (options.rootMarginTop || options.rootMarginBottom) { + const top = options.rootMarginTop || "-10%"; + const bottom = options.rootMarginBottom || "-40%"; + cfg.rootMargin = `${top} 0% ${bottom} 0%`; + } + } + + _collectElements() { + this._elements = queryAll(".jos"); + } + + _setup() { + this._elementManager = new ElementManager(this._config); + this._scrollTracker.setConfig(this._config); + this._observerManager = new ObserverManager( + this._config, + this._scrollTracker + ); + + const allElements = [...this._elements]; + + for (const el of this._elements) { + const extras = this._elementManager.initElement(el); + allElements.push(...extras); + for (const child of extras) { + this._elementManager.initElement(child); + } + } + + this._elements = allElements; + + // Force reflow so the browser paints the hidden state before IO fires. + // Without this, elements already in-viewport never transition because + // the "from" state was never rendered. + void document.body.offsetHeight; + + for (const el of allElements) { + if (!el.classList.contains("jos")) continue; + if (el.dataset.jos_anchor) { + this._observerManager.observeAnchor(el); + } else { + this._observerManager.observe(el); + } + } + + this._elementManager.processStartVisible(); + + // Immediately start tracking anchor-to-anchor elements (persistent, not viewport-gated) + for (const el of allElements) { + if (el.dataset.jos_scroll && el.dataset.jos_scroll !== "false" && + el.dataset.jos_scroll_start && el.dataset.jos_scroll_end) { + this._scrollTracker.track(el); + } + } + } + + _teardownObservers() { + if (this._observerManager) { + this._observerManager.disconnectAll(); + } } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; + + _teardownElements(state) { + if (state !== -1 && this._elementManager) { + this._elementManager.unsetElements(this._elements, state); } + this._teardownObservers(); + } + + _printDebugInfo() { + this.version(); + console.log("[JOS] Config:", { ...this._config }); + console.log(`[JOS] ${this._elements.length} elements`); } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; } -} -const JOS = new jos(); - -if (typeof module !== "undefined" && typeof module.exports !== "undefined") { - module.exports = JOS; -} else { - if (typeof define === "function" && define.amd) { - define([], function () { - return JOS; - }); - } else { - window.JOS = JOS; + + /** + * JOS - JavaScript On Scroll Animation Library + * + * Entry point. Creates and exports the singleton JOS instance. + */ + + const instance = new JOS(); + + // UMD-style export + if (typeof module !== "undefined" && typeof module.exports !== "undefined") { + module.exports = instance; + } else if (typeof define === "function" && define.amd) { + define([], () => instance); + } else if (typeof window !== "undefined") { + window.JOS = instance; } -} -//export default JOS; + + return instance; + +})); +//# sourceMappingURL=jos.debug.js.map diff --git a/dist/jos.js b/dist/jos.js index 2aa6956..3d89a89 100644 --- a/dist/jos.js +++ b/dist/jos.js @@ -1 +1,1445 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var a=s.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===a&&o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}}");class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.2";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Webpage: ${jos.webpage}\n - Github: ${jos.github}\n`)}debugger(t=0){if(0===t&&this.debugMode){this.version();const t={};for(const s of Object.keys(this))"function"!=typeof this[s]&&(t[s]=this[s]);console.log("JOS Values:\n",t),console.log("JOS Initialized:\n\n")}}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let a=t[0],o=a.target;document.querySelectorAll("[data-jos_anchor='#"+o.id+"']").forEach((t=>{let o=t.dataset.jos_animation,e=t.dataset.jos_animationinverse;if(a.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}o&&(t.classList.remove("jos-"+o),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=e&&t.classList.add("jos-"+e))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+o),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};rand=t=>Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:"number"==typeof t?t%1!=0?Math.random()*t:Math.floor(Math.random()*t):Math.random();callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;const s=this.default_rootMargin;let a=window.innerHeight;const o=t=>{const o=t.dataset.jos_rootmargin||s,e=o.split(" ").map(parseFloat),i=a*e[0]/100,r=a*e[2]/100;t.jos={rootMargin:o,rootMarginValues:e,topMargin:i,bottomMargin:r};const n=t.getBoundingClientRect(),l=n.top-t.jos.topMargin,d=n.bottom-t.jos.bottomMargin,c=n.top/a,f=l/(a-t.jos.topMargin-t.jos.bottomMargin);let p=0;p=f<=0?0:f>=100?1:f,t.jos={elementRect:n,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:f,scrollProgress:p},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(o)}};callbackRouter=(t,s,a=1)=>{if(this.disable)return;let o=t[0],e=o.target,i=e.dataset.jos_animation,r=e.dataset.jos_animationinverse,n=1;if(n=o.boundingClientRect.top<0?0:1,o.isIntersecting){if("false"!=e.dataset.jos_scroll&&null!=e.dataset.jos_scroll&&(this.scrollEnter.push(e),this.callbackScroller(this.scrollEnter)),null!=e.dataset.jos_counter){let t=parseInt(e.dataset.jos_counter);t++,e.dataset.jos_counter=t}"false"==e.dataset.jos_mirror&&e.classList.remove("jos-no-mirror"),i&&(e.classList.remove("jos-"+i),null!=e.dataset.jos_invoke&&window[e.dataset.jos_invoke](e),null==e.dataset.jos_once&&"false"==e.dataset.jos_once||("true"==e.dataset.jos_once||e.dataset.jos_counter>=e.dataset.jos_once)&&s.unobserve(e)),null!=r&&e.classList.add("jos-"+r)}else(void 0===e.dataset.jos_scrolldirection||1===n&&"down"===e.dataset.jos_scrolldirection||0===n&&"up"===e.dataset.jos_scrolldirection||"none"===e.dataset.jos_scrolldirection)&&(e.classList.toggle("jos-no-mirror","false"==e.dataset.jos_mirror),e.classList.add("jos-"+i),null!=r&&e.classList.remove("jos-"+r),void 0!==e.dataset.jos_invoke_out&&window[e.dataset.jos_invoke_out](e)),"false"!=e.dataset.jos_scroll&&null!=e.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==e.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=a=>{let o=a.dataset.jos_once||this.default_once,e=a.dataset.jos_animation||this.default_animation,i=a.dataset.jos_animationinverse||this.default_animationinverse,r=a.dataset.jos_timingFunction||this.default_timingFunction,n=a.dataset.jos_duration||this.default_duration,l=a.dataset.jos_delay||this.default_delay,d=a.dataset.jos_mirror||this.default_mirror;if(a.classList.contains("jos_disabled")&&(a.classList.remove("jos_disabled"),a.classList.add("jos")),o&&("true"==o||/^\d+$/.test(o))?a.setAttribute("data-jos_once",o):a.setAttribute("data-jos_once",this.default_once?"1":"false"),a.dataset.jos_stagger){const o=this.default_delay,e=this.default_duration,i=this.once,r=this.mirror,n=this.scrolldirection,l=this.rootMargin,d=this.animationinverse;if(a.id||(a.id=Math.random().toString(36).substring(7)),Array.from(a.children).forEach(((c,f)=>{if(!c.classList.contains("jos")){c.classList.add("jos"),c.id||(c.id=`${a.id}_${f}`);const p=a.dataset.jos_stagger,m=a.dataset.jos_stagger_delay||o,j=a.dataset.jos_stagger_seq||0,u=a.dataset.jos_stagger_duration||e,h=a.dataset.jos_stagger_once||i,_=a.dataset.jos_staggerinverse||d,g=a.dataset.jos_stagger_mirror||r,y=a.dataset.jos_stagger_startVisible,b=a.dataset.jos_stagger_scrolldirection||n,v=a.dataset.jos_stagger_rootmargin||l;if(a.dataset.jos_stagger_anchor||c.dataset.jos_anchor){const t="true"===a.dataset.jos_stagger_anchor?"#"+a.id:a.dataset.jos_stagger_anchor;c.setAttribute("data-jos_anchor",t)}c.setAttribute("data-jos_animation",p),_&&c.setAttribute("data-jos_animationinverse",_),c.setAttribute("data-jos_duration",u);const x=parseFloat(j*f+m);c.setAttribute("data-jos_delay",x),c.setAttribute("data-jos_once",h),"false"===g&&c.setAttribute("data-jos_mirror","false"),y&&t.push(c),b&&c.setAttribute("data-jos_scrolldirection",b),v&&c.setAttribute("data-jos_rootmargin",v),a.dataset.jos_stagger_scroll&&c.setAttribute("data-jos_scroll",a.dataset.jos_stagger_scroll),a.dataset.jos_stagger_timingFunction&&c.setAttribute("data-jos_timingFunction",a.dataset.jos_stagger_timingFunction),a.dataset.jos_stagger_invoke&&c.setAttribute("data-jos_invoke",a.dataset.jos_stagger_invoke),a.dataset.jos_stagger_invoke_out&&c.setAttribute("data-jos_invoke_out",a.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,c],s(c)}})),!a.dataset.jos_animation)return void a.classList.remove("jos")}a.setAttribute("data-jos_animation",e),i&&a.setAttribute("data-jos_animationinverse",i),r&&a.setAttribute("data-jos_timingFunction",r),"false"==d&&a.setAttribute("data-jos_mirror",d),n&&(a.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),l&&(a.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),a.setAttribute("data-jos_counter","0"),a.classList.add("jos-"+e),(a.dataset.jos_startvisible||this.default_startVisible)&&t.push(a),this.default_scrolldirection&&a.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c={rootMargin:[a.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],a.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],a.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],a.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:a.dataset.jos_threshold||this.default_threshold,passive:a.dataset.jos_passive||this.default_passive};if(a.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,c);this.observers.push(t),t.observe(document.getElementById(a.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,c);this.observers.push(t),t.observe(a)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let a="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+a+";}");for(const t of this.setRange)s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:a,animationinverse:o,timingFunction:e,threshold:i,startVisible:r,scrolldirection:n,intersectionRatio:l,duration:d,mirror:c,delay:f,debugMode:p,disable:m,scrollProgressDisable:j,rootMargin:u,rootMarginTop:h,rootMarginBottom:_}=t;this.default_once=s||this.default_once,this.default_animation=a||this.default_animation,this.default_animationinverse=o||this.default_animationinverse,this.default_timingFunction=e||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=f||this.default_delay,this.debugMode=p||this.debugMode,null!=m&&(this.disable=m),this.scrollProgressDisable=j||this.scrollProgressDisable,this.default_rootMargin=u||`${h||"-10%"} 0% ${_||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS})); +/*! + * JOS Animation Library v1.0.0-beta.1 + * https://jos-animation.vercel.app + * (c) 2026 Jesvi Jonathan + * Released under the MIT License + */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.JOS = factory()); +})(this, (function () { 'use strict'; + + /** + * Default configuration for JOS Animation Library. + */ + const DEFAULTS = Object.freeze({ + once: false, + animation: "fade", + animationInverse: null, + timingFunction: "ease-in-out", + threshold: 0, + duration: 0.4, + delay: 0, + rootMargin: "-10% 0% -40% 0%", + startVisible: null, + scrollDirection: null, + mirror: null, + passive: true, + disable: false, + debugMode: false, + scrollProgressDisable: false, + }); + + /** + * DOM utilities for JOS. + */ + + function getData(el, key, fallback) { + const val = el.dataset[key]; + return val !== undefined ? val : fallback; + } + + function setData(el, key, value) { + el.dataset[key] = value; + } + + function addClass(el, cls) { + if (cls) el.classList.add(cls); + } + + function removeClass(el, cls) { + if (cls) el.classList.remove(cls); + } + + function toggleClass(el, cls, force) { + el.classList.toggle(cls, force); + } + + function hasClass(el, cls) { + return el.classList.contains(cls); + } + + function queryAll(selector, root) { + return Array.from((document).querySelectorAll(selector)); + } + + function byId(id) { + return document.getElementById(id.charAt(0) === "#" ? id.slice(1) : id); + } + + let _id = 0; + function uniqueId(prefix) { + return (prefix) + "_" + (++_id) + "_" + ((Math.random() * 36e4) | 0).toString(36); + } + + /** + * ElementManager - Element initialization, stagger children, and attribute setup. + */ + + class ElementManager { + constructor(config) { + this._config = config; + this._durationSet = new Set(); + this._delaySet = new Set(); + this._startVisibleQueue = []; + } + + get durationSet() { return this._durationSet; } + get delaySet() { return this._delaySet; } + + initElement(el) { + const cfg = this._config; + const extras = []; + + // Reset any previous JOS state on re-init + el._josState = undefined; + el._josCooldown = false; + + if (hasClass(el, "jos_disabled")) { + removeClass(el, "jos_disabled"); + addClass(el, "jos"); + } + + // Resolve per-element settings with fallback to globals + const once = getData(el, "jos_once") || cfg.once; + const animation = getData(el, "jos_animation") || cfg.animation; + const inverse = getData(el, "jos_animationinverse") || cfg.animationInverse; + const timing = getData(el, "jos_timingfunction") || getData(el, "jos_timingFunction") || cfg.timingFunction; + const duration = getData(el, "jos_duration") || cfg.duration; + const delay = getData(el, "jos_delay") || cfg.delay; + const mirror = getData(el, "jos_mirror") || cfg.mirror; + + // Handle once + if (once && (once === "true" || /^\d+$/.test(String(once)))) { + setData(el, "jos_once", String(once)); + } else { + setData(el, "jos_once", cfg.once ? "1" : "false"); + } + + // Process stagger children + if (el.dataset.jos_stagger) { + const children = this._initStagger(el); + extras.push(...children); + if (!el.dataset.jos_animation) { + removeClass(el, "jos"); + return extras; + } + } + + setData(el, "jos_animation", animation); + if (inverse) setData(el, "jos_animationinverse", inverse); + if (timing) setData(el, "jos_timingfunction", timing); + if (mirror === "false") setData(el, "jos_mirror", mirror); + + if (duration) { + setData(el, "jos_duration", duration); + this._durationSet.add(parseFloat(duration)); + } + if (delay) { + setData(el, "jos_delay", delay); + this._delaySet.add(parseFloat(delay)); + } + + // Reset counter + setData(el, "jos_counter", "0"); + + // Add animation class (the "off" state) + addClass(el, `jos-${animation}`); + + // Determine startVisible: + // Per-element data-jos_startvisible takes priority, then global config. + // Explicit "false" must NOT queue the element (fixes startVisible=false re-init bug). + const svAttr = el.dataset.jos_startvisible; + if (svAttr !== undefined && svAttr !== "false" && svAttr !== null) { + this._startVisibleQueue.push(el); + } else if (svAttr === undefined && cfg.startVisible) { + this._startVisibleQueue.push(el); + } + + // Set scroll direction + if (cfg.scrollDirection && !el.dataset.jos_scrolldirection) { + setData(el, "jos_scrolldirection", cfg.scrollDirection); + } + + return extras; + } + + _initStagger(parent) { + const cfg = this._config; + const created = []; + + if (!parent.id) parent.id = uniqueId("jos-stagger"); + + const children = parent.children; + const stagger = parent.dataset.jos_stagger; + const sDelay = parseFloat(parent.dataset.jos_stagger_delay || cfg.delay); + const sSeq = parseFloat(parent.dataset.jos_stagger_seq || 0); + const sDur = parent.dataset.jos_stagger_duration || cfg.duration; + const sOnce = parent.dataset.jos_stagger_once || cfg.once; + const sInverse = parent.dataset.jos_staggerinverse || cfg.animationInverse; + const sMirror = parent.dataset.jos_stagger_mirror || cfg.mirror; + const sVisible = parent.dataset.jos_stagger_startVisible; + const sDir = parent.dataset.jos_stagger_scrolldirection || cfg.scrollDirection; + const sMargin = parent.dataset.jos_stagger_rootmargin || cfg.rootMargin; + + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (hasClass(child, "jos")) continue; + + addClass(child, "jos"); + if (!child.id) child.id = `${parent.id}_${i}`; + + if (parent.dataset.jos_stagger_anchor || child.dataset.jos_anchor) { + const anchor = parent.dataset.jos_stagger_anchor === "true" + ? `#${parent.id}` + : parent.dataset.jos_stagger_anchor; + setData(child, "jos_anchor", anchor); + } + + setData(child, "jos_animation", stagger); + if (sInverse) setData(child, "jos_animationinverse", sInverse); + setData(child, "jos_duration", sDur); + setData(child, "jos_delay", parseFloat(sSeq * i + sDelay)); + setData(child, "jos_once", sOnce); + if (sMirror === "false") setData(child, "jos_mirror", "false"); + if (sVisible) this._startVisibleQueue.push(child); + if (sDir) setData(child, "jos_scrolldirection", sDir); + if (sMargin) setData(child, "jos_rootmargin", sMargin); + + // Pass-through attributes + const pass = [ + ["jos_stagger_scroll", "jos_scroll"], + ["jos_stagger_timingFunction", "jos_timingfunction"], + ["jos_stagger_invoke", "jos_invoke"], + ["jos_stagger_invoke_out", "jos_invoke_out"], + ]; + for (let j = 0; j < pass.length; j++) { + if (parent.dataset[pass[j][0]]) setData(child, pass[j][1], parent.dataset[pass[j][0]]); + } + + created.push(child); + } + + return created; + } + + processStartVisible() { + const cfg = this._config; + // Use rAF instead of setTimeout(100) for faster first paint + requestAnimationFrame(() => { + for (let i = 0; i < this._startVisibleQueue.length; i++) { + const el = this._startVisibleQueue[i]; + const val = el.dataset.jos_startvisible; + const delayMs = val === "true" ? 0 : parseInt(val, 10) || cfg.startVisible || 0; + + if (delayMs <= 0) { + removeClass(el, `jos-${el.dataset.jos_animation}`); + } else { + setTimeout(() => { removeClass(el, `jos-${el.dataset.jos_animation}`); }, delayMs); + } + } + }); + } + + unsetElements(elements, state) { + if (!elements) return; + for (let i = 0; i < elements.length; i++) { + const el = elements[i]; + removeClass(el, "jos"); + addClass(el, "jos_disabled"); + if (state === 0) { + addClass(el, `jos-${el.dataset.jos_animation}`); + } else { + removeClass(el, `jos-${el.dataset.jos_animation}`); + } + } + } + } + + /** + * ObserverManager - Manages IntersectionObserver instances for JOS elements. + */ + + class ObserverManager { + constructor(config, scrollTracker) { + this._config = config; + this._scrollTracker = scrollTracker; + this._observers = []; + this._minCooldownMs = 50; + this._lastScrollX = 0; + this._lastScrollY = 0; + + // Track horizontal scroll for left/right direction (#33) + if (typeof window !== "undefined") { + this._lastScrollX = window.scrollX || window.pageXOffset || 0; + this._lastScrollY = window.scrollY || window.pageYOffset || 0; + } + } + + observe(el) { + const rootMargin = this._computeRootMargin(el); + const observer = new IntersectionObserver( + (entries) => this._handleIntersection(entries, observer), + { + rootMargin, + threshold: parseFloat(el.dataset.jos_threshold || this._config.threshold), + } + ); + this._observers.push(observer); + observer.observe(el); + } + + observeAnchor(el) { + const anchorId = el.dataset.jos_anchor; + const anchorEl = byId(anchorId); + if (!anchorEl) { + if (this._config.debugMode) console.warn(`[JOS] Anchor "${anchorId}" not found`); + return; + } + + const rootMargin = this._computeRootMargin(el); + const observer = new IntersectionObserver( + (entries) => this._handleAnchorIntersection(entries, observer), + { + rootMargin, + threshold: parseFloat(el.dataset.jos_threshold || this._config.threshold), + } + ); + this._observers.push(observer); + observer.observe(anchorEl); + } + + disconnectAll() { + for (let i = 0; i < this._observers.length; i++) { + this._observers[i].disconnect(); + } + this._observers.length = 0; + } + + /** + * Compute rootMargin from element data attrs, falling back to global config. + * Supports per-element data-jos_rootmargin="..." (#47) and + * individual data-jos_rootmargin_top/right/bottom/left. + * Supports px, %, vw, vh, rem units (#27). + */ + _computeRootMargin(el) { + // Per-element shorthand takes priority (#47) + const perElem = el.dataset.jos_rootmargin; + const base = perElem || this._config.rootMargin; + const parts = base.trim().split(/\s+/); + + const top = el.dataset.jos_rootmargin_top || parts[0] || "0%"; + const right = el.dataset.jos_rootmargin_right || parts[1] || "0%"; + const bottom = el.dataset.jos_rootmargin_bottom || parts[2] || "0%"; + const left = el.dataset.jos_rootmargin_left || parts[3] || "0%"; + + // Invert sign: JOS positive=inward, IO negative=inward + return [top, right, bottom, left].map(this._invertValue).join(" "); + } + + /** + * Invert a single margin value (supports any CSS unit). + */ + _invertValue(v) { + if (v.startsWith("-")) return v.slice(1); + if (v === "0" || v === "0%" || v === "0px") return v; + return `-${v}`; + } + + /** + * Detect scroll direction: up, down, left, right (#33). + */ + _getScrollDirection(entry) { + const curY = window.scrollY || window.pageYOffset || 0; + const curX = window.scrollX || window.pageXOffset || 0; + const dy = curY - this._lastScrollY; + const dx = curX - this._lastScrollX; + this._lastScrollY = curY; + this._lastScrollX = curX; + + // Dominant axis + if (Math.abs(dy) >= Math.abs(dx)) { + return dy >= 0 ? "down" : "up"; + } + return dx >= 0 ? "right" : "left"; + } + + /** + * Cooldown = max(50ms, transition duration) so the animation finishes + * before state can flip. Prevents the IO feedback loop where an + * animation that changes element geometry triggers an immediate + * reverse callback. + */ + _getCooldownMs(el) { + var dur = parseFloat(el.dataset.jos_duration || this._config.duration) || 0.4; + return Math.max(this._minCooldownMs, dur * 1000); + } + + _shouldRespond(el, scrollDir) { + const filter = el.dataset.jos_scrolldirection; + if (!filter || filter === "none") return true; + return filter === scrollDir; + } + + _handleIntersection(entries, observer) { + if (this._config.disable) return; + const entry = entries[0]; + const el = entry.target; + const animation = el.dataset.jos_animation; + const inverse = el.dataset.jos_animationinverse; + const dir = this._getScrollDirection(entry); + + if (entry.isIntersecting) { + this._onEnter(el, animation, inverse, observer); + } else { + this._onLeave(el, animation, inverse, dir); + } + } + + _handleAnchorIntersection(entries, observer) { + if (this._config.disable) return; + const entry = entries[0]; + const anchor = entry.target; + const elements = queryAll(`[data-jos_anchor='#${anchor.id}']`); + const dir = this._getScrollDirection(entry); + + for (let i = 0; i < elements.length; i++) { + const el = elements[i]; + const animation = el.dataset.jos_animation; + const inverse = el.dataset.jos_animationinverse; + + if (entry.isIntersecting) { + this._onAnchorEnter(el, animation, inverse, observer, anchor); + } else { + this._onAnchorLeave(el, animation, inverse, dir); + } + } + } + + _onEnter(el, animation, inverse, observer) { + if (el._josState === "in" || el._josCooldown) return; + el._josState = "in"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + if (el.dataset.jos_scroll && el.dataset.jos_scroll !== "false") { + this._scrollTracker.track(el); + } + + this._incrementCounter(el); + + if (el.dataset.jos_mirror === "false") { + removeClass(el, "jos-no-mirror"); + } + + // Remove hidden/off-screen state + if (animation) { + removeClass(el, `jos-${animation}`); + } + // Clean up inverse from a previous leave cycle + if (inverse) { + removeClass(el, `jos-${inverse}`); + } + + this._invokeCallback(el, "jos_invoke"); + if (animation) this._handleOnce(el, observer); + } + + _onLeave(el, animation, inverse, scrollDir) { + if (el._josState === "out" || el._josCooldown) return; + + // Check direction filter BEFORE committing state change + if (!this._shouldRespond(el, scrollDir)) return; + + var prevState = el._josState; // undefined on first IO, "in" after real enter + el._josState = "out"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + toggleClass(el, "jos-no-mirror", el.dataset.jos_mirror === "false"); + + // Only use inverse after element has been entered at least once. + // On initial IO false callback (_josState was undefined), use the + // base animation so "static" elements stay visible until first enter. + var useInverse = inverse && prevState === "in"; + + if (useInverse) { + addClass(el, `jos-${inverse}`); + } else if (animation) { + addClass(el, `jos-${animation}`); + } + + this._invokeCallback(el, "jos_invoke_out"); + + // Don't untrack anchor-to-anchor elements — they track between anchors, not viewport + if (el.dataset.jos_scroll && el.dataset.jos_scroll !== "false") { + if (!el.dataset.jos_scroll_start && !el.dataset.jos_scroll_end) { + this._scrollTracker.untrack(el); + } + } + } + + _onAnchorEnter(el, animation, inverse, observer, anchor) { + if (el._josState === "in" || el._josCooldown) return; + el._josState = "in"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + this._incrementCounter(el); + + if (animation) { + removeClass(el, `jos-${animation}`); + } + // Clean up inverse from previous leave + if (inverse) { + removeClass(el, `jos-${inverse}`); + } + + this._invokeCallback(el, "jos_invoke"); + + if (animation) { + const once = el.dataset.jos_once; + if (once && (once === "true" || parseInt(el.dataset.jos_counter) >= parseInt(once))) { + const siblings = queryAll(`[data-jos_anchor='#${anchor.id}']`); + if (siblings.length < 2) { + observer.unobserve(anchor); + } else { + el.removeAttribute("data-jos_anchor"); + } + } + } + } + + _onAnchorLeave(el, animation, inverse, scrollDir) { + if (el._josState === "out" || el._josCooldown) return; + if (!this._shouldRespond(el, scrollDir)) return; + + var prevState = el._josState; + el._josState = "out"; + el._josCooldown = true; + setTimeout(() => { el._josCooldown = false; }, this._getCooldownMs(el)); + + var useInverse = inverse && prevState === "in"; + + if (useInverse) { + addClass(el, `jos-${inverse}`); + } else if (animation) { + addClass(el, `jos-${animation}`); + } + + this._invokeCallback(el, "jos_invoke_out"); + } + + _incrementCounter(el) { + el.dataset.jos_counter = (parseInt(el.dataset.jos_counter || 0) + 1).toString(); + } + + _handleOnce(el, observer) { + const once = el.dataset.jos_once; + if (!once || once === "false") return; + if (once === "true" || parseInt(el.dataset.jos_counter) >= parseInt(once)) { + observer.unobserve(el); + } + } + + _invokeCallback(el, attr) { + const fnName = el.dataset[attr]; + if (!fnName) return; + const fn = typeof window !== "undefined" && window[fnName]; + if (typeof fn === "function") { + try { fn(el); } catch (e) { + if (this._config.debugMode) console.warn(`[JOS] Callback "${fnName}" error:`, e); + } + } + } + } + + /** + * ScrollTracker - Scroll progress tracking with CSS custom properties (#26). + * Uses requestAnimationFrame for jank-free updates. + * + * Progress is 0% when element top hits the BOTTOM trigger line, + * and 100% when element top hits the TOP trigger line. + * + * Modes: + * - Element-to-viewport: uses rootMargin trigger zone + * - Anchor-to-anchor: data-jos_scroll_start="#a" data-jos_scroll_end="#b" + * - Horizontal: data-jos_scroll_axis="x" + */ + class ScrollTracker { + constructor() { + this._elements = new Set(); + this._ticking = false; + this._onScroll = this._onScroll.bind(this); + this._update = this._update.bind(this); + this._bound = false; + this._config = null; + } + + setConfig(config) { + this._config = config; + } + + track(el) { + this._elements.add(el); + if (!this._bound) { + document.addEventListener("scroll", this._onScroll, { passive: true }); + window.addEventListener("resize", this._onScroll, { passive: true }); + this._bound = true; + } + if (!this._ticking) { + this._ticking = true; + requestAnimationFrame(this._update); + } + } + + untrack(el) { + this._elements.delete(el); + if (this._bound && this._elements.size === 0) { + document.removeEventListener("scroll", this._onScroll); + window.removeEventListener("resize", this._onScroll); + this._bound = false; + } + } + + destroy() { + this._elements.clear(); + if (this._bound) { + document.removeEventListener("scroll", this._onScroll); + window.removeEventListener("resize", this._onScroll); + this._bound = false; + } + } + + _onScroll() { + if (!this._ticking) { + this._ticking = true; + requestAnimationFrame(this._update); + } + } + + _update() { + this._ticking = false; + var wh = window.innerHeight; + var ww = window.innerWidth; + var cfg = this._config; + // Global rootMargin as fallback (JOS convention: positive = inward) + var globalMargin = cfg ? cfg.rootMargin : "0% 0% 0% 0%"; + + for (var el of this._elements) { + var cbName = el.dataset.jos_scroll; + if (!cbName || cbName === "false") continue; + + var startId = el.dataset.jos_scroll_start; + var endId = el.dataset.jos_scroll_end; + var sp, wp; + + if (startId && endId) { + // ─── Anchor-to-anchor progress ─── + // 0% when viewport center is at start anchor, 100% at end anchor + var sEl = document.getElementById(startId.charAt(0) === "#" ? startId.slice(1) : startId); + var eEl = document.getElementById(endId.charAt(0) === "#" ? endId.slice(1) : endId); + if (sEl && eEl) { + var sR = sEl.getBoundingClientRect(); + var eR = eEl.getBoundingClientRect(); + var sY = sR.top + sR.height * 0.5; + var eY = eR.top + eR.height * 0.5; + var vc = wh * 0.5; + // eY > sY (end is below start in viewport coords because it's further down the page) + // As we scroll down, both decrease. Progress goes 0→1 as vc moves from sY to eY. + var denom = eY - sY; + sp = Math.abs(denom) > 0.5 ? (vc - sY) / denom : 0; + } else { + sp = 0; + } + sp = sp < 0 ? 0 : sp > 1 ? 1 : sp; + wp = sEl ? sEl.getBoundingClientRect().top / wh : 0; + } else if ((el.dataset.jos_scroll_axis || "y") === "x") { + // ─── Horizontal progress ─── + // Use left/right rootMargin trigger lines analogous to vertical top/bottom + var marginStrX = el.dataset.jos_rootmargin || globalMargin; + var mvx = marginStrX.trim().split(/\s+/); + var rightInset = this._parsePx(mvx[1] || "0%", ww); + var leftInset = this._parsePx(mvx[3] || mvx[1] || "0%", ww); + + // Trigger positions (px from left of viewport) + var leftTrigger = Math.abs(leftInset); + var rightTrigger = ww - Math.abs(rightInset); + + var rect = el.getBoundingClientRect(); + var zoneX = rightTrigger - leftTrigger; + + // 0% when rect.left = rightTrigger, 100% when rect.left = leftTrigger + sp = zoneX > 0 ? (rightTrigger - rect.left) / zoneX : 0; + sp = sp < 0 ? 0 : sp > 1 ? 1 : sp; + wp = rect.left / ww; + } else { + // ─── Vertical progress (default) ─── + // Use rootMargin trigger lines: 0% at bottom trigger, 100% at top trigger + var marginStr = el.dataset.jos_rootmargin || globalMargin; + var mv = marginStr.trim().split(/\s+/); + var topInset = this._parsePx(mv[0] || "0%", wh); + var bottomInset = this._parsePx(mv[2] || mv[0] || "0%", wh); + + // Trigger positions (px from top of viewport) + // rootMargin "10% 0% 30% 0%" → topTrigger at 10% from top, bottomTrigger at 30% from bottom + var topTrigger = Math.abs(topInset); + var bottomTrigger = wh - Math.abs(bottomInset); + + var rect2 = el.getBoundingClientRect(); + var zone = bottomTrigger - topTrigger; + + // 0% when rect.top = bottomTrigger, 100% when rect.top = topTrigger + sp = zone > 0 ? (bottomTrigger - rect2.top) / zone : 0; + sp = sp < 0 ? 0 : sp > 1 ? 1 : sp; + wp = rect2.top / wh; + } + + // Attach data for callback access + el.jos = { + scrollProgress: sp, + scrollProgressReverse: 1 - sp, + windowScrollProgress: wp, + rootScrollProgress: sp, + percent: Math.round(sp * 100), + }; + + // CSS custom properties (#26) + var st = el.style; + var s4 = sp.toFixed(4); + var sr4 = (1 - sp).toFixed(4); + st.setProperty("--jos_scroll", s4); + st.setProperty("--jos_scroll_reverse", sr4); + st.setProperty("--jos_scroll_perc", (sp * 100).toFixed(1) + "%"); + st.setProperty("--jos_scroll_deg", (sp * 360).toFixed(1) + "deg"); + st.setProperty("--jos_windowScroll", wp.toFixed(4)); + st.setProperty("--jos_windowScroll_reverse", (1 - wp).toFixed(4)); + st.setProperty("--jos_rootScroll", s4); + st.setProperty("--jos_rootScroll_reverse", sr4); + + if (typeof window !== "undefined" && typeof window[cbName] === "function") { + try { window[cbName](el); } catch (_) { /* silent */ } + } + } + } + + _parsePx(val, viewportSize) { + if (!val) return 0; + var num = parseFloat(val); + if (isNaN(num)) return 0; + if (val.endsWith("px")) return num; + if (val.endsWith("vw")) return (num * window.innerWidth) / 100; + if (val.endsWith("vh")) return (num * window.innerHeight) / 100; + if (val.endsWith("rem")) { + var fs = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16; + return num * fs; + } + return (num * viewportSize) / 100; + } + } + + /** + * StyleManager - Dynamic stylesheet injection for JOS. + */ + class StyleManager { + constructor() { + this._el = null; + this._sheet = null; + } + + create(config, durations, delays) { + // Remove previous stylesheet on re-init + this.destroy(); + + const style = document.createElement("style"); + style.setAttribute("data-jos", ""); + document.head.appendChild(style); + this._el = style; + this._sheet = style.sheet; + + const s = this._sheet; + s.insertRule(".jos-no-mirror { transition: 0s forwards !important; }"); + + const t = `all ${config.duration}s ${config.timingFunction} ${config.delay}s`; + s.insertRule(`.jos { transition: ${t}; }`); + + for (const v of durations) { + s.insertRule(`[data-jos_duration="${v}"] { transition-duration: ${v}s !important; }`); + } + for (const v of delays) { + s.insertRule(`[data-jos_delay="${v}"] { transition-delay: ${v}s !important; }`); + } + } + + disable() { + if (this._sheet) this._sheet.disabled = true; + } + + destroy() { + if (this._el && this._el.parentNode) { + this._el.parentNode.removeChild(this._el); + } + this._el = null; + this._sheet = null; + } + } + + /** + * DebugOverlay - Draggable trigger lines for JOS debug mode. + * Shows top/right/bottom/left trigger lines that can be dragged to adjust rootMargin. + * Calls onChange(topPct, rightPct, bottomPct, leftPct) when any line is dragged. + */ + class DebugOverlay { + constructor() { + this._container = null; + this._active = false; + this._onResize = null; + this.onChange = null; + this._pcts = { top: 0, right: 0, bottom: 0, left: 0 }; + this._lines = {}; + } + + create(config) { + if (this._active) this.destroy(); + if (typeof document === "undefined") return; + + var self = this; + var wh = window.innerHeight; + var ww = window.innerWidth; + var parts = config.rootMargin.trim().split(/\s+/); + this._pcts.top = Math.abs(parseFloat(parts[0]) || 0); + this._pcts.right = Math.abs(parseFloat(parts[1] || parts[0]) || 0); + this._pcts.bottom = Math.abs(parseFloat(parts[2] || parts[0]) || 0); + this._pcts.left = Math.abs(parseFloat(parts[3] || parts[1] || parts[0]) || 0); + + var c = document.createElement("div"); + c.setAttribute("data-jos-debug", ""); + c.style.cssText = "position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:99999;" + + "opacity:0;transition:opacity 0.4s;"; + + // Auto-show: find sentinel [data-jos-debug-after], show overlay when it enters viewport + this._showObserver = null; + var sentinel = document.querySelector("[data-jos-debug-after]"); + if (sentinel) { + this._showObserver = new IntersectionObserver(function (entries) { + if (entries[0].isIntersecting) { + c.style.opacity = "0"; + } else { + c.style.opacity = "1"; + } + }, { threshold: 0 }); + this._showObserver.observe(sentinel); + } else { + // No sentinel — show immediately + c.style.opacity = "1"; + } + + // Top line (horizontal, from top) + var topPx = (this._pcts.top / 100) * wh; + this._lines.top = this._makeHLine(topPx, "top"); + c.appendChild(this._lines.top.line); + + // Bottom line (horizontal, from bottom) + var bottomPx = (this._pcts.bottom / 100) * wh; + this._lines.bottom = this._makeHLine(bottomPx, "bottom"); + c.appendChild(this._lines.bottom.line); + + // Right line (vertical, from right) — only if > 0 + var rightPx = (this._pcts.right / 100) * ww; + this._lines.right = this._makeVLine(rightPx, "right"); + c.appendChild(this._lines.right.line); + if (this._pcts.right <= 0) this._lines.right.line.style.display = "none"; + + // Left line (vertical, from left) — only if > 0 + var leftPx = (this._pcts.left / 100) * ww; + this._lines.left = this._makeVLine(leftPx, "left"); + c.appendChild(this._lines.left.line); + if (this._pcts.left <= 0) this._lines.left.line.style.display = "none"; + + document.body.appendChild(c); + this._container = c; + this._active = true; + + this._updateLabels(); + + // Show anchor markers (green start, orange end) + this._createAnchorMarkers(c); + + // ─── Drag handling ─── + var dragging = null; + var startPointer = 0; + var startPx2 = 0; + + function onPointerDown(e) { + var x = e.clientX; + var y = e.clientY; + var h = window.innerHeight; + var w = window.innerWidth; + var threshold = 14; + + var tY = (self._pcts.top / 100) * h; + var bY = h - (self._pcts.bottom / 100) * h; + // Clamp to at least 6px from edge so lines at 0% are still reachable + var rX = Math.min(w - 6, w - (self._pcts.right / 100) * w); + var lX = Math.max(6, (self._pcts.left / 100) * w); + + if (Math.abs(y - tY) < threshold) { + dragging = "top"; startPointer = y; startPx2 = tY; + } else if (Math.abs(y - bY) < threshold) { + dragging = "bottom"; startPointer = y; startPx2 = bY; + } else if (Math.abs(x - lX) < threshold) { + dragging = "left"; startPointer = x; startPx2 = (self._pcts.left / 100) * w; + } else if (Math.abs(x - rX) < threshold) { + dragging = "right"; startPointer = x; startPx2 = w - (self._pcts.right / 100) * w; + } else { + return; + } + e.preventDefault(); + var isH = dragging === "top" || dragging === "bottom"; + document.body.style.cursor = isH ? "ns-resize" : "ew-resize"; + document.body.style.userSelect = "none"; + } + + function onPointerMove(e) { + if (!dragging) return; + var h = window.innerHeight; + var w = window.innerWidth; + + if (dragging === "top") { + var dy = e.clientY - startPointer; + var pct = Math.max(0, Math.min(50, ((startPx2 + dy) / h) * 100)); + self._pcts.top = pct; + self._lines.top.line.style.top = ((pct / 100) * h) + "px"; + } else if (dragging === "bottom") { + var dy2 = e.clientY - startPointer; + var fromBtm = h - (startPx2 + dy2); + var pct2 = Math.max(0, Math.min(50, (fromBtm / h) * 100)); + self._pcts.bottom = pct2; + self._lines.bottom.line.style.bottom = ((pct2 / 100) * h) + "px"; + } else if (dragging === "left") { + var dx = e.clientX - startPointer; + var pct3 = Math.max(0, Math.min(50, ((startPx2 + dx) / w) * 100)); + self._pcts.left = pct3; + self._lines.left.line.style.left = ((pct3 / 100) * w) + "px"; + self._lines.left.line.style.display = pct3 > 0 ? "" : "none"; + } else if (dragging === "right") { + var dx2 = e.clientX - startPointer; + var fromRt = w - (startPx2 + dx2); + var pct4 = Math.max(0, Math.min(50, (fromRt / w) * 100)); + self._pcts.right = pct4; + self._lines.right.line.style.right = ((pct4 / 100) * w) + "px"; + self._lines.right.line.style.display = pct4 > 0 ? "" : "none"; + } + self._updateLabels(); + } + + function onPointerUp() { + if (!dragging) return; + dragging = null; + document.body.style.cursor = ""; + document.body.style.userSelect = ""; + if (self.onChange) { + self.onChange(self._pcts.top, self._pcts.right, self._pcts.bottom, self._pcts.left); + } + } + + document.addEventListener("pointerdown", onPointerDown); + document.addEventListener("pointermove", onPointerMove); + document.addEventListener("pointerup", onPointerUp); + + this._cleanupDrag = function () { + document.removeEventListener("pointerdown", onPointerDown); + document.removeEventListener("pointermove", onPointerMove); + document.removeEventListener("pointerup", onPointerUp); + }; + + // ─── Resize + scroll → update positions ─── + this._onResize = function () { + if (!self._active) return; + var h = window.innerHeight; + var w = window.innerWidth; + self._lines.top.line.style.top = ((self._pcts.top / 100) * h) + "px"; + self._lines.bottom.line.style.bottom = ((self._pcts.bottom / 100) * h) + "px"; + self._lines.right.line.style.right = ((self._pcts.right / 100) * w) + "px"; + self._lines.left.line.style.left = ((self._pcts.left / 100) * w) + "px"; + self._updateAnchorPositions(); + }; + window.addEventListener("resize", this._onResize, { passive: true }); + document.addEventListener("scroll", this._onResize, { passive: true }); + } + + /** Horizontal line (top or bottom) — spans full width, with glowing grab handle below label */ + _makeHLine(posPx, side) { + var isTop = side === "top"; + var line = document.createElement("div"); + line.style.cssText = + "position:absolute;left:0;right:0;height:2px;" + + "background:rgba(99,102,241,0.25);" + + "border-" + (isTop ? "bottom" : "top") + ":1px dashed rgba(99,102,241,0.5);" + + "cursor:ns-resize;pointer-events:auto;padding:5px 0;margin:-5px 0;" + + "background-clip:content-box;" + + (isTop ? "top:" + posPx + "px;" : "bottom:" + posPx + "px;"); + + // Label + handle wrapper (stacked vertically, right side) + var wrapper = document.createElement("div"); + wrapper.style.cssText = + "position:absolute;right:12px;pointer-events:none;" + + "display:flex;flex-direction:column;align-items:center;gap:3px;" + + (isTop ? "top:6px;" : "bottom:6px;"); + + var label = document.createElement("div"); + label.style.cssText = + "font:11px/1.3 monospace;color:rgba(99,102,241,0.85);background:rgba(9,9,11,0.9);" + + "padding:2px 6px;border-radius:3px;white-space:nowrap;"; + + // Glowing grab bar (below label) + var handle = document.createElement("div"); + handle.style.cssText = + "width:36px;height:8px;border-radius:4px;" + + "background:rgba(99,102,241,0.6);" + + "box-shadow:0 0 8px rgba(99,102,241,0.7),0 0 16px rgba(99,102,241,0.3);"; + + wrapper.appendChild(label); + wrapper.appendChild(handle); + line.appendChild(wrapper); + + return { line: line, label: label, handle: handle }; + } + + /** Vertical line (left or right) — spans full height, with glowing grab handle below label */ + _makeVLine(posPx, side) { + var isLeft = side === "left"; + var line = document.createElement("div"); + line.style.cssText = + "position:absolute;top:0;bottom:0;width:2px;" + + "background:rgba(99,102,241,0.25);" + + "border-" + (isLeft ? "right" : "left") + ":1px dashed rgba(99,102,241,0.5);" + + "cursor:ew-resize;pointer-events:auto;padding:0 5px;margin:0 -5px;" + + "background-clip:content-box;" + + (isLeft ? "left:" + posPx + "px;" : "right:" + posPx + "px;"); + + // Label + handle wrapper (stacked vertically, bottom area) + var wrapper = document.createElement("div"); + wrapper.style.cssText = + "position:absolute;bottom:24px;pointer-events:none;" + + "display:flex;flex-direction:column;align-items:center;gap:3px;" + + (isLeft ? "left:6px;" : "right:6px;"); + + var label = document.createElement("div"); + label.style.cssText = + "font:11px/1.3 monospace;color:rgba(99,102,241,0.85);background:rgba(9,9,11,0.9);" + + "padding:2px 6px;border-radius:3px;white-space:nowrap;"; + + // Glowing grab bar (below label) + var handle = document.createElement("div"); + handle.style.cssText = + "width:8px;height:36px;border-radius:4px;" + + "background:rgba(99,102,241,0.6);" + + "box-shadow:0 0 8px rgba(99,102,241,0.7),0 0 16px rgba(99,102,241,0.3);"; + + wrapper.appendChild(label); + wrapper.appendChild(handle); + line.appendChild(wrapper); + + return { line: line, label: label, handle: handle }; + } + + /** Show anchor markers for elements with data-jos_scroll_start / data-jos_scroll_end */ + _createAnchorMarkers(container) { + this._anchorEls = []; + var anchors = document.querySelectorAll("[data-jos_scroll_start][data-jos_scroll_end]"); + for (var i = 0; i < anchors.length; i++) { + var el = anchors[i]; + var sId = el.dataset.jos_scroll_start; + var eId = el.dataset.jos_scroll_end; + var sEl = document.getElementById(sId.charAt(0) === "#" ? sId.slice(1) : sId); + var eEl = document.getElementById(eId.charAt(0) === "#" ? eId.slice(1) : eId); + if (!sEl || !eEl) continue; + + // ─── Fixed vertical progress indicator (left edge) ─── + var panel = document.createElement("div"); + panel.style.cssText = + "position:fixed;left:10px;top:50%;transform:translateY(-50%);" + + "width:32px;pointer-events:none;z-index:99999;" + + "display:flex;flex-direction:column;align-items:center;gap:0;" + + "opacity:0;transition:opacity 0.3s;"; + + // Start label + var sLabel = document.createElement("div"); + sLabel.style.cssText = + "font:9px/1.2 monospace;color:rgba(52,211,153,0.9);" + + "background:rgba(9,9,11,0.9);padding:2px 4px;border-radius:3px 3px 0 0;" + + "text-align:center;width:100%;white-space:nowrap;"; + sLabel.textContent = "0%"; + + // Track background + var track = document.createElement("div"); + track.style.cssText = + "width:6px;height:120px;background:rgba(255,255,255,0.08);" + + "border-radius:3px;position:relative;overflow:hidden;"; + + // Fill bar + var fill = document.createElement("div"); + fill.style.cssText = + "position:absolute;bottom:0;left:0;right:0;height:0%;" + + "background:linear-gradient(to top,rgba(52,211,153,0.8),rgba(99,102,241,0.8));" + + "border-radius:3px;transition:height 0.05s linear;" + + "box-shadow:0 0 6px rgba(52,211,153,0.5);"; + track.appendChild(fill); + + // End label + var eLabel = document.createElement("div"); + eLabel.style.cssText = + "font:9px/1.2 monospace;color:rgba(251,146,60,0.9);" + + "background:rgba(9,9,11,0.9);padding:2px 4px;border-radius:0 0 3px 3px;" + + "text-align:center;width:100%;white-space:nowrap;"; + eLabel.textContent = "100%"; + + // Percent badge (center) + var badge = document.createElement("div"); + badge.style.cssText = + "font:bold 11px/1.2 monospace;color:#fff;" + + "background:rgba(9,9,11,0.9);border:1px solid rgba(99,102,241,0.4);" + + "padding:2px 5px;border-radius:3px;margin-top:4px;" + + "text-align:center;white-space:nowrap;" + + "box-shadow:0 0 8px rgba(99,102,241,0.3);"; + badge.textContent = "0%"; + + panel.appendChild(sLabel); + panel.appendChild(track); + panel.appendChild(eLabel); + panel.appendChild(badge); + container.appendChild(panel); + + this._anchorEls.push({ + sEl: sEl, eEl: eEl, + sId: sId, eId: eId, + trackedEl: el, + panel: panel, + fill: fill, + badge: badge, + sLabel: sLabel, + eLabel: eLabel, + }); + } + this._updateAnchorPositions(); + } + + _updateAnchorPositions() { + if (!this._anchorEls) return; + var wh = window.innerHeight; + var vc = wh * 0.5; + + for (var i = 0; i < this._anchorEls.length; i++) { + var a = this._anchorEls[i]; + var sR = a.sEl.getBoundingClientRect(); + var eR = a.eEl.getBoundingClientRect(); + var sY = sR.top + sR.height * 0.5; + var eY = eR.top + eR.height * 0.5; + + // Progress: 0 at start, 1 at end + var denom = eY - sY; + var progress = Math.abs(denom) > 0.5 ? (vc - sY) / denom : 0; + var inRange = progress > 0 && progress < 1; + var pct = Math.round(Math.max(0, Math.min(1, progress)) * 100); + + // Show / hide debug panel only (don't touch the page element) + a.panel.style.opacity = inRange ? "1" : "0"; + + // Update fill + badge + a.fill.style.height = pct + "%"; + a.badge.textContent = pct + "%"; + a.sLabel.textContent = a.sId.replace(/^#/, ""); + a.eLabel.textContent = a.eId.replace(/^#/, ""); + } + } + + _updateLabels() { + var p = this._pcts; + if (this._lines.top) this._lines.top.label.textContent = "top: " + Math.round(p.top) + "%"; + if (this._lines.bottom) this._lines.bottom.label.textContent = "bottom: " + Math.round(p.bottom) + "%"; + if (this._lines.right) this._lines.right.label.textContent = "right: " + Math.round(p.right) + "%"; + if (this._lines.left) this._lines.left.label.textContent = "left: " + Math.round(p.left) + "%"; + } + + destroy() { + if (this._container && this._container.parentNode) { + this._container.parentNode.removeChild(this._container); + } + if (this._onResize) { + window.removeEventListener("resize", this._onResize); + document.removeEventListener("scroll", this._onResize); + } + if (this._cleanupDrag) this._cleanupDrag(); + if (this._showObserver) { this._showObserver.disconnect(); this._showObserver = null; } + this._container = null; + this._active = false; + this._lines = {}; + this._anchorEls = null; + } + } + + /** + * JOS - JavaScript On Scroll Animation Library + * + * @version 1.0.0-beta.1 + * @author Jesvi Jonathan + * @license MIT + * @see https://jos-animation.vercel.app + */ + + + class JOS { + static version = "1.0.0-beta.1"; + static author = "Jesvi Jonathan"; + static webpage = "https://jos-animation.vercel.app"; + static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; + + constructor() { + this._config = { ...DEFAULTS }; + this._elements = []; + this._scrollTracker = new ScrollTracker(); + this._observerManager = null; + this._elementManager = null; + this._styleManager = new StyleManager(); + this._debugOverlay = new DebugOverlay(); + this._initialized = false; + } + + /** + * Initialize JOS with user options. + * On re-init, fully resets config to DEFAULTS first (#29), + * then tears down previous state before rebuilding. + */ + init(options = {}) { + // On re-init: tear down old state completely + if (this._initialized) { + this._teardownObservers(); + this._scrollTracker.destroy(); + this._styleManager.destroy(); + this._debugOverlay.destroy(); + this._elements = []; + } + + // Always reset to DEFAULTS, then overlay user options (#29) + this._config = { ...DEFAULTS }; + this._applyOptions(options); + + if (this._config.disable) return; + + this._collectElements(); + + if (this._config.debugMode) { + this._printDebugInfo(); + } + + this._setup(); + this._styleManager.create( + this._config, + this._elementManager.durationSet, + this._elementManager.delaySet + ); + + if (this._config.debugMode) { + this._debugOverlay.create(this._config); + this._debugOverlay.onChange = (topPct, rightPct, bottomPct, leftPct) => { + var newMargin = Math.round(topPct) + "% " + Math.round(rightPct) + "% " + Math.round(bottomPct) + "% " + Math.round(leftPct) + "%"; + this.init({ + ...this._config, + rootMargin: newMargin, + }); + }; + } + + this._initialized = true; + } + + /** + * Start or restart animations. + * @param {number} state - 0: full restart, -1: resume. + */ + start(state = 0) { + if (state !== -1) { + this.stop(); + this._setup(); + } + this._config.disable = false; + return "Started"; + } + + /** + * Stop animations. + * @param {number} state - 0: stop and show, 1: stop and hide, -1: pause. + */ + stop(state = 0) { + const internalState = state === 0 ? 1 : state === 1 ? 0 : state; + this._config.disable = true; + + if (internalState !== -1) { + this._teardownElements(internalState); + } + return "Stopped"; + } + + /** + * Refresh: re-scan DOM for new .jos elements. + */ + refresh() { + this._teardownObservers(); + this._collectElements(); + this._setup(); + return "Refreshed"; + } + + /** + * Destroy the JOS instance completely. + * @param {number} state - 0: preserve styles, 1: remove styles. + */ + destroy(state = 0) { + this._teardownObservers(); + this._scrollTracker.destroy(); + this._debugOverlay.destroy(); + this._elements = []; + + if (state === 1) { + this._styleManager.destroy(); + } + + this._initialized = false; + return "Destroyed"; + } + + /** + * Print version information. + */ + version() { + console.log( + `JOS v${JOS.version} | ${JOS.webpage}` + ); + } + + // ─── Private ─────────────────────────────────────────────────── + + _applyOptions(options) { + const cfg = this._config; + + cfg.once = options.once ?? cfg.once; + cfg.animation = options.animation ?? cfg.animation; + cfg.animationInverse = + options.animationInverse ?? options.animationinverse ?? cfg.animationInverse; + cfg.timingFunction = options.timingFunction ?? cfg.timingFunction; + cfg.threshold = options.threshold ?? cfg.threshold; + cfg.duration = options.duration ?? cfg.duration; + cfg.delay = options.delay ?? cfg.delay; + cfg.startVisible = options.startVisible ?? cfg.startVisible; + cfg.scrollDirection = + options.scrollDirection ?? options.scrolldirection ?? cfg.scrollDirection; + cfg.mirror = options.mirror ?? cfg.mirror; + cfg.passive = options.passive ?? cfg.passive; + cfg.debugMode = options.debugMode ?? cfg.debugMode; + cfg.scrollProgressDisable = + options.scrollProgressDisable ?? cfg.scrollProgressDisable; + + if (options.disable !== undefined) { + cfg.disable = options.disable; + } + + if (options.rootMargin) { + cfg.rootMargin = options.rootMargin; + } else if (options.rootMarginTop || options.rootMarginBottom) { + const top = options.rootMarginTop || "-10%"; + const bottom = options.rootMarginBottom || "-40%"; + cfg.rootMargin = `${top} 0% ${bottom} 0%`; + } + } + + _collectElements() { + this._elements = queryAll(".jos"); + } + + _setup() { + this._elementManager = new ElementManager(this._config); + this._scrollTracker.setConfig(this._config); + this._observerManager = new ObserverManager( + this._config, + this._scrollTracker + ); + + const allElements = [...this._elements]; + + for (const el of this._elements) { + const extras = this._elementManager.initElement(el); + allElements.push(...extras); + for (const child of extras) { + this._elementManager.initElement(child); + } + } + + this._elements = allElements; + + // Force reflow so the browser paints the hidden state before IO fires. + // Without this, elements already in-viewport never transition because + // the "from" state was never rendered. + void document.body.offsetHeight; + + for (const el of allElements) { + if (!el.classList.contains("jos")) continue; + if (el.dataset.jos_anchor) { + this._observerManager.observeAnchor(el); + } else { + this._observerManager.observe(el); + } + } + + this._elementManager.processStartVisible(); + + // Immediately start tracking anchor-to-anchor elements (persistent, not viewport-gated) + for (const el of allElements) { + if (el.dataset.jos_scroll && el.dataset.jos_scroll !== "false" && + el.dataset.jos_scroll_start && el.dataset.jos_scroll_end) { + this._scrollTracker.track(el); + } + } + } + + _teardownObservers() { + if (this._observerManager) { + this._observerManager.disconnectAll(); + } + } + + _teardownElements(state) { + if (state !== -1 && this._elementManager) { + this._elementManager.unsetElements(this._elements, state); + } + this._teardownObservers(); + } + + _printDebugInfo() { + this.version(); + console.log("[JOS] Config:", { ...this._config }); + console.log(`[JOS] ${this._elements.length} elements`); + } + } + + /** + * JOS - JavaScript On Scroll Animation Library + * + * Entry point. Creates and exports the singleton JOS instance. + */ + + const instance = new JOS(); + + // UMD-style export + if (typeof module !== "undefined" && typeof module.exports !== "undefined") { + module.exports = instance; + } else if (typeof define === "function" && define.amd) { + define([], () => instance); + } else if (typeof window !== "undefined") { + window.JOS = instance; + } + + return instance; + +})); diff --git a/dist/jos.min.css b/dist/jos.min.css index a3e6706..b81291c 100644 --- a/dist/jos.min.css +++ b/dist/jos.min.css @@ -1 +1 @@ -.jos,.jos-anchor{transition:.4s ease-in-out}.jos-anchor{opacity:0}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important} \ No newline at end of file +.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite alternate-reverse}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite alternate-reverse}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play{animation:jos-grow-play 1s infinite alternate}.jos-shrink-play{animation:jos-grow-play 1s infinite alternate-reverse}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-stretch-play{animation:jos-stretch-play .7s infinite alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} \ No newline at end of file diff --git a/dist/jos.min.js b/dist/jos.min.js index 4a143bb..9357497 100644 --- a/dist/jos.min.js +++ b/dist/jos.min.js @@ -1 +1,2 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var e=s.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:.4s ease-in-out}.jos-anchor{opacity:0}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}");const JOS=new class{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.2 (Minified)";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){}debugger(t=0){if(0===t&&this.debugMode){this.version();let t={};for(let s of Object.keys(this))"function"!=typeof this[s]&&(t[s]=this[s])}}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let e=t[0],a=e.target;document.querySelectorAll("[data-jos_anchor='#"+a.id+"']").forEach((t=>{let a=t.dataset.jos_animation,o=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}a&&(t.classList.remove("jos-"+a),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),(null!=t.dataset.jos_once||"false"!=t.dataset.jos_once)&&("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=o&&t.classList.add("jos-"+o))}else(void 0===t.dataset.jos_scrolldirection||"down"===t.dataset.jos_scrolldirection||"none"===t.dataset.jos_scrolldirection)&&(t.classList.add("jos-"+a),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};rand=t=>Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:"number"==typeof t?t%1!=0?Math.random()*t:Math.floor(Math.random()*t):Math.random();callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;let s=this.default_rootMargin,e=window.innerHeight,a=t=>{let a=t.dataset.jos_rootmargin||s,o=a.split(" ").map(parseFloat),i=e*o[0]/100,r=e*o[2]/100;t.jos={rootMargin:a,rootMarginValues:o,topMargin:i,bottomMargin:r};let n=t.getBoundingClientRect(),l=n.top-t.jos.topMargin,d=n.bottom-t.jos.bottomMargin,c=n.top/e,u=l/(e-t.jos.topMargin-t.jos.bottomMargin),f=0;f=u<=0?0:u>=100?1:u,t.jos={elementRect:n,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:u,scrollProgress:f},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(a)}};callbackRouter=(t,s,e=1)=>{if(this.disable)return;let a=t[0],o=a.target,i=o.dataset.jos_animation,r=o.dataset.jos_animationinverse,n=1;if(n=a.boundingClientRect.top<0?0:1,a.isIntersecting){if("false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter.push(o),this.callbackScroller(this.scrollEnter)),null!=o.dataset.jos_counter){let t=parseInt(o.dataset.jos_counter);t++,o.dataset.jos_counter=t}"false"==o.dataset.jos_mirror&&o.classList.remove("jos-no-mirror"),i&&(o.classList.remove("jos-"+i),null!=o.dataset.jos_invoke&&window[o.dataset.jos_invoke](o),(null!=o.dataset.jos_once||"false"!=o.dataset.jos_once)&&("true"==o.dataset.jos_once||o.dataset.jos_counter>=o.dataset.jos_once)&&s.unobserve(o)),null!=r&&o.classList.add("jos-"+r)}else(void 0===o.dataset.jos_scrolldirection||1===n&&"down"===o.dataset.jos_scrolldirection||0===n&&"up"===o.dataset.jos_scrolldirection||"none"===o.dataset.jos_scrolldirection)&&(o.classList.toggle("jos-no-mirror","false"==o.dataset.jos_mirror),o.classList.add("jos-"+i),null!=r&&o.classList.remove("jos-"+r),void 0!==o.dataset.jos_invoke_out&&window[o.dataset.jos_invoke_out](o)),"false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==o.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=e=>{let a=e.dataset.jos_once||this.default_once,o=e.dataset.jos_animation||this.default_animation,i=e.dataset.jos_animationinverse||this.default_animationinverse,r=e.dataset.jos_timingFunction||this.default_timingFunction,n=e.dataset.jos_duration||this.default_duration,l=e.dataset.jos_delay||this.default_delay,d=e.dataset.jos_mirror||this.default_mirror;if(e.classList.contains("jos_disabled")&&(e.classList.remove("jos_disabled"),e.classList.add("jos")),a&&("true"==a||/^\d+$/.test(a))?e.setAttribute("data-jos_once",a):e.setAttribute("data-jos_once",this.default_once?"1":"false"),e.dataset.jos_stagger){let a=this.default_delay,o=this.default_duration,i=this.once,r=this.mirror,n=this.scrolldirection,l=this.rootMargin,d=this.animationinverse;if(e.id||(e.id=Math.random().toString(36).substring(7)),Array.from(e.children).forEach(((c,u)=>{if(!c.classList.contains("jos")){c.classList.add("jos"),c.id||(c.id=`${e.id}_${u}`);let f=e.dataset.jos_stagger,j=e.dataset.jos_stagger_delay||a,_=e.dataset.jos_stagger_seq||0,h=e.dataset.jos_stagger_duration||o,m=e.dataset.jos_stagger_once||i,p=e.dataset.jos_staggerinverse||d,g=e.dataset.jos_stagger_mirror||r,b=e.dataset.jos_stagger_startVisible,v=e.dataset.jos_stagger_scrolldirection||n,y=e.dataset.jos_stagger_rootmargin||l;if(e.dataset.jos_stagger_anchor||c.dataset.jos_anchor){let t="true"===e.dataset.jos_stagger_anchor?"#"+e.id:e.dataset.jos_stagger_anchor;c.setAttribute("data-jos_anchor",t)}c.setAttribute("data-jos_animation",f),p&&c.setAttribute("data-jos_animationinverse",p),c.setAttribute("data-jos_duration",h);let x=parseFloat(_*u+j);c.setAttribute("data-jos_delay",x),c.setAttribute("data-jos_once",m),"false"===g&&c.setAttribute("data-jos_mirror","false"),b&&t.push(c),v&&c.setAttribute("data-jos_scrolldirection",v),y&&c.setAttribute("data-jos_rootmargin",y),e.dataset.jos_stagger_scroll&&c.setAttribute("data-jos_scroll",e.dataset.jos_stagger_scroll),e.dataset.jos_stagger_timingFunction&&c.setAttribute("data-jos_timingFunction",e.dataset.jos_stagger_timingFunction),e.dataset.jos_stagger_invoke&&c.setAttribute("data-jos_invoke",e.dataset.jos_stagger_invoke),e.dataset.jos_stagger_invoke_out&&c.setAttribute("data-jos_invoke_out",e.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,c],s(c)}})),!e.dataset.jos_animation)return void e.classList.remove("jos")}e.setAttribute("data-jos_animation",o),i&&e.setAttribute("data-jos_animationinverse",i),r&&e.setAttribute("data-jos_timingFunction",r),"false"==d&&e.setAttribute("data-jos_mirror",d),n&&(e.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),l&&(e.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),e.setAttribute("data-jos_counter","0"),e.classList.add("jos-"+o),(e.dataset.jos_startvisible||this.default_startVisible)&&t.push(e),this.default_scrolldirection&&e.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c=[e.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],e.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],e.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],e.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),u={rootMargin:c,threshold:e.dataset.jos_threshold||this.default_threshold,passive:e.dataset.jos_passive||this.default_passive};if(e.dataset.jos_anchor){let t=new IntersectionObserver(this.callbackRouter_anchor,u);this.observers.push(t),t.observe(document.getElementById(e.dataset.jos_anchor.substring(1)))}else{let t=new IntersectionObserver(this.callbackRouter,u);this.observers.push(t),t.observe(e)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){let t=document.createElement("style");document.head.appendChild(t);let s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";for(let t of(s.insertRule(".jos {transition: "+e+";}"),this.setRange))s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:a,timingFunction:o,threshold:i,startVisible:r,scrolldirection:n,intersectionRatio:l,duration:d,mirror:c,delay:u,debugMode:f,disable:j,scrollProgressDisable:_,rootMargin:h,rootMarginTop:m,rootMarginBottom:p}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=a||this.default_animationinverse,this.default_timingFunction=o||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=u||this.default_delay,this.debugMode=f||this.debugMode,null!=j&&(this.disable=j),this.scrollProgressDisable=_||this.scrollProgressDisable,this.default_rootMargin=h||`${m||"-10%"} 0% ${p||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){for(let s in this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0,this)this.hasOwnProperty(s)&&"function"!=typeof this[s]&&(this[s]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}};"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).JOS=e()}(this,function(){"use strict";const t=Object.freeze({once:!1,animation:"fade",animationInverse:null,timingFunction:"ease-in-out",threshold:0,duration:.4,delay:0,rootMargin:"-10% 0% -40% 0%",startVisible:null,scrollDirection:null,mirror:null,passive:!0,disable:!1,debugMode:!1,scrollProgressDisable:!1});function e(t,e,s){const o=t.dataset[e];return void 0!==o?o:s}function s(t,e,s){t.dataset[e]=s}function o(t,e){e&&t.classList.add(e)}function i(t,e){e&&t.classList.remove(e)}function n(t,e){return t.classList.contains(e)}function r(t,e){return Array.from(document.querySelectorAll(t))}let a=0;class ElementManager{constructor(t){this._config=t,this._durationSet=new Set,this._delaySet=new Set,this._startVisibleQueue=[]}get durationSet(){return this._durationSet}get delaySet(){return this._delaySet}initElement(t){const r=this._config,a=[];t._josState=void 0,t._josCooldown=!1,n(t,"jos_disabled")&&(i(t,"jos_disabled"),o(t,"jos"));const l=e(t,"jos_once")||r.once,d=e(t,"jos_animation")||r.animation,c=e(t,"jos_animationinverse")||r.animationInverse,h=e(t,"jos_timingfunction")||e(t,"jos_timingFunction")||r.timingFunction,_=e(t,"jos_duration")||r.duration,p=e(t,"jos_delay")||r.delay,g=e(t,"jos_mirror")||r.mirror;if(l&&("true"===l||/^\d+$/.test(String(l)))?s(t,"jos_once",String(l)):s(t,"jos_once",r.once?"1":"false"),t.dataset.jos_stagger){const e=this._initStagger(t);if(a.push(...e),!t.dataset.jos_animation)return i(t,"jos"),a}s(t,"jos_animation",d),c&&s(t,"jos_animationinverse",c),h&&s(t,"jos_timingfunction",h),"false"===g&&s(t,"jos_mirror",g),_&&(s(t,"jos_duration",_),this._durationSet.add(parseFloat(_))),p&&(s(t,"jos_delay",p),this._delaySet.add(parseFloat(p))),s(t,"jos_counter","0"),o(t,`jos-${d}`);const u=t.dataset.jos_startvisible;return(void 0!==u&&"false"!==u&&null!==u||void 0===u&&r.startVisible)&&this._startVisibleQueue.push(t),r.scrollDirection&&!t.dataset.jos_scrolldirection&&s(t,"jos_scrolldirection",r.scrollDirection),a}_initStagger(t){const e=this._config,i=[];t.id||(t.id="jos-stagger"+"_"+ ++a+"_"+(36e4*Math.random()|0).toString(36));const r=t.children,l=t.dataset.jos_stagger,d=parseFloat(t.dataset.jos_stagger_delay||e.delay),c=parseFloat(t.dataset.jos_stagger_seq||0),h=t.dataset.jos_stagger_duration||e.duration,_=t.dataset.jos_stagger_once||e.once,p=t.dataset.jos_staggerinverse||e.animationInverse,g=t.dataset.jos_stagger_mirror||e.mirror,u=t.dataset.jos_stagger_startVisible,m=t.dataset.jos_stagger_scrolldirection||e.scrollDirection,b=t.dataset.jos_stagger_rootmargin||e.rootMargin;for(let e=0;e{for(let e=0;e{i(s,`jos-${s.dataset.jos_animation}`)},n)}})}unsetElements(t,e){if(t)for(let s=0;sthis._handleIntersection(t,s),{rootMargin:e,threshold:parseFloat(t.dataset.jos_threshold||this._config.threshold)});this._observers.push(s),s.observe(t)}observeAnchor(t){const e=t.dataset.jos_anchor,s=(o=e,document.getElementById("#"===o.charAt(0)?o.slice(1):o));var o;if(!s)return void this._config.debugMode;const i=this._computeRootMargin(t),n=new IntersectionObserver(t=>this._handleAnchorIntersection(t,n),{rootMargin:i,threshold:parseFloat(t.dataset.jos_threshold||this._config.threshold)});this._observers.push(n),n.observe(s)}disconnectAll(){for(let t=0;t=Math.abs(i)?o>=0?"down":"up":i>=0?"right":"left"}_getCooldownMs(t){var e=parseFloat(t.dataset.jos_duration||this._config.duration)||.4;return Math.max(this._minCooldownMs,1e3*e)}_shouldRespond(t,e){const s=t.dataset.jos_scrolldirection;return!s||"none"===s||s===e}_handleIntersection(t,e){if(this._config.disable)return;const s=t[0],o=s.target,i=o.dataset.jos_animation,n=o.dataset.jos_animationinverse,r=this._getScrollDirection(s);s.isIntersecting?this._onEnter(o,i,n,e):this._onLeave(o,i,n,r)}_handleAnchorIntersection(t,e){if(this._config.disable)return;const s=t[0],o=s.target,i=r(`[data-jos_anchor='#${o.id}']`),n=this._getScrollDirection(s);for(let t=0;t{t._josCooldown=!1},this._getCooldownMs(t)),t.dataset.jos_scroll&&"false"!==t.dataset.jos_scroll&&this._scrollTracker.track(t),this._incrementCounter(t),"false"===t.dataset.jos_mirror&&i(t,"jos-no-mirror"),e&&i(t,`jos-${e}`),s&&i(t,`jos-${s}`),this._invokeCallback(t,"jos_invoke"),e&&this._handleOnce(t,o))}_onLeave(t,e,s,i){if("out"!==t._josState&&!t._josCooldown&&this._shouldRespond(t,i)){var n=t._josState;t._josState="out",t._josCooldown=!0,setTimeout(()=>{t._josCooldown=!1},this._getCooldownMs(t)),function(t,e,s){t.classList.toggle(e,s)}(t,"jos-no-mirror","false"===t.dataset.jos_mirror),s&&"in"===n?o(t,`jos-${s}`):e&&o(t,`jos-${e}`),this._invokeCallback(t,"jos_invoke_out"),t.dataset.jos_scroll&&"false"!==t.dataset.jos_scroll&&(t.dataset.jos_scroll_start||t.dataset.jos_scroll_end||this._scrollTracker.untrack(t))}}_onAnchorEnter(t,e,s,o,n){if("in"!==t._josState&&!t._josCooldown&&(t._josState="in",t._josCooldown=!0,setTimeout(()=>{t._josCooldown=!1},this._getCooldownMs(t)),this._incrementCounter(t),e&&i(t,`jos-${e}`),s&&i(t,`jos-${s}`),this._invokeCallback(t,"jos_invoke"),e)){const e=t.dataset.jos_once;if(e&&("true"===e||parseInt(t.dataset.jos_counter)>=parseInt(e))){r(`[data-jos_anchor='#${n.id}']`).length<2?o.unobserve(n):t.removeAttribute("data-jos_anchor")}}}_onAnchorLeave(t,e,s,i){if("out"!==t._josState&&!t._josCooldown&&this._shouldRespond(t,i)){var n=t._josState;t._josState="out",t._josCooldown=!0,setTimeout(()=>{t._josCooldown=!1},this._getCooldownMs(t)),s&&"in"===n?o(t,`jos-${s}`):e&&o(t,`jos-${e}`),this._invokeCallback(t,"jos_invoke_out")}}_incrementCounter(t){t.dataset.jos_counter=(parseInt(t.dataset.jos_counter||0)+1).toString()}_handleOnce(t,e){const s=t.dataset.jos_once;s&&"false"!==s&&("true"===s||parseInt(t.dataset.jos_counter)>=parseInt(s))&&e.unobserve(t)}_invokeCallback(t,e){const s=t.dataset[e];if(!s)return;const o="undefined"!=typeof window&&window[s];if("function"==typeof o)try{o(t)}catch(t){this._config.debugMode}}}class ScrollTracker{constructor(){this._elements=new Set,this._ticking=!1,this._onScroll=this._onScroll.bind(this),this._update=this._update.bind(this),this._bound=!1,this._config=null}setConfig(t){this._config=t}track(t){this._elements.add(t),this._bound||(document.addEventListener("scroll",this._onScroll,{passive:!0}),window.addEventListener("resize",this._onScroll,{passive:!0}),this._bound=!0),this._ticking||(this._ticking=!0,requestAnimationFrame(this._update))}untrack(t){this._elements.delete(t),this._bound&&0===this._elements.size&&(document.removeEventListener("scroll",this._onScroll),window.removeEventListener("resize",this._onScroll),this._bound=!1)}destroy(){this._elements.clear(),this._bound&&(document.removeEventListener("scroll",this._onScroll),window.removeEventListener("resize",this._onScroll),this._bound=!1)}_onScroll(){this._ticking||(this._ticking=!0,requestAnimationFrame(this._update))}_update(){this._ticking=!1;var t=window.innerHeight,e=window.innerWidth,s=this._config,o=s?s.rootMargin:"0% 0% 0% 0%";for(var i of this._elements){var n=i.dataset.jos_scroll;if(n&&"false"!==n){var r,a,l=i.dataset.jos_scroll_start,d=i.dataset.jos_scroll_end;if(l&&d){var c=document.getElementById("#"===l.charAt(0)?l.slice(1):l),h=document.getElementById("#"===d.charAt(0)?d.slice(1):d);if(c&&h){var _=c.getBoundingClientRect(),p=h.getBoundingClientRect(),g=_.top+.5*_.height,u=.5*t,m=p.top+.5*p.height-g;r=Math.abs(m)>.5?(u-g)/m:0}else r=0;r=r<0?0:r>1?1:r,a=c?c.getBoundingClientRect().top/t:0}else if("x"===(i.dataset.jos_scroll_axis||"y")){var b=(i.dataset.jos_rootmargin||o).trim().split(/\s+/),f=this._parsePx(b[1]||"0%",e),v=this._parsePx(b[3]||b[1]||"0%",e),j=Math.abs(v),w=e-Math.abs(f),x=i.getBoundingClientRect(),y=w-j;r=(r=y>0?(w-x.left)/y:0)<0?0:r>1?1:r,a=x.left/e}else{var M=(i.dataset.jos_rootmargin||o).trim().split(/\s+/),S=this._parsePx(M[0]||"0%",t),C=this._parsePx(M[2]||M[0]||"0%",t),E=Math.abs(S),k=t-Math.abs(C),L=i.getBoundingClientRect(),O=k-E;r=(r=O>0?(k-L.top)/O:0)<0?0:r>1?1:r,a=L.top/t}i.jos={scrollProgress:r,scrollProgressReverse:1-r,windowScrollProgress:a,rootScrollProgress:r,percent:Math.round(100*r)};var T=i.style,I=r.toFixed(4),F=(1-r).toFixed(4);if(T.setProperty("--jos_scroll",I),T.setProperty("--jos_scroll_reverse",F),T.setProperty("--jos_scroll_perc",(100*r).toFixed(1)+"%"),T.setProperty("--jos_scroll_deg",(360*r).toFixed(1)+"deg"),T.setProperty("--jos_windowScroll",a.toFixed(4)),T.setProperty("--jos_windowScroll_reverse",(1-a).toFixed(4)),T.setProperty("--jos_rootScroll",I),T.setProperty("--jos_rootScroll_reverse",F),"undefined"!=typeof window&&"function"==typeof window[n])try{window[n](i)}catch(t){}}}}_parsePx(t,e){if(!t)return 0;var s=parseFloat(t);return isNaN(s)?0:t.endsWith("px")?s:t.endsWith("vw")?s*window.innerWidth/100:t.endsWith("vh")?s*window.innerHeight/100:t.endsWith("rem")?s*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16):s*e/100}}class StyleManager{constructor(){this._el=null,this._sheet=null}create(t,e,s){this.destroy();const o=document.createElement("style");o.setAttribute("data-jos",""),document.head.appendChild(o),this._el=o,this._sheet=o.sheet;const i=this._sheet;i.insertRule(".jos-no-mirror { transition: 0s forwards !important; }");const n=`all ${t.duration}s ${t.timingFunction} ${t.delay}s`;i.insertRule(`.jos { transition: ${n}; }`);for(const t of e)i.insertRule(`[data-jos_duration="${t}"] { transition-duration: ${t}s !important; }`);for(const t of s)i.insertRule(`[data-jos_delay="${t}"] { transition-delay: ${t}s !important; }`)}disable(){this._sheet&&(this._sheet.disabled=!0)}destroy(){this._el&&this._el.parentNode&&this._el.parentNode.removeChild(this._el),this._el=null,this._sheet=null}}class DebugOverlay{constructor(){this._container=null,this._active=!1,this._onResize=null,this.onChange=null,this._pcts={top:0,right:0,bottom:0,left:0},this._lines={}}create(t){if(this._active&&this.destroy(),"undefined"!=typeof document){var e=this,s=window.innerHeight,o=window.innerWidth,i=t.rootMargin.trim().split(/\s+/);this._pcts.top=Math.abs(parseFloat(i[0])||0),this._pcts.right=Math.abs(parseFloat(i[1]||i[0])||0),this._pcts.bottom=Math.abs(parseFloat(i[2]||i[0])||0),this._pcts.left=Math.abs(parseFloat(i[3]||i[1]||i[0])||0);var n=document.createElement("div");n.setAttribute("data-jos-debug",""),n.style.cssText="position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:99999;opacity:0;transition:opacity 0.4s;",this._showObserver=null;var r=document.querySelector("[data-jos-debug-after]");r?(this._showObserver=new IntersectionObserver(function(t){t[0].isIntersecting?n.style.opacity="0":n.style.opacity="1"},{threshold:0}),this._showObserver.observe(r)):n.style.opacity="1";var a=this._pcts.top/100*s;this._lines.top=this._makeHLine(a,"top"),n.appendChild(this._lines.top.line);var l=this._pcts.bottom/100*s;this._lines.bottom=this._makeHLine(l,"bottom"),n.appendChild(this._lines.bottom.line);var d=this._pcts.right/100*o;this._lines.right=this._makeVLine(d,"right"),n.appendChild(this._lines.right.line),this._pcts.right<=0&&(this._lines.right.line.style.display="none");var c=this._pcts.left/100*o;this._lines.left=this._makeVLine(c,"left"),n.appendChild(this._lines.left.line),this._pcts.left<=0&&(this._lines.left.line.style.display="none"),document.body.appendChild(n),this._container=n,this._active=!0,this._updateLabels(),this._createAnchorMarkers(n);var h=null,_=0,p=0;document.addEventListener("pointerdown",g),document.addEventListener("pointermove",u),document.addEventListener("pointerup",m),this._cleanupDrag=function(){document.removeEventListener("pointerdown",g),document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",m)},this._onResize=function(){if(e._active){var t=window.innerHeight,s=window.innerWidth;e._lines.top.line.style.top=e._pcts.top/100*t+"px",e._lines.bottom.line.style.bottom=e._pcts.bottom/100*t+"px",e._lines.right.line.style.right=e._pcts.right/100*s+"px",e._lines.left.line.style.left=e._pcts.left/100*s+"px",e._updateAnchorPositions()}},window.addEventListener("resize",this._onResize,{passive:!0}),document.addEventListener("scroll",this._onResize,{passive:!0})}function g(t){var s=t.clientX,o=t.clientY,i=window.innerHeight,n=window.innerWidth,r=e._pcts.top/100*i,a=i-e._pcts.bottom/100*i,l=Math.min(n-6,n-e._pcts.right/100*n),d=Math.max(6,e._pcts.left/100*n);if(Math.abs(o-r)<14)h="top",_=o,p=r;else if(Math.abs(o-a)<14)h="bottom",_=o,p=a;else if(Math.abs(s-d)<14)h="left",_=s,p=e._pcts.left/100*n;else{if(!(Math.abs(s-l)<14))return;h="right",_=s,p=n-e._pcts.right/100*n}t.preventDefault();var c="top"===h||"bottom"===h;document.body.style.cursor=c?"ns-resize":"ew-resize",document.body.style.userSelect="none"}function u(t){if(h){var s=window.innerHeight,o=window.innerWidth;if("top"===h){var i=t.clientY-_,n=Math.max(0,Math.min(50,(p+i)/s*100));e._pcts.top=n,e._lines.top.line.style.top=n/100*s+"px"}else if("bottom"===h){var r=t.clientY-_,a=s-(p+r),l=Math.max(0,Math.min(50,a/s*100));e._pcts.bottom=l,e._lines.bottom.line.style.bottom=l/100*s+"px"}else if("left"===h){var d=t.clientX-_,c=Math.max(0,Math.min(50,(p+d)/o*100));e._pcts.left=c,e._lines.left.line.style.left=c/100*o+"px",e._lines.left.line.style.display=c>0?"":"none"}else if("right"===h){var g=t.clientX-_,u=o-(p+g),m=Math.max(0,Math.min(50,u/o*100));e._pcts.right=m,e._lines.right.line.style.right=m/100*o+"px",e._lines.right.line.style.display=m>0?"":"none"}e._updateLabels()}}function m(){h&&(h=null,document.body.style.cursor="",document.body.style.userSelect="",e.onChange&&e.onChange(e._pcts.top,e._pcts.right,e._pcts.bottom,e._pcts.left))}}_makeHLine(t,e){var s="top"===e,o=document.createElement("div");o.style.cssText="position:absolute;left:0;right:0;height:2px;background:rgba(99,102,241,0.25);border-"+(s?"bottom":"top")+":1px dashed rgba(99,102,241,0.5);cursor:ns-resize;pointer-events:auto;padding:5px 0;margin:-5px 0;background-clip:content-box;"+(s?"top:"+t+"px;":"bottom:"+t+"px;");var i=document.createElement("div");i.style.cssText="position:absolute;right:12px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:3px;"+(s?"top:6px;":"bottom:6px;");var n=document.createElement("div");n.style.cssText="font:11px/1.3 monospace;color:rgba(99,102,241,0.85);background:rgba(9,9,11,0.9);padding:2px 6px;border-radius:3px;white-space:nowrap;";var r=document.createElement("div");return r.style.cssText="width:36px;height:8px;border-radius:4px;background:rgba(99,102,241,0.6);box-shadow:0 0 8px rgba(99,102,241,0.7),0 0 16px rgba(99,102,241,0.3);",i.appendChild(n),i.appendChild(r),o.appendChild(i),{line:o,label:n,handle:r}}_makeVLine(t,e){var s="left"===e,o=document.createElement("div");o.style.cssText="position:absolute;top:0;bottom:0;width:2px;background:rgba(99,102,241,0.25);border-"+(s?"right":"left")+":1px dashed rgba(99,102,241,0.5);cursor:ew-resize;pointer-events:auto;padding:0 5px;margin:0 -5px;background-clip:content-box;"+(s?"left:"+t+"px;":"right:"+t+"px;");var i=document.createElement("div");i.style.cssText="position:absolute;bottom:24px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:3px;"+(s?"left:6px;":"right:6px;");var n=document.createElement("div");n.style.cssText="font:11px/1.3 monospace;color:rgba(99,102,241,0.85);background:rgba(9,9,11,0.9);padding:2px 6px;border-radius:3px;white-space:nowrap;";var r=document.createElement("div");return r.style.cssText="width:8px;height:36px;border-radius:4px;background:rgba(99,102,241,0.6);box-shadow:0 0 8px rgba(99,102,241,0.7),0 0 16px rgba(99,102,241,0.3);",i.appendChild(n),i.appendChild(r),o.appendChild(i),{line:o,label:n,handle:r}}_createAnchorMarkers(t){this._anchorEls=[];for(var e=document.querySelectorAll("[data-jos_scroll_start][data-jos_scroll_end]"),s=0;s.5?(t-n)/r:0,l=a>0&&a<1,d=Math.round(100*Math.max(0,Math.min(1,a)));s.panel.style.opacity=l?"1":"0",s.fill.style.height=d+"%",s.badge.textContent=d+"%",s.sLabel.textContent=s.sId.replace(/^#/,""),s.eLabel.textContent=s.eId.replace(/^#/,"")}}_updateLabels(){var t=this._pcts;this._lines.top&&(this._lines.top.label.textContent="top: "+Math.round(t.top)+"%"),this._lines.bottom&&(this._lines.bottom.label.textContent="bottom: "+Math.round(t.bottom)+"%"),this._lines.right&&(this._lines.right.label.textContent="right: "+Math.round(t.right)+"%"),this._lines.left&&(this._lines.left.label.textContent="left: "+Math.round(t.left)+"%")}destroy(){this._container&&this._container.parentNode&&this._container.parentNode.removeChild(this._container),this._onResize&&(window.removeEventListener("resize",this._onResize),document.removeEventListener("scroll",this._onResize)),this._cleanupDrag&&this._cleanupDrag(),this._showObserver&&(this._showObserver.disconnect(),this._showObserver=null),this._container=null,this._active=!1,this._lines={},this._anchorEls=null}}const l=new class{static version="1.0.0-beta.1";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";constructor(){this._config={...t},this._elements=[],this._scrollTracker=new ScrollTracker,this._observerManager=null,this._elementManager=null,this._styleManager=new StyleManager,this._debugOverlay=new DebugOverlay,this._initialized=!1}init(e={}){this._initialized&&(this._teardownObservers(),this._scrollTracker.destroy(),this._styleManager.destroy(),this._debugOverlay.destroy(),this._elements=[]),this._config={...t},this._applyOptions(e),this._config.disable||(this._collectElements(),this._config.debugMode&&this._printDebugInfo(),this._setup(),this._styleManager.create(this._config,this._elementManager.durationSet,this._elementManager.delaySet),this._config.debugMode&&(this._debugOverlay.create(this._config),this._debugOverlay.onChange=(t,e,s,o)=>{var i=Math.round(t)+"% "+Math.round(e)+"% "+Math.round(s)+"% "+Math.round(o)+"%";this.init({...this._config,rootMargin:i})}),this._initialized=!0)}start(t=0){return-1!==t&&(this.stop(),this._setup()),this._config.disable=!1,"Started"}stop(t=0){const e=0===t?1:1===t?0:t;return this._config.disable=!0,-1!==e&&this._teardownElements(e),"Stopped"}refresh(){return this._teardownObservers(),this._collectElements(),this._setup(),"Refreshed"}destroy(t=0){return this._teardownObservers(),this._scrollTracker.destroy(),this._debugOverlay.destroy(),this._elements=[],1===t&&this._styleManager.destroy(),this._initialized=!1,"Destroyed"}version(){}_applyOptions(t){const e=this._config;if(e.once=t.once??e.once,e.animation=t.animation??e.animation,e.animationInverse=t.animationInverse??t.animationinverse??e.animationInverse,e.timingFunction=t.timingFunction??e.timingFunction,e.threshold=t.threshold??e.threshold,e.duration=t.duration??e.duration,e.delay=t.delay??e.delay,e.startVisible=t.startVisible??e.startVisible,e.scrollDirection=t.scrollDirection??t.scrolldirection??e.scrollDirection,e.mirror=t.mirror??e.mirror,e.passive=t.passive??e.passive,e.debugMode=t.debugMode??e.debugMode,e.scrollProgressDisable=t.scrollProgressDisable??e.scrollProgressDisable,void 0!==t.disable&&(e.disable=t.disable),t.rootMargin)e.rootMargin=t.rootMargin;else if(t.rootMarginTop||t.rootMarginBottom){const s=t.rootMarginTop||"-10%",o=t.rootMarginBottom||"-40%";e.rootMargin=`${s} 0% ${o} 0%`}}_collectElements(){this._elements=r(".jos")}_setup(){this._elementManager=new ElementManager(this._config),this._scrollTracker.setConfig(this._config),this._observerManager=new ObserverManager(this._config,this._scrollTracker);const t=[...this._elements];for(const e of this._elements){const s=this._elementManager.initElement(e);t.push(...s);for(const t of s)this._elementManager.initElement(t)}this._elements=t,document.body.offsetHeight;for(const e of t)e.classList.contains("jos")&&(e.dataset.jos_anchor?this._observerManager.observeAnchor(e):this._observerManager.observe(e));this._elementManager.processStartVisible();for(const e of t)e.dataset.jos_scroll&&"false"!==e.dataset.jos_scroll&&e.dataset.jos_scroll_start&&e.dataset.jos_scroll_end&&this._scrollTracker.track(e)}_teardownObservers(){this._observerManager&&this._observerManager.disconnectAll()}_teardownElements(t){-1!==t&&this._elementManager&&this._elementManager.unsetElements(this._elements,t),this._teardownObservers()}_printDebugInfo(){this.version()}};return"undefined"!=typeof module&&void 0!==module.exports?module.exports=l:"function"==typeof define&&define.amd?define([],()=>l):"undefined"!=typeof window&&(window.JOS=l),l}); +//# sourceMappingURL=jos.min.js.map diff --git a/dist/v0.3/jos.css b/dist/v0.3/jos.css deleted file mode 100644 index 33a1f36..0000000 --- a/dist/v0.3/jos.css +++ /dev/null @@ -1,225 +0,0 @@ -/* :root{ - -} */ - -.jos { - opacity: 1; - transition: 0.5s; - transition-timing-function: ease-in-out; -} -.jos-fade-default { - opacity: 0; - transform: (0); -} - -.jos-fade { - opacity: 0; -} -.jos-fade-right, -.jos-slide { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left, -.jos-slide-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} - -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); -} -.jos-zoom-out-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0px, -100px); -} -.jos-zoom-out-down { - opacity: 0; - transform: scale(0.8) translate3d(0px, -100px, 0px); -} -.jos-zoom-out-up { - opacity: 0; - transform: scale(0.8) translate3d(0px, 100px, 0px); -} -.jos-zoom-out-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0px, -100px, 0px); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0px, 100px, 0px); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0px, -100px); -} -/* .jos-zoom-right { - opacity: 0; - transform: translateX(-100px) scale(0); -} -.jos-zoom-left { - opacity: 0; - transform: translateX(100px) scale(0); -} */ - -.jos-zoom-up { - opacity: 0; - transform: translateY(50px) scale(0); -} -.jos-zoom-down { - opacity: 0; - transform: translateY(-50px) scale(0); -} - -.jos-flip { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} - -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} -[data-jos_pow="0.1"] { - transform: rotateY(calc(0.1 * 360deg)); -} -[data-jos_pow="0.2"] { - transform: rotateY(calc(0.2 * 360deg)); -} -[data-jos_pow="0.3"] { - transform: rotateY(calc(0.3 * 360deg)); -} -[data-jos_pow="0.4"] { - transform: rotateY(calc(0.4 * 360deg)); -} -[data-jos_pow="0.5"] { - transform: rotateY(calc(0.5 * 360deg)); -} -[data-jos_pow="0.6"] { - transform: rotateY(calc(0.6 * 360deg)); -} -[data-jos_pow="0.7"] { - transform: rotateY(calc(0.7 * 360deg)); -} -[data-jos_pow="0.8"] { - transform: rotateY(calc(0.8 * 360deg)); -} -[data-jos_pow="0.9"] { - transform: rotateY(calc(0.9 * 360deg)); -} -[data-jos_pow="1"] { - transform: rotateY(calc(1 * 360deg)); -} - -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="cubic-bezier"] { - transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1) !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} -[data-jos_timing_function="initial"] { - transition-timing-function: initial !important; -} -[data-jos_timing_function="inherit"] { - transition-timing-function: inherit !important; -} -[data-jos_timing_function="unset"] { - transition-timing-function: unset !important; -} - -[data-jos_duration="0.1"] { - transition-duration: 0.1s !important; -} -[data-jos_duration="0.2"] { - transition-duration: 0.2s !important; -} -[data-jos_duration="0.3"] { - transition-duration: 0.3s !important; -} -[data-jos_duration="0.4"] { - transition-duration: 0.4s !important; -} -[data-jos_duration="0.5"] { - transition-duration: 0.5s !important; -} -[data-jos_duration="0.6"] { - transition-duration: 0.6s !important; -} -[data-jos_duration="0.7"] { - transition-duration: 0.7s !important; -} -[data-jos_duration="0.8"] { - transition-duration: 0.8s !important; -} -[data-jos_duration="0.9"] { - transition-duration: 0.9s !important; -} -[data-jos_duration="1"] { - transition-duration: 1s !important; -} -[data-jos_duration="2"] { - transition-duration: 2s !important; -} -[data-jos_duration="3"] { - transition-duration: 3s !important; -} -[data-jos_duration="4"] { - transition-duration: 4s !important; -} -[data-jos_duration="5"] { - transition: 5s !important; -} diff --git a/dist/v0.3/jos.js b/dist/v0.3/jos.js deleted file mode 100644 index 95369da..0000000 --- a/dist/v0.3/jos.js +++ /dev/null @@ -1,161 +0,0 @@ -onload = () => { - const jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - // jos_css = document.getElementsByClassName("jos"); - let transition_temp = jos_default_duration + "s " + jos_default_type; - // console.log(transition_temp); - jos_stylesheet.insertRule( - ".jos { transition: " + transition_temp + " !important; }" - ); -}; - -let centerWindow = window.innerHeight / 2; - -let jos_default_once = false; // true or false -let jos_default_animation = "fade"; // fade, slide, zoom, rotate -let jos_default_timingFunction = "ease-in-out"; // ease-in-out, ease-in, ease-out, linear -let jos_default_threshold = 0; // 0-1 | higher value for mobile and lower for desktop -let jos_default_duration = 0.4; -let jos_rootMargin_top = "-10%"; //recommended value 10% to -30% -let jos_rootMargin_bottom = "-40%"; //recommended value -10% to -60% -let jos_default_type = "linear"; - -let jos_default_intersectionRatio = intersectionRatio_set(); //0-0.99 -let jos_default_rootMargin = - jos_rootMargin_top + " 0% " + jos_rootMargin_bottom + " 0%"; - -function intersectionRatio_set() { - if (jos_default_threshold == 1) return 0.99; - - return jos_default_threshold; -} - -function fly_in(target, state) { - if (state) { - target.classList.add("fly_in"); - } else { - target.classList.remove("fly_in"); - } -} - -function example() { - // alert("You have invoked custom Scroll-In function !"); - console.log("You have invoked custom Scroll-In function"); -} -function example2() { - // alert("You have invoked custom scroll-Out function !"); - console.log("You have invoked custom scroll-Out function !"); -} -function animation_invoker(target, state) { - let target_jos_animation = target.dataset.jos_animation; - - if (state) { - target.classList.remove("jos-" + target_jos_animation); - // console.log("jos-" + target_jos_animation); - - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - } else { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out != undefined) { - window[target.dataset.jos_invoke_out](target); - } - } -} - -function callbackRouter(entries, observer) { - let entry = entries[0]; - let target = entry.target; - - // console.log(target.dataset.jos_animation, entry.intersectionRatio); - - if (entry.intersectionRatio > jos_default_intersectionRatio) { - if (target.dataset.jos_animation) { - // console.log("Animation-Triggered"); - animation_invoker(target, true); - if (target.dataset.jos_once == "true") { - // target.classList.remove("jos"); - // console.log("Removed-Observer"); - observer.unobserve(target); - } - } - } else { - if (target.dataset.jos_animation) { - // console.log("Animation-Reverting"); - animation_invoker(target, false); - } - } -} - -var options = { - root: null, - rootMargin: jos_default_rootMargin, - threshold: jos_default_threshold, - passive: true, -}; - -// There is another way to implement this, -// by creating an instance of the IntersectionObserver class and create a unique object for every element. -// but this fucks your cpu and performace at the same time, but offers customizability - -const observer = new IntersectionObserver(callbackRouter, options); -const boxes = document.querySelectorAll(".jos"); - -boxes.forEach((box) => { - // observer.observe(box); - - object_class = box.classList; - - object_default_once = box.dataset.jos_once; - object_default_animation = box.dataset.jos_animation; - - if (object_default_once == undefined) { - // alert("JOS: No once specified for this object"); - object_default_once = jos_default_once; - box.setAttribute("data-jos_once", object_default_once); - } - if (object_default_animation == undefined) { - // alert("JOS: No animation specified for this object"); - object_default_animation = jos_default_animation; - box.setAttribute("data-jos_animation", object_default_animation); - } - - // console.log(object_class + "\n" + object_default_animation); - - box.classList.add("jos-" + object_default_animation); - - observer.observe(box); -}); -// alert("JOS Loaded !"); - -console.log( - "JOS: Javascript Object Scroll Animation Library\n" + - "Version: 1.0.0\n" + - "Author: Jesvi Jonathan\n" + - "Github: https://github.com/jesvijonathan/JOS-Animation-Library\n\n" -); -console.log( - "JOS Params:\n" + - "Default Animation: " + - jos_default_animation + - "\n" + - "Default Once: " + - jos_default_once + - "\n" + - "Default Intersection Ratio: " + - jos_default_intersectionRatio + - "\n" + - "Default Threshold: " + - jos_default_threshold + - "\n" + - "Default Duration: " + - jos_default_duration + - "\n" + - "Default Type: " + - jos_default_type + - "\n" + - "Default Root Margin: " + - jos_default_rootMargin -); - -console.log("\nDebug :\n"); diff --git a/dist/v0.5/jos.css b/dist/v0.5/jos.css deleted file mode 100644 index b8309c6..0000000 --- a/dist/v0.5/jos.css +++ /dev/null @@ -1,250 +0,0 @@ -.jos { - opacity: 1; - transition: 0.5s; - transition-timing-function: ease-in-out; -} -.jos-fade-default { - opacity: 0; - transform: (0); -} -.jos-fade { - opacity: 0; -} -.jos-fade-right, -.jos-slide { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left, -.jos-slide-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); - animation-delay: 0; -} -.jos-zoom-out-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0, -100px); -} -.jos-zoom-out-down { - opacity: 0; - transform: scale(0.8) translate3d(0, -100px, 0); -} -.jos-zoom-out-up { - opacity: 0; - transform: scale(0.8) translate3d(0, 100px, 0); -} -.jos-zoom-out-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0, -100px); -} -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0, -100px, 0); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0, 100px, 0); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0, -100px); -} -.jos-zoom-up { - opacity: 0; - transform: translateY(50px) scale(0); -} -.jos-zoom-down { - opacity: 0; - transform: translateY(-50px) scale(0); -} -.jos-flip { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} -[data-jos_pow="0.1"] { - transform: rotateY(calc(0.1 * 360deg)); -} -[data-jos_pow="0.2"] { - transform: rotateY(calc(0.2 * 360deg)); -} -[data-jos_pow="0.3"] { - transform: rotateY(calc(0.3 * 360deg)); -} -[data-jos_pow="0.4"] { - transform: rotateY(calc(0.4 * 360deg)); -} -[data-jos_pow="0.5"] { - transform: rotateY(calc(0.5 * 360deg)); -} -[data-jos_pow="0.6"] { - transform: rotateY(calc(0.6 * 360deg)); -} -[data-jos_pow="0.7"] { - transform: rotateY(calc(0.7 * 360deg)); -} -[data-jos_pow="0.8"] { - transform: rotateY(calc(0.8 * 360deg)); -} -[data-jos_pow="0.9"] { - transform: rotateY(calc(0.9 * 360deg)); -} -[data-jos_pow="1"] { - transform: rotateY(calc(1 * 360deg)); -} -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="cubic-bezier"] { - transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1) !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} -[data-jos_timing_function="initial"] { - transition-timing-function: initial !important; -} -[data-jos_timing_function="inherit"] { - transition-timing-function: inherit !important; -} -[data-jos_timing_function="unset"] { - transition-timing-function: unset !important; -} -[data-jos_duration="0.1"] { - transition-duration: 0.1s !important; -} -[data-jos_duration="0.2"] { - transition-duration: 0.2s !important; -} -[data-jos_duration="0.3"] { - transition-duration: 0.3s !important; -} -[data-jos_duration="0.4"] { - transition-duration: 0.4s !important; -} -[data-jos_duration="0.5"] { - transition-duration: 0.5s !important; -} -[data-jos_duration="0.6"] { - transition-duration: 0.6s !important; -} -[data-jos_duration="0.7"] { - transition-duration: 0.7s !important; -} -[data-jos_duration="0.8"] { - transition-duration: 0.8s !important; -} -[data-jos_duration="0.9"] { - transition-duration: 0.9s !important; -} -[data-jos_duration="1"] { - transition-duration: 1s !important; -} -[data-jos_duration="2"] { - transition-duration: 2s !important; -} -[data-jos_duration="3"] { - transition-duration: 3s !important; -} -[data-jos_duration="4"] { - transition-duration: 4s !important; -} -[data-jos_duration="5"] { - transition: 5s !important; -} - -[data-jos_delay="0.1"] { - transition-delay: 0.1s !important; -} -[data-jos_delay="0.2"] { - transition-delay: 0.2s !important; -} -[data-jos_delay="0.3"] { - transition-delay: 0.3s !important; -} -[data-jos_delay="0.4"] { - transition-delay: 0.4s !important; -} -[data-jos_delay="0.5"] { - transition-delay: 0.5s !important; -} -[data-jos_delay="0.6"] { - transition-delay: 0.6s !important; -} -[data-jos_delay="0.7"] { - transition-delay: 0.7s !important; -} -[data-jos_delay="0.8"] { - transition-delay: 0.8s !important; -} -[data-jos_delay="0.9"] { - transition-delay: 0.9s !important; -} -[data-jos_delay="1"] { - transition-delay: 1s !important; -} -[data-jos_delay="2"] { - transition-delay: 2s !important; -} -[data-jos_delay="3"] { - transition-delay: 3s !important; -} -[data-jos_delay="4"] { - transition-delay: 4s !important; -} -[data-jos_delay="5"] { - transition-delay: 5s !important; -} diff --git a/dist/v0.5/jos.js b/dist/v0.5/jos.js deleted file mode 100644 index e03df1a..0000000 --- a/dist/v0.5/jos.js +++ /dev/null @@ -1,473 +0,0 @@ -class jos { - default_once = false; - default_animation = "fade"; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_passive = true; - - version = "0.5 (Beta)"; - author = "Jesvi Jonathan"; - github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - debug = false; - disable = false; - jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - - boxes = document.querySelectorAll(".jos"); - - constructor() { - // will be completed later - } - - // refer tmp.js - - debugLogger(type = 0) { - if (type == 0 || type == 1) { - console.info( - "JOS " + - ("[" + Date.now() + "] [INFO]\n") + - " : Javascript On Scroll Animation Library\n" + - (" | Version: " + this.version + "\n") + - (" | Author: " + this.author + "\n") + - (" | Github: " + this.github + "\n\n") - ); - } - if (type == 0 || type == 2) { - console.info( - "JOS " + - ("[" + Date.now() + "] [INFO]\n") + - " : Params \n" + - (" | Global Animation: " + this.default_animation + "\n") + - (" | Global Duration: " + this.default_duration + "\n") + - (" | Global Timing Function: " + - this.default_timingFunction + - "\n") + - (" | Global Delay: " + this.default_delay + "\n") + - (" | Global Once: " + this.default_once + "\n") + - (" | Global Intersection Ratio: " + - this.default_intersectionRatio + - "\n") + - (" | Global Threshold: " + this.default_threshold + "\n") + - (" | Global Root Margin: " + this.default_rootMargin + "\n") + - (" | Passive: " + this.default_passive + "\n") + - (" | Debug Mode: " + this.debug + "\n") + - "\n" - ); - } - - console.info( - "JOS " + - ("[" + Date.now() + "] [INFO]\n") + - " : Debugging (Enable Verbose Mode to see more info)\n" + - "\n" - ); - } - - // animationInvoker(target, state) { - // let target_jos_animation = target.dataset.jos_animation; - // console.log("jos-" + target_jos_animation); - - // if (state) { - // } else { - // } - // } - - callbackRouter = (entries, observer) => { - if (this.disable == true) { - return; - } - let entry = entries[0]; - let target = entry.target; - // debug info - let text_once = ""; - let text_invoke = ""; - let state = ""; - let text_target = ""; - let text_duration = ""; - let text_timingFunction = ""; - let text_delay = ""; - let text_iterationCount = ""; - - // console.log(target); - let target_jos_animation = target.dataset.jos_animation; - - if (entry.intersectionRatio > this.default_intersectionRatio) { - state = "Enter"; - // console.log("jos-" + target_jos_animation); - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - text_iterationCount = "\n | Counter : " + counter_value; - } - if (target_jos_animation) { - // console.log("Animation-Triggered"); - target.classList.remove("jos-" + target_jos_animation); - - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - text_invoke = "\n | Invoked : " + target.dataset.jos_invoke; - } - - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - // target.classList.remove("jos"); - // console.log("Removed-Observer"); - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - text_once = "\n | Once : Removed Observer (1)"; - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - text_once = - "\n | Once : Removed Observer (" + - target.dataset.jos_once + - ")"; - } - } - } - - // iiterate the counter for the element - } else { - state = "Exit"; - // console.log("Animation-Removed"); - target.classList.add("jos-" + target_jos_animation); - - if (target.dataset.jos_invoke_out != undefined) { - window[target.dataset.jos_invoke_out](target); - text_invoke = "\n | Invoked : " + target.dataset.jos_invoke_out; - } - // console.log("jos-" + target_jos_animation); - } - - if (target.id != "") { - text_target = "\n | ID : " + target.id; - } - - if (target.dataset.jos_duration != undefined) { - text_duration = "\n | Duration : " + target.dataset.jos_duration + "s"; - } - if (target.dataset.jos_timingFunction != undefined) { - text_timingFunction = - "\n | Timing Function : " + target.dataset.jos_timingFunction; - } - - if (target.dataset.jos_delay != undefined) { - text_delay = "\n | Delay : " + target.dataset.jos_delay + "s"; - } - if (this.debug == true) { - console.debug( - "JOS " + - ("[" + Date.now() + "] [DEBUG]\n") + - " : On-" + - state + - " (" + - target.tagName + - ") Info" + - text_target + - "\n | Class : (" + - target.className + - ")\n | Intersection Ratio : (" + - entry.intersectionRatio + - " ~ " + - this.default_intersectionRatio + - ")\n | Animation : " + - target.dataset.jos_animation + - text_duration + - text_delay + - text_timingFunction + - text_once + - text_iterationCount + - text_invoke - ); - } - }; - - animationInit() { - let log_text = ""; - this.boxes.forEach((box) => { - // observer.observe(box);; - - let object_default_once = box.dataset.jos_once; - let object_default_itterationCount = box.dataset.jos_count; - let object_default_animation = box.dataset.jos_animation; - let object_default_timingFunction = box.dataset.jos_timingFunction; - let object_default_duration = box.dataset.jos_duration; - let object_default_delay = box.dataset.jos_delay; - - if (object_default_once != undefined && object_default_once != "false") { - //object_default_once = this.default_once; - if (object_default_once == "true") { - box.setAttribute("data-jos_once", "1"); - } - // checl and apply condition only if the value is a number - else if (object_default_once.match(/^[0-9]+$/)) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", "false"); - } - } - // if ( - // object_default_itterationCount == undefined || - // object_default_itterationCount <= 0 - // ) { - // console.log("deprecated : jos-itterationCount is not defined or <= 0"); - // box.dataset.jos_itterationCount = 1; - // box.setAttribute( - // "data-jos_iterationCount", - // object_default_itterationCount - // ); - // } else { - // } - if (object_default_animation != undefined) { - //object_default_animation = this.default_animation; - box.setAttribute("data-jos_animation", object_default_animation); - } else { - box.setAttribute("data-jos_animation", this.default_animation); - object_default_animation = this.default_animation; - } - if (object_default_timingFunction != undefined) { - //object_default_timingFunction = this.default_timingFunction; - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - if (object_default_duration != undefined) { - //object_default_duration = this.default_duration; - box.setAttribute("data-jos_duration", object_default_duration); - } - if (object_default_delay != undefined) { - //object_default_duration = this.default_duration; - box.setAttribute("data-jos_delay", object_default_delay); - } - - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - - //refresh the dom to apply the re insert the elements in the body - - this.observer = new IntersectionObserver(this.callbackRouter, { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }); - - this.observer.observe(box); - }); - if (this.debug == true) { - console.log( - "JOS " + - ("[" + Date.now() + "] [DEBUG]\n") + - " : Initialized\n |", - { - log_element_object: this.boxes, - } - ); - - // console.log( - // "JOS : Init\n" + - // box.id + - // " | " + - // box.className + - // " | " + - // box.tagName + - // "\n" + - // " | " + - // object_default_animation - // ); - } - } - - init(options) { - // apply options if value is not undefined - - if (options) { - if (options.once != undefined) { - this.default_once = options.once; - } - if (options.animation != undefined) { - this.default_animation = options.animation; - } - if (options.timingFunction != undefined) { - this.default_timingFunction = options.timingFunction; - } - if (options.threshold != undefined) { - this.default_threshold = options.threshold; - } - - if (options.intersectionRatio != undefined) { - console.warn( - "JOS [" + - Date.now() + - "] [WARN] \n : IntersectionRatio is deprecated\n" + - " | Use threshold instead." - ); - this.default_intersectionRatio = - options.intersectionRatio == 1 ? 0.99 : options.intersectionRatio; - } else { - this.default_intersectionRatio = - this.default_threshold == 1 ? 0.99 : this.default_threshold; - } - if (options.duration != undefined) { - this.default_duration = options.duration; - } - if (options.delay != undefined) { - this.default_delay = options.delay; - } - if (options.rootMargin != undefined) { - this.default_rootMargin = options.rootMargin; - } else { - if ( - options.rootMarginTop != undefined || - options.rootMarginBottom != undefined - ) { - this.default_rootMargin = - (options.rootMarginTop != undefined - ? options.rootMarginTop - : "-10%") + - " 0% " + - (options.rootMarginBottom != undefined - ? options.rootMarginBottom - : "-40%") + - " 0%"; - } - } - if (options.debugMode == true) { - this.debug = true; - this.debugLogger(); - } - } - - this.jos_stylesheet.insertRule( - ".jos {" + - // ("transition-timing-function: " + - // this.default_timingFunction + - // " !important;") + - // ("transition-duration: " + this.default_duration + "s !important;") + - // ("transition-delay: " + this.default_delay + "s; ") + - ("transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;") + - "}" - ); - if (options.disable == true) { - this.rst(); - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Disbaled"); - } - } else { - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Started"); - } - this.animationInit(); - } - } - - rst = (type = 0) => { - this.boxes.forEach((box) => { - if (type == 0) { - box.classList.remove("jos-" + box.dataset.jos_animation); - } else { - box.classList.add("jos-" + box.dataset.jos_animation); - } - this.observer.unobserve(box); - }); - - this.jos_stylesheet.insertRule( - ".jos {" + - ("transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - ";") + - "}" - ); - }; - - start() { - this.disable = false; - } - reset(type = 0) { - // 0 resets to initial state (opacity 0 all elements) - // 1 resets to final state (opacity 1 all elements) - // -1 re initialize variables (opacity 1 for elements that are in view only) - - let returnString = ""; - - if (type == 0) { - this.disable = false; - this.rst(1); - - returnString = "Reset | In initial state (ie: Opacity 0 all elements)"; - } else if (type == -1) { - this.rst(0); - this.animationInit(); - returnString = - "Reset | Re-initialize variables (opacity 1 for elements that are in view only)"; - } - // console.log("JOS Reset"); - else { - this.rst(0); - returnString = "Reset | In final state (ie: Opacity 1 all elements)"; - } - - this.disable = false; - // return this; - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [STATUS]\n : " + returnString); - } - return true; - } - stop(type = 0) { - // -1 = disable and reset to initial state (opacity 0) - // 0 or any = disable and reset to final state (opacity 1) - // 1 = disable in place - var returnString = ""; - if (type == -1) { - this.disable = true; - this.rst(1); - returnString = "Disabled | Reset to initial state (ie: Opacity 0)"; - } else if (type == 1) { - this.disable = true; - returnString = "Disabled | Elements in place"; - } else { - this.disable = true; - this.rst(0); - returnString = "Disabled | Reset to final state (ie: Opacity 1)"; - } - - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [STATUS]\n : " + returnString); - } - this.observer.disconnect(); - return true; - // return this; - } - destroy() { - this.rst(); - this.boxes.forEach((box) => { - box.classList.remove("jos"); - box.classList.remove("jos-" + box.dataset.jos_animation); - }); - // console.log("JOS Destroyed"); - - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Destroyed"); - } - return null; - // return this; - } -} - -// Create an JOS object - -const JOS = new jos(); diff --git a/dist/v0.6/jos.css b/dist/v0.6/jos.css deleted file mode 100644 index b8309c6..0000000 --- a/dist/v0.6/jos.css +++ /dev/null @@ -1,250 +0,0 @@ -.jos { - opacity: 1; - transition: 0.5s; - transition-timing-function: ease-in-out; -} -.jos-fade-default { - opacity: 0; - transform: (0); -} -.jos-fade { - opacity: 0; -} -.jos-fade-right, -.jos-slide { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left, -.jos-slide-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); - animation-delay: 0; -} -.jos-zoom-out-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0, -100px); -} -.jos-zoom-out-down { - opacity: 0; - transform: scale(0.8) translate3d(0, -100px, 0); -} -.jos-zoom-out-up { - opacity: 0; - transform: scale(0.8) translate3d(0, 100px, 0); -} -.jos-zoom-out-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0, -100px); -} -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0, -100px, 0); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0, 100px, 0); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0, -100px); -} -.jos-zoom-up { - opacity: 0; - transform: translateY(50px) scale(0); -} -.jos-zoom-down { - opacity: 0; - transform: translateY(-50px) scale(0); -} -.jos-flip { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} -[data-jos_pow="0.1"] { - transform: rotateY(calc(0.1 * 360deg)); -} -[data-jos_pow="0.2"] { - transform: rotateY(calc(0.2 * 360deg)); -} -[data-jos_pow="0.3"] { - transform: rotateY(calc(0.3 * 360deg)); -} -[data-jos_pow="0.4"] { - transform: rotateY(calc(0.4 * 360deg)); -} -[data-jos_pow="0.5"] { - transform: rotateY(calc(0.5 * 360deg)); -} -[data-jos_pow="0.6"] { - transform: rotateY(calc(0.6 * 360deg)); -} -[data-jos_pow="0.7"] { - transform: rotateY(calc(0.7 * 360deg)); -} -[data-jos_pow="0.8"] { - transform: rotateY(calc(0.8 * 360deg)); -} -[data-jos_pow="0.9"] { - transform: rotateY(calc(0.9 * 360deg)); -} -[data-jos_pow="1"] { - transform: rotateY(calc(1 * 360deg)); -} -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="cubic-bezier"] { - transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1) !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} -[data-jos_timing_function="initial"] { - transition-timing-function: initial !important; -} -[data-jos_timing_function="inherit"] { - transition-timing-function: inherit !important; -} -[data-jos_timing_function="unset"] { - transition-timing-function: unset !important; -} -[data-jos_duration="0.1"] { - transition-duration: 0.1s !important; -} -[data-jos_duration="0.2"] { - transition-duration: 0.2s !important; -} -[data-jos_duration="0.3"] { - transition-duration: 0.3s !important; -} -[data-jos_duration="0.4"] { - transition-duration: 0.4s !important; -} -[data-jos_duration="0.5"] { - transition-duration: 0.5s !important; -} -[data-jos_duration="0.6"] { - transition-duration: 0.6s !important; -} -[data-jos_duration="0.7"] { - transition-duration: 0.7s !important; -} -[data-jos_duration="0.8"] { - transition-duration: 0.8s !important; -} -[data-jos_duration="0.9"] { - transition-duration: 0.9s !important; -} -[data-jos_duration="1"] { - transition-duration: 1s !important; -} -[data-jos_duration="2"] { - transition-duration: 2s !important; -} -[data-jos_duration="3"] { - transition-duration: 3s !important; -} -[data-jos_duration="4"] { - transition-duration: 4s !important; -} -[data-jos_duration="5"] { - transition: 5s !important; -} - -[data-jos_delay="0.1"] { - transition-delay: 0.1s !important; -} -[data-jos_delay="0.2"] { - transition-delay: 0.2s !important; -} -[data-jos_delay="0.3"] { - transition-delay: 0.3s !important; -} -[data-jos_delay="0.4"] { - transition-delay: 0.4s !important; -} -[data-jos_delay="0.5"] { - transition-delay: 0.5s !important; -} -[data-jos_delay="0.6"] { - transition-delay: 0.6s !important; -} -[data-jos_delay="0.7"] { - transition-delay: 0.7s !important; -} -[data-jos_delay="0.8"] { - transition-delay: 0.8s !important; -} -[data-jos_delay="0.9"] { - transition-delay: 0.9s !important; -} -[data-jos_delay="1"] { - transition-delay: 1s !important; -} -[data-jos_delay="2"] { - transition-delay: 2s !important; -} -[data-jos_delay="3"] { - transition-delay: 3s !important; -} -[data-jos_delay="4"] { - transition-delay: 4s !important; -} -[data-jos_delay="5"] { - transition-delay: 5s !important; -} diff --git a/dist/v0.6/jos.debug.js b/dist/v0.6/jos.debug.js deleted file mode 100644 index 4ba965c..0000000 --- a/dist/v0.6/jos.debug.js +++ /dev/null @@ -1,2 +0,0 @@ -JOS = new class jos{default_once=!1;default_animation="fade";default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_passive=!0;debug=!1;disable=!1;version="0.6 (Debug)";author="Jesvi Jonathan";github="https://github.com/jesvijonathan/JOS-Animation-Library";jos_stylesheet=document.getElementById("jos-stylesheet").sheet;boxes=document.querySelectorAll(".jos");constructor(){}debugLogger(type=0){0!=type&&1!=type||console.info("JOS ["+Date.now()+"] [INFO]\n : Javascript On Scroll Animation Library\n | Version: "+this.version+"\n | Author: "+this.author+"\n | Github: "+this.github+"\n\n"),0!=type&&2!=type||console.info("JOS ["+Date.now()+"] [INFO]\n : Params \n | Global Animation: "+this.default_animation+"\n | Global Duration: "+this.default_duration+"\n | Global Timing Function: "+this.default_timingFunction+"\n | Global Delay: "+this.default_delay+"\n | Global Once: "+this.default_once+"\n | Global Intersection Ratio: "+this.default_intersectionRatio+"\n | Global Threshold: "+this.default_threshold+"\n | Global Root Margin: "+this.default_rootMargin+"\n | Passive: "+this.default_passive+"\n | Debug Mode: "+this.debug+"\n\n"),console.info("JOS ["+Date.now()+"] [INFO]\n : Debugging (Enable Verbose Mode to see more info)\n\n")}callbackRouter=(entries,observer)=>{if(1==this.disable)return;let entry=entries[0],target=entry.target,text_once="",text_invoke="",state="",text_target="",text_duration="",text_timingFunction="",text_delay="",text_iterationCount="",target_jos_animation=target.dataset.jos_animation;if(entry.intersectionRatio>this.default_intersectionRatio){if(state="Enter",null!=target.dataset.jos_counter){let counter_value=parseInt(target.dataset.jos_counter);counter_value++,target.dataset.jos_counter=counter_value,text_iterationCount="\n | Counter : "+counter_value}target_jos_animation&&(target.classList.remove("jos-"+target_jos_animation),null!=target.dataset.jos_invoke&&(window[target.dataset.jos_invoke](target),text_invoke="\n | Invoked : "+target.dataset.jos_invoke),null==target.dataset.jos_once&&"false"==target.dataset.jos_once||("true"==target.dataset.jos_once?(observer.unobserve(target),text_once="\n | Once : Removed Observer (1)"):target.dataset.jos_counter>=target.dataset.jos_once&&(observer.unobserve(target),text_once="\n | Once : Removed Observer ("+target.dataset.jos_once+")")))}else state="Exit",target.classList.add("jos-"+target_jos_animation),null!=target.dataset.jos_invoke_out&&(window[target.dataset.jos_invoke_out](target),text_invoke="\n | Invoked : "+target.dataset.jos_invoke_out);""!=target.id&&(text_target="\n | ID : "+target.id),null!=target.dataset.jos_duration&&(text_duration="\n | Duration : "+target.dataset.jos_duration+"s"),null!=target.dataset.jos_timingFunction&&(text_timingFunction="\n | Timing Function : "+target.dataset.jos_timingFunction),null!=target.dataset.jos_delay&&(text_delay="\n | Delay : "+target.dataset.jos_delay+"s"),1==this.debug&&console.debug("JOS ["+Date.now()+"] [DEBUG]\n : On-"+state+" ("+target.tagName+") Info"+text_target+"\n | Class : ("+target.className+")\n | Intersection Ratio : ("+entry.intersectionRatio+" ~ "+this.default_intersectionRatio+")\n | Animation : "+target.dataset.jos_animation+text_duration+text_delay+text_timingFunction+text_once+text_iterationCount+text_invoke)};animationInit(){this.boxes.forEach((box=>{let object_default_once=box.dataset.jos_once,object_default_animation=(box.dataset.jos_count,box.dataset.jos_animation),object_default_timingFunction=box.dataset.jos_timingFunction,object_default_duration=box.dataset.jos_duration,object_default_delay=box.dataset.jos_delay;null!=object_default_once&&"false"!=object_default_once&&("true"==object_default_once?box.setAttribute("data-jos_once","1"):object_default_once.match(/^[0-9]+$/)?box.setAttribute("data-jos_once",object_default_once):box.setAttribute("data-jos_once","false")),null!=object_default_animation?box.setAttribute("data-jos_animation",object_default_animation):(box.setAttribute("data-jos_animation",this.default_animation),object_default_animation=this.default_animation),null!=object_default_timingFunction&&box.setAttribute("data-jos_timingFunction",object_default_timingFunction),null!=object_default_duration&&box.setAttribute("data-jos_duration",object_default_duration),null!=object_default_delay&&box.setAttribute("data-jos_delay",object_default_delay),box.setAttribute("data-jos_counter","0"),box.classList.add("jos-"+object_default_animation),this.observer=new IntersectionObserver(this.callbackRouter,{rootMargin:this.default_rootMargin,threshold:this.default_threshold,passive:this.default_passive}),this.observer.observe(box)})),1==this.debug&&console.log("JOS ["+Date.now()+"] [DEBUG]\n : Initialized\n |",{log_element_object:this.boxes})}init(options){options&&(null!=options.once&&(this.default_once=options.once),null!=options.animation&&(this.default_animation=options.animation),null!=options.timingFunction&&(this.default_timingFunction=options.timingFunction),null!=options.threshold&&(this.default_threshold=options.threshold),null!=options.intersectionRatio?(console.warn("JOS ["+Date.now()+"] [WARN] \n : IntersectionRatio is deprecated\n | Use threshold instead."),this.default_intersectionRatio=1==options.intersectionRatio?.99:options.intersectionRatio):this.default_intersectionRatio=1==this.default_threshold?.99:this.default_threshold,null!=options.duration&&(this.default_duration=options.duration),null!=options.delay&&(this.default_delay=options.delay),null!=options.rootMargin?this.default_rootMargin=options.rootMargin:null==options.rootMarginTop&&null==options.rootMarginBottom||(this.default_rootMargin=(null!=options.rootMarginTop?options.rootMarginTop:"-10%")+" 0% "+(null!=options.rootMarginBottom?options.rootMarginBottom:"-40%")+" 0%"),1==options.debugMode&&(this.debug=!0,this.debugLogger())),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s !important;}"),1==options.disable?(this.rst(),1==this.debug&&console.info("JOS ["+Date.now()+"] [DEBUG]\n : Disbaled")):(1==this.debug&&console.info("JOS ["+Date.now()+"] [DEBUG]\n : Started"),this.animationInit())}rst=(type=0)=>{this.boxes.forEach((box=>{0==type?box.classList.remove("jos-"+box.dataset.jos_animation):box.classList.add("jos-"+box.dataset.jos_animation),this.observer.unobserve(box)})),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+";}")};start(){this.disable=!1}reset(type=0){let returnString="";return 0==type?(this.disable=!1,this.rst(1),returnString="Reset | In initial state (ie: Opacity 0 all elements)"):-1==type?(this.rst(0),this.animationInit(),returnString="Reset | Re-initialize variables (opacity 1 for elements that are in view only)"):(this.rst(0),returnString="Reset | In final state (ie: Opacity 1 all elements)"),this.disable=!1,1==this.debug&&console.info("JOS ["+Date.now()+"] [STATUS]\n : "+returnString),!0}stop(type=0){var returnString="";return-1==type?(this.disable=!0,this.rst(1),returnString="Disabled | Reset to initial state (ie: Opacity 0)"):1==type?(this.disable=!0,returnString="Disabled | Elements in place"):(this.disable=!0,this.rst(0),returnString="Disabled | Reset to final state (ie: Opacity 1)"),1==this.debug&&console.info("JOS ["+Date.now()+"] [STATUS]\n : "+returnString),this.observer.disconnect(),!0}destroy(){return this.rst(),this.boxes.forEach((box=>{box.classList.remove("jos"),box.classList.remove("jos-"+box.dataset.jos_animation)})),1==this.debug&&console.info("JOS ["+Date.now()+"] [DEBUG]\n : Destroyed"),null}}; -//# sourceMappingURL=jos.debug.js.map \ No newline at end of file diff --git a/dist/v0.6/jos.debug.min.js b/dist/v0.6/jos.debug.min.js deleted file mode 100644 index 2271a63..0000000 --- a/dist/v0.6/jos.debug.min.js +++ /dev/null @@ -1,2 +0,0 @@ -JOS = new class jos{default_once=!1;default_animation="fade";default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_passive=!0;version="0.6 (Debug)";author="Jesvi Jonathan";github="https://github.com/jesvijonathan/JOS-Animation-Library";debug=!1;disable=!1;jos_stylesheet=document.getElementById("jos-stylesheet").sheet;boxes=document.querySelectorAll(".jos");constructor(){}debugLogger(t=0){0!=t&&1!=t||console.info("JOS ["+Date.now()+"] [INFO]\n : Javascript On Scroll Animation Library\n | Version: "+this.version+"\n | Author: "+this.author+"\n | Github: "+this.github+"\n\n"),0!=t&&2!=t||console.info("JOS ["+Date.now()+"] [INFO]\n : Params \n | Global Animation: "+this.default_animation+"\n | Global Duration: "+this.default_duration+"\n | Global Timing Function: "+this.default_timingFunction+"\n | Global Delay: "+this.default_delay+"\n | Global Once: "+this.default_once+"\n | Global Intersection Ratio: "+this.default_intersectionRatio+"\n | Global Threshold: "+this.default_threshold+"\n | Global Root Margin: "+this.default_rootMargin+"\n | Passive: "+this.default_passive+"\n | Debug Mode: "+this.debug+"\n\n"),console.info("JOS ["+Date.now()+"] [INFO]\n : Debugging (Enable Verbose Mode to see more info)\n\n")}callbackRouter=(t,e)=>{if(1==this.disable)return;let s=t[0],i=s.target,n="",a="",o="",l="",d="",r="",u="",h="",c=i.dataset.jos_animation;if(s.intersectionRatio>this.default_intersectionRatio){if(o="Enter",null!=i.dataset.jos_counter){let t=parseInt(i.dataset.jos_counter);t++,i.dataset.jos_counter=t,h="\n | Counter : "+t}c&&(i.classList.remove("jos-"+c),null!=i.dataset.jos_invoke&&(window[i.dataset.jos_invoke](i),a="\n | Invoked : "+i.dataset.jos_invoke),null==i.dataset.jos_once&&"false"==i.dataset.jos_once||("true"==i.dataset.jos_once?(e.unobserve(i),n="\n | Once : Removed Observer (1)"):i.dataset.jos_counter>=i.dataset.jos_once&&(e.unobserve(i),n="\n | Once : Removed Observer ("+i.dataset.jos_once+")")))}else o="Exit",i.classList.add("jos-"+c),null!=i.dataset.jos_invoke_out&&(window[i.dataset.jos_invoke_out](i),a="\n | Invoked : "+i.dataset.jos_invoke_out);""!=i.id&&(l="\n | ID : "+i.id),null!=i.dataset.jos_duration&&(d="\n | Duration : "+i.dataset.jos_duration+"s"),null!=i.dataset.jos_timingFunction&&(r="\n | Timing Function : "+i.dataset.jos_timingFunction),null!=i.dataset.jos_delay&&(u="\n | Delay : "+i.dataset.jos_delay+"s"),1==this.debug&&console.debug("JOS ["+Date.now()+"] [DEBUG]\n : On-"+o+" ("+i.tagName+") Info"+l+"\n | Class : ("+i.className+")\n | Intersection Ratio : ("+s.intersectionRatio+" ~ "+this.default_intersectionRatio+")\n | Animation : "+i.dataset.jos_animation+d+u+r+n+h+a)};animationInit(){this.boxes.forEach((t=>{let e=t.dataset.jos_once,s=(t.dataset.jos_count,t.dataset.jos_animation),i=t.dataset.jos_timingFunction,n=t.dataset.jos_duration,a=t.dataset.jos_delay;null!=e&&"false"!=e&&("true"==e?t.setAttribute("data-jos_once","1"):e.match(/^[0-9]+$/)?t.setAttribute("data-jos_once",e):t.setAttribute("data-jos_once","false")),null!=s?t.setAttribute("data-jos_animation",s):(t.setAttribute("data-jos_animation",this.default_animation),s=this.default_animation),null!=i&&t.setAttribute("data-jos_timingFunction",i),null!=n&&t.setAttribute("data-jos_duration",n),null!=a&&t.setAttribute("data-jos_delay",a),t.setAttribute("data-jos_counter","0"),t.classList.add("jos-"+s),this.observer=new IntersectionObserver(this.callbackRouter,{rootMargin:this.default_rootMargin,threshold:this.default_threshold,passive:this.default_passive}),this.observer.observe(t)})),1==this.debug&&console.log("JOS ["+Date.now()+"] [DEBUG]\n : Initialized\n |",{log_element_object:this.boxes})}init(t){t&&(null!=t.once&&(this.default_once=t.once),null!=t.animation&&(this.default_animation=t.animation),null!=t.timingFunction&&(this.default_timingFunction=t.timingFunction),null!=t.threshold&&(this.default_threshold=t.threshold),null!=t.intersectionRatio?(console.warn("JOS ["+Date.now()+"] [WARN] \n : IntersectionRatio is deprecated\n | Use threshold instead."),this.default_intersectionRatio=1==t.intersectionRatio?.99:t.intersectionRatio):this.default_intersectionRatio=1==this.default_threshold?.99:this.default_threshold,null!=t.duration&&(this.default_duration=t.duration),null!=t.delay&&(this.default_delay=t.delay),null!=t.rootMargin?this.default_rootMargin=t.rootMargin:null==t.rootMarginTop&&null==t.rootMarginBottom||(this.default_rootMargin=(null!=t.rootMarginTop?t.rootMarginTop:"-10%")+" 0% "+(null!=t.rootMarginBottom?t.rootMarginBottom:"-40%")+" 0%"),1==t.debugMode&&(this.debug=!0,this.debugLogger())),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s !important;}"),1==t.disable?(this.rst(),1==this.debug&&console.info("JOS ["+Date.now()+"] [DEBUG]\n : Disbaled")):(1==this.debug&&console.info("JOS ["+Date.now()+"] [DEBUG]\n : Started"),this.animationInit())}rst=(t=0)=>{this.boxes.forEach((e=>{0==t?e.classList.remove("jos-"+e.dataset.jos_animation):e.classList.add("jos-"+e.dataset.jos_animation),this.observer.unobserve(e)})),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+";}")};start(){this.disable=!1}reset(t=0){let e="";return 0==t?(this.disable=!1,this.rst(1),e="Reset | In initial state (ie: Opacity 0 all elements)"):-1==t?(this.rst(0),this.animationInit(),e="Reset | Re-initialize variables (opacity 1 for elements that are in view only)"):(this.rst(0),e="Reset | In final state (ie: Opacity 1 all elements)"),this.disable=!1,1==this.debug&&console.info("JOS ["+Date.now()+"] [STATUS]\n : "+e),!0}stop(t=0){var e="";return-1==t?(this.disable=!0,this.rst(1),e="Disabled | Reset to initial state (ie: Opacity 0)"):1==t?(this.disable=!0,e="Disabled | Elements in place"):(this.disable=!0,this.rst(0),e="Disabled | Reset to final state (ie: Opacity 1)"),1==this.debug&&console.info("JOS ["+Date.now()+"] [STATUS]\n : "+e),this.observer.disconnect(),!0}destroy(){return this.rst(),this.boxes.forEach((t=>{t.classList.remove("jos"),t.classList.remove("jos-"+t.dataset.jos_animation)})),1==this.debug&&console.info("JOS ["+Date.now()+"] [DEBUG]\n : Destroyed"),null}}; -//# sourceMappingURL=jos.debug.min.js.map \ No newline at end of file diff --git a/dist/v0.6/jos.js b/dist/v0.6/jos.js deleted file mode 100644 index 18009e7..0000000 --- a/dist/v0.6/jos.js +++ /dev/null @@ -1,212 +0,0 @@ -JOS = new (class jos { - default_once = !1; - default_animation = "fade"; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_passive = !0; - debug = !1; - disable = !1; - version = "0.6"; - author = "Jesvi Jonathan"; - github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - boxes = document.querySelectorAll(".jos"); - constructor() {} - debugLogger(type = 0) { - (0 != type && 1 != type) || - console.info( - "JOS [" + - Date.now() + - "] [INFO]\n : Javascript On Scroll Animation Library\n | Version: " + - this.version + - "\n | Author: " + - this.author + - "\n | Github: " + - this.github + - "\n\n" - ), - (0 != type && 2 != type) || - console.info( - "JOS [" + - Date.now() + - "] [INFO]\n : Params \n | Global Animation: " + - this.default_animation + - "\n | Global Duration: " + - this.default_duration + - "\n | Global Timing Function: " + - this.default_timingFunction + - "\n | Global Delay: " + - this.default_delay + - "\n | Global Once: " + - this.default_once + - "\n | Global Intersection Ratio: " + - this.default_intersectionRatio + - "\n | Global Threshold: " + - this.default_threshold + - "\n | Global Root Margin: " + - this.default_rootMargin + - "\n | Passive: " + - this.default_passive + - "\n | Debug Mode: " + - this.debug + - "\n\n" - ); - } - callbackRouter = (entries, observer) => { - if (1 == this.disable) return; - let entry = entries[0], - target = entry.target; - if (entry.intersectionRatio > this.default_intersectionRatio) { - if (null != target.dataset.jos_counter) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++, (target.dataset.jos_counter = counter_value); - } - target.dataset.jos_animation && - (target.classList.remove("jos-" + target.dataset.jos_animation), - null != target.dataset.jos_invoke && - window[target.dataset.jos_invoke](target), - (null == target.dataset.jos_once && - "false" == target.dataset.jos_once) || - (("true" == target.dataset.jos_once || - target.dataset.jos_counter >= target.dataset.jos_once) && - observer.unobserve(target))); - } else - target.classList.add("jos-" + target.dataset.jos_animation), - null != target.dataset.jos_invoke_out && - window[target.dataset.jos_invoke_out](target); - }; - animationInit() { - this.boxes.forEach((box) => { - let object_default_once = box.dataset.jos_once, - object_default_animation = - (box.dataset.jos_count, box.dataset.jos_animation), - object_default_timingFunction = box.dataset.jos_timingFunction, - object_default_duration = box.dataset.jos_duration, - object_default_delay = box.dataset.jos_delay; - null != object_default_once && - "false" != object_default_once && - ("true" == object_default_once - ? box.setAttribute("data-jos_once", "1") - : object_default_once.match(/^[0-9]+$/) - ? box.setAttribute("data-jos_once", object_default_once) - : box.setAttribute("data-jos_once", "false")), - null != object_default_animation - ? box.setAttribute("data-jos_animation", object_default_animation) - : (box.setAttribute("data-jos_animation", this.default_animation), - (object_default_animation = this.default_animation)), - null != object_default_timingFunction && - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ), - null != object_default_duration && - box.setAttribute("data-jos_duration", object_default_duration), - null != object_default_delay && - box.setAttribute("data-jos_delay", object_default_delay), - box.setAttribute("data-jos_counter", "0"), - box.classList.add("jos-" + object_default_animation), - (this.observer = new IntersectionObserver(this.callbackRouter, { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - })), - this.observer.observe(box); - }); - } - init(options) { - options && - (null != options.once && (this.default_once = options.once), - null != options.animation && (this.default_animation = options.animation), - null != options.timingFunction && - (this.default_timingFunction = options.timingFunction), - null != options.threshold && (this.default_threshold = options.threshold), - null != options.intersectionRatio - ? (console.warn( - "JOS [" + - Date.now() + - "] [WARN] \n : IntersectionRatio is deprecated\n | Use threshold instead." - ), - (this.default_intersectionRatio = - 1 == options.intersectionRatio ? 0.99 : options.intersectionRatio)) - : (this.default_intersectionRatio = - 1 == this.default_threshold ? 0.99 : this.default_threshold), - null != options.duration && (this.default_duration = options.duration), - null != options.delay && (this.default_delay = options.delay), - null != options.rootMargin - ? (this.default_rootMargin = options.rootMargin) - : (null == options.rootMarginTop && null == options.rootMarginBottom) || - (this.default_rootMargin = - (null != options.rootMarginTop ? options.rootMarginTop : "-10%") + - " 0% " + - (null != options.rootMarginBottom - ? options.rootMarginBottom - : "-40%") + - " 0%"), - 1 == options.debugMode && this.debugLogger()), - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;}" - ), - 1 == options.disable ? this.rst() : this.animationInit(); - } - rst = (type = 0) => { - this.boxes.forEach((box) => { - 0 == type - ? box.classList.remove("jos-" + box.dataset.jos_animation) - : box.classList.add("jos-" + box.dataset.jos_animation), - this.observer.unobserve(box); - }), - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - ";}" - ); - }; - start() { - this.disable = !1; - } - reset(type = 0) { - return ( - 0 == type - ? ((this.disable = !1), this.rst(1)) - : -1 == type - ? (this.rst(0), this.animationInit()) - : this.rst(0), - (this.disable = !1), - !0 - ); - } - stop(type = 0) { - return ( - -1 == type - ? ((this.disable = !0), this.rst(1)) - : 1 == type - ? (this.disable = !0) - : ((this.disable = !0), this.rst(0)), - this.observer.disconnect(), - !0 - ); - } - destroy() { - return ( - this.rst(), - this.boxes.forEach((box) => { - box.classList.remove("jos"), - box.classList.remove("jos-" + box.dataset.jos_animation); - }), - null - ); - } -})(); -//# sourceMappingURL=jos.js.map diff --git a/dist/v0.6/jos.min.js b/dist/v0.6/jos.min.js deleted file mode 100644 index 9a8dbce..0000000 --- a/dist/v0.6/jos.min.js +++ /dev/null @@ -1,2 +0,0 @@ -JOS = new class jos{default_once=!1;default_animation="fade";default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_passive=!0;debug=!1;disable=!1;version="0.6";author="Jesvi Jonathan";github="https://github.com/jesvijonathan/JOS-Animation-Library";jos_stylesheet=document.getElementById("jos-stylesheet").sheet;boxes=document.querySelectorAll(".jos");constructor(){}debugLogger(t=0){}callbackRouter=(t,s)=>{if(1==this.disable)return;let e=t[0],a=e.target;if(e.intersectionRatio>this.default_intersectionRatio){if(null!=a.dataset.jos_counter){let t=parseInt(a.dataset.jos_counter);t++,a.dataset.jos_counter=t}a.dataset.jos_animation&&(a.classList.remove("jos-"+a.dataset.jos_animation),null!=a.dataset.jos_invoke&&window[a.dataset.jos_invoke](a),null==a.dataset.jos_once&&"false"==a.dataset.jos_once||("true"==a.dataset.jos_once||a.dataset.jos_counter>=a.dataset.jos_once)&&s.unobserve(a))}else a.classList.add("jos-"+a.dataset.jos_animation),null!=a.dataset.jos_invoke_out&&window[a.dataset.jos_invoke_out](a)};animationInit(){this.boxes.forEach((t=>{let s=t.dataset.jos_once,e=(t.dataset.jos_count,t.dataset.jos_animation),a=t.dataset.jos_timingFunction,i=t.dataset.jos_duration,o=t.dataset.jos_delay;null!=s&&"false"!=s&&("true"==s?t.setAttribute("data-jos_once","1"):s.match(/^[0-9]+$/)?t.setAttribute("data-jos_once",s):t.setAttribute("data-jos_once","false")),null!=e?t.setAttribute("data-jos_animation",e):(t.setAttribute("data-jos_animation",this.default_animation),e=this.default_animation),null!=a&&t.setAttribute("data-jos_timingFunction",a),null!=i&&t.setAttribute("data-jos_duration",i),null!=o&&t.setAttribute("data-jos_delay",o),t.setAttribute("data-jos_counter","0"),t.classList.add("jos-"+e),this.observer=new IntersectionObserver(this.callbackRouter,{rootMargin:this.default_rootMargin,threshold:this.default_threshold,passive:this.default_passive}),this.observer.observe(t)}))}init(t){t&&(null!=t.once&&(this.default_once=t.once),null!=t.animation&&(this.default_animation=t.animation),null!=t.timingFunction&&(this.default_timingFunction=t.timingFunction),null!=t.threshold&&(this.default_threshold=t.threshold),null!=t.intersectionRatio?this.default_intersectionRatio=1==t.intersectionRatio?.99:t.intersectionRatio:this.default_intersectionRatio=1==this.default_threshold?.99:this.default_threshold,null!=t.duration&&(this.default_duration=t.duration),null!=t.delay&&(this.default_delay=t.delay),null!=t.rootMargin?this.default_rootMargin=t.rootMargin:null==t.rootMarginTop&&null==t.rootMarginBottom||(this.default_rootMargin=(null!=t.rootMarginTop?t.rootMarginTop:"-10%")+" 0% "+(null!=t.rootMarginBottom?t.rootMarginBottom:"-40%")+" 0%"),1==t.debugMode&&this.debugLogger()),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s !important;}"),1==t.disable?this.rst():this.animationInit()}rst=(t=0)=>{this.boxes.forEach((s=>{0==t?s.classList.remove("jos-"+s.dataset.jos_animation):s.classList.add("jos-"+s.dataset.jos_animation),this.observer.unobserve(s)})),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+";}")};start(){this.disable=!1}reset(t=0){return 0==t?(this.disable=!1,this.rst(1)):-1==t?(this.rst(0),this.animationInit()):this.rst(0),this.disable=!1,!0}stop(t=0){return-1==t?(this.disable=!0,this.rst(1)):1==t?this.disable=!0:(this.disable=!0,this.rst(0)),this.observer.disconnect(),!0}destroy(){return this.rst(),this.boxes.forEach((t=>{t.classList.remove("jos"),t.classList.remove("jos-"+t.dataset.jos_animation)})),null}}; -//# sourceMappingURL=jos.min.js.map \ No newline at end of file diff --git a/dist/v0.7/.htaccess b/dist/v0.7/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/v0.7/jos.css b/dist/v0.7/jos.css deleted file mode 100644 index bc4fcd0..0000000 --- a/dist/v0.7/jos.css +++ /dev/null @@ -1,2 +0,0 @@ -.jos,.jos-anchor{transition:.5s ease-in-out}.jos{opacity:1}.jos-anchor{opacity:0}.jos-fade-default{opacity:0;transform:(0)}.jos-fade{opacity:0}.jos-fade-right,.jos-slide{opacity:0;transform:translateX(-100px)}.jos-fade-left,.jos-slide-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-grow .jos-zoom-out,.jos-zoom{opacity:0;transform:scale(.8)}.jos-grow-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-grow-down,.jos-zoom-out-down{transform:scale(.8) translate3d(0,-100px,0)}.jos-grow-up,.jos-zoom-out-up{transform:scale(.8) translate3d(0,100px,0)}.jos-grow-right,.jos-zoom-out-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-shrink,.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-shrink-down,.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-shrink-up,.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-shrink-right,.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-shrink-left,.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-grow-up,.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:translateY(50px) scale(0)}.jos-grow-down,.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:translateY(-50px) scale(0)}.jos-flip{transform:perspective(2500px) rotateY(-100deg);opacity:0}.jos-flip-left{transform:perspective(2500px) rotateY(100deg);opacity:0}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-spin,.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-revolve,.jos-revolve-left{opacity:0;transform:rotate(360deg) scale(0)}.jos-revolve-right{opacity:0;transform:rotate(-360deg) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_pow="0.1"]{transform:rotateY(calc(.1 * 360deg))}[data-jos_pow="0.2"]{transform:rotateY(calc(.2 * 360deg))}[data-jos_pow="0.3"]{transform:rotateY(calc(.3 * 360deg))}[data-jos_pow="0.4"]{transform:rotateY(calc(.4 * 360deg))}[data-jos_pow="0.5"]{transform:rotateY(calc(.5 * 360deg))}[data-jos_pow="0.6"]{transform:rotateY(calc(.6 * 360deg))}[data-jos_pow="0.7"]{transform:rotateY(calc(.7 * 360deg))}[data-jos_pow="0.8"]{transform:rotateY(calc(.8 * 360deg))}[data-jos_pow="0.9"]{transform:rotateY(calc(.9 * 360deg))}[data-jos_pow="1"]{transform:rotateY(calc(1 * 360deg))}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=cubic-bezier]{transition-timing-function:cubic-bezier(0.1,0.7,1,0.1)!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5,end)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}[data-jos_timing_function=initial]{transition-timing-function:initial!important}[data-jos_timing_function=inherit]{transition-timing-function:inherit!important}[data-jos_timing_function=unset]{transition-timing-function:unset!important}[data-jos_duration="0.1"]{transition-duration:.1s!important}[data-jos_duration="0.2"]{transition-duration:.2s!important}[data-jos_duration="0.3"]{transition-duration:.3s!important}[data-jos_duration="0.4"]{transition-duration:.4s!important}[data-jos_duration="0.5"]{transition-duration:.5s!important}[data-jos_duration="0.6"]{transition-duration:.6s!important}[data-jos_duration="0.7"]{transition-duration:.7s!important}[data-jos_duration="0.8"]{transition-duration:.8s!important}[data-jos_duration="0.9"]{transition-duration:.9s!important}[data-jos_duration="1"],[data-jos_duration="6"]{transition-duration:1s!important}[data-jos_duration="2"],[data-jos_duration="7"]{transition-duration:2s!important}[data-jos_duration="3"],[data-jos_duration="8"]{transition-duration:3s!important}[data-jos_duration="4"],[data-jos_duration="9"]{transition-duration:4s!important}[data-jos_duration="10"],[data-jos_duration="5"]{transition:5s!important} -/* JOS By Jesvi Jonathan */ \ No newline at end of file diff --git a/dist/v0.7/jos.debug.js b/dist/v0.7/jos.debug.js deleted file mode 100644 index 7c779c9..0000000 --- a/dist/v0.7/jos.debug.js +++ /dev/null @@ -1,459 +0,0 @@ -// Create an JOS object -const JOS = new (class jos { - // JOS global parameter - default_once = !1; - default_animation = "fade"; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_passive = !0; - debug = !1; - disable = !1; - // Package Info - version = "0.7 (Debug)"; - author = "Jesvi Jonathan"; - github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - // Read DOM - jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - boxes = document.querySelectorAll(".jos"); - constructor() { - // will be completed later - } - //Init Debugger - debugLogger(t = 0) { - (0 != t && 1 != t) || - console.info( - "JOS [" + - Date.now() + - "] [INFO]\n : Javascript On Scroll Animation Library\n | Version: " + - this.version + - "\n | Author: " + - this.author + - "\n | Github: " + - this.github + - "\n\n" - ), - (0 != t && 2 != t) || - console.info( - "JOS [" + - Date.now() + - "] [INFO]\n : Params \n | Global Animation: " + - this.default_animation + - "\n | Global Duration: " + - this.default_duration + - "\n | Global Timing Function: " + - this.default_timingFunction + - "\n | Global Delay: " + - this.default_delay + - "\n | Global Once: " + - this.default_once + - "\n | Global Intersection Ratio: " + - this.default_intersectionRatio + - "\n | Global Threshold: " + - this.default_threshold + - "\n | Global Root Margin: " + - this.default_rootMargin + - "\n | Passive: " + - this.default_passive + - "\n | Debug Mode: " + - this.debug + - "\n\n" - ), - console.info( - "JOS [" + - Date.now() + - "] [INFO]\n : Debugging (Enable Verbose Mode to see more info)\n\n" - ); - } - // callback for anchor observer - callbackRouter_anchor = (t, e) => { - let s = t[0], - o = s.target; - // animate all elements with the same anchor - document - .querySelectorAll("[data-jos_anchor='#" + o.id + "']") - .forEach((t) => { - let a = "", - n = "", - i = "", - l = "", - d = "", - r = "", - u = t.dataset.jos_animation; - if (s.intersectionRatio > this.default_intersectionRatio) { - // add to element counter - if (((i = "Enter"), null != t.dataset.jos_counter)) { - let e = parseInt(t.dataset.jos_counter); - e++, (t.dataset.jos_counter = e), (r = "\n | Counter : " + e); - } - // start animation - u && - (t.classList.remove("jos-" + u), - // check for element invoke function - null != t.dataset.jos_invoke && - (window[t.dataset.jos_invoke](t), - (n = "\n | Invoked : " + t.dataset.jos_invoke)), - // once or n times on viewport logic - (null == t.dataset.jos_once && "false" == t.dataset.jos_once) || - // remove anchor from current element to unobserve - ("true" == t.dataset.jos_once - ? (e.unobserve(t), - (t.dataset.jos_anchor = null), - (a = "\n | Once : Removed Observer (1)")) - : t.dataset.jos_counter >= t.dataset.jos_once && - (e.unobserve(t), - (t.dataset.jos_anchor = null), - (a = - "\n | Once : Removed Observer (" + - t.dataset.jos_once + - ")")))); - // iiterate the counter for the element - } - // revert animation - else - (i = "Exit"), - t.classList.add("jos-" + u), - // check for element invoke function - null != t.dataset.jos_invoke_out && - (window[t.dataset.jos_invoke_out](t), - (n = "\n | Invoked : " + t.dataset.jos_invoke_out)); - "" != t.id && (l = "\n | ID : " + t.id), - null != t.dataset.jos_duration && - (d = "\n | Duration : " + t.dataset.jos_duration + "s"), - 1 == this.debug && - console.debug( - "JOS [" + - Date.now() + - "] [DEBUG]\n : On-" + - i + - " (" + - t.tagName + - ") Info\n | Anchor : " + - o.id + - l + - "\n | Class : (" + - t.className + - ")\n | Intersection Ratio : (" + - s.intersectionRatio + - " ~ " + - this.default_intersectionRatio + - ")\n | Animation : " + - t.dataset.jos_animation + - d + - a + - r + - n - ); - }); - }; - // callback for observer (main) - callbackRouter = (t, e, s = 1) => { - if (1 == this.disable) return; - // target/entry being observed - let o = t[0], - a = o.target, - n = "", - i = "", - l = "", - d = "", - r = "", - u = "", - h = "", - c = "", - _ = a.dataset.jos_animation; - // Check for viewport intersection - if (o.intersectionRatio > this.default_intersectionRatio) { - // add to element counter - if (((l = "Enter"), null != a.dataset.jos_counter)) { - let t = parseInt(a.dataset.jos_counter); - t++, (a.dataset.jos_counter = t), (c = "\n | Counter : " + t); - } - // start animation - _ && - (a.classList.remove("jos-" + _), - // check for element invoke function - null != a.dataset.jos_invoke && - (window[a.dataset.jos_invoke](a), - (i = "\n | Invoked : " + a.dataset.jos_invoke)), - // once or n times on viewport logic - (null == a.dataset.jos_once && "false" == a.dataset.jos_once) || - // target.classList.remove("jos"); - // console.log("Removed-Observer"); - ("true" == a.dataset.jos_once - ? (e.unobserve(a), (n = "\n | Once : Removed Observer (1)")) - : a.dataset.jos_counter >= a.dataset.jos_once && - (e.unobserve(a), - (n = - "\n | Once : Removed Observer (" + - a.dataset.jos_once + - ")")))); - // iterate the counter for the element - } - // revert animation - else - (l = "Exit"), - a.classList.add("jos-" + _), - // check for element invoke function - null != a.dataset.jos_invoke_out && - (window[a.dataset.jos_invoke_out](a), - (i = "\n | Invoked : " + a.dataset.jos_invoke_out)); - // debug info - "" != a.id && (d = "\n | ID : " + a.id), - null != a.dataset.jos_duration && - (r = "\n | Duration : " + a.dataset.jos_duration + "s"), - null != a.dataset.jos_timingFunction && - (u = "\n | Timing Function : " + a.dataset.jos_timingFunction), - null != a.dataset.jos_delay && - (h = "\n | Delay : " + a.dataset.jos_delay + "s"), - // debug info - 1 == this.debug && - console.debug( - "JOS [" + - Date.now() + - "] [DEBUG]\n : On-" + - l + - " (" + - a.tagName + - ") Info" + - d + - "\n | Class : (" + - a.className + - ")\n | Intersection Ratio : (" + - o.intersectionRatio + - " ~ " + - this.default_intersectionRatio + - ")\n | Animation : " + - a.dataset.jos_animation + - r + - h + - u + - n + - c + - i - ); - }; - // initialize the observer - animationInit() { - this.boxes.forEach( - (t) => { - // observer.observe(box);; - // check for default values - let e = t.dataset.jos_once, - s = (t.dataset.jos_count, t.dataset.jos_animation), - o = t.dataset.jos_timingFunction, - a = t.dataset.jos_duration, - n = t.dataset.jos_delay; - // set element attribute values - null != e && - "false" != e && - //object_default_once = this.default_once; - ("true" == e - ? t.setAttribute("data-jos_once", "1") - : e.match(/^[0-9]+$/) - ? t.setAttribute("data-jos_once", e) - : t.setAttribute("data-jos_once", "false")), - // if ( - // object_default_itterationCount == undefined || - // object_default_itterationCount <= 0 - // ) { - // console.log("deprecated : jos-itterationCount is not defined or <= 0"); - // box.dataset.jos_itterationCount = 1; - // box.setAttribute( - // "data-jos_iterationCount", - // object_default_itterationCount - // ); - // } else { - // } - null != s - ? //object_default_animation = this.default_animation; - t.setAttribute("data-jos_animation", s) - : (t.setAttribute("data-jos_animation", this.default_animation), - (s = this.default_animation)), - null != o && - //object_default_timingFunction = this.default_timingFunction; - t.setAttribute("data-jos_timingFunction", o), - null != a && - //object_default_duration = this.default_duration; - t.setAttribute("data-jos_duration", a), - null != n && - //object_default_duration = this.default_duration; - t.setAttribute("data-jos_delay", n), - t.setAttribute("data-jos_counter", "0"), - t.classList.add("jos-" + s), - // refresh the dom to apply the re insert the elements in the body - null != t.dataset.jos_anchor - ? // add observer for anchor - ((this.observer = new IntersectionObserver( - this.callbackRouter_anchor, - { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - } - )), - this.observer.observe( - document.getElementById(t.dataset.jos_anchor.substring(1)) - )) - : // add observer for element - ((this.observer = new IntersectionObserver(this.callbackRouter, { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - })), - this.observer.observe(t)); - } - // add observer for element - ), - // debug info - 1 == this.debug && - console.log( - "JOS [" + Date.now() + "] [DEBUG]\n : Initialized\n |", - { log_element_object: this.boxes } - ); - } - // initialize JOS class - init(t = {}) { - // apply options if value is not undefined - t && - (null != t.once && (this.default_once = t.once), - null != t.animation && (this.default_animation = t.animation), - null != t.timingFunction && - (this.default_timingFunction = t.timingFunction), - null != t.threshold && (this.default_threshold = t.threshold), - null != t.intersectionRatio - ? (console.warn( - "JOS [" + - Date.now() + - "] [WARN] \n : IntersectionRatio is deprecated\n | Use threshold instead." - ), - (this.default_intersectionRatio = - 1 == t.intersectionRatio ? 0.99 : t.intersectionRatio)) - : (this.default_intersectionRatio = - 1 == this.default_threshold ? 0.99 : this.default_threshold), - null != t.duration && (this.default_duration = t.duration), - null != t.delay && (this.default_delay = t.delay), - null != t.disable && (this.disable = t.disable), - null != t.rootMargin - ? (this.default_rootMargin = t.rootMargin) - : (null == t.rootMarginTop && null == t.rootMarginBottom) || - (this.default_rootMargin = - (null != t.rootMarginTop ? t.rootMarginTop : "-10%") + - " 0% " + - (null != t.rootMarginBottom ? t.rootMarginBottom : "-40%") + - " 0%"), - // debug info for debug mode - 1 == t.debugMode && ((this.debug = !0), this.debugLogger())), - // add global css for jos - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;}" - ), - 1 == this.disable - ? (this.rst(), - 1 == this.debug && - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Disbaled")) - : (1 == this.debug && - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Started"), - this.animationInit()); - } - // reset common function - rst = (t = 0) => { - // 0 resets to initial state (opacity 0 all elements) - this.boxes.forEach((e) => { - // reset to initial state - 0 == t - ? e.classList.remove("jos-" + e.dataset.jos_animation) - : // reset to final state - e.classList.add("jos-" + e.dataset.jos_animation), - // unobserve element - this.observer.unobserve(e); - }), - // reset jos css class - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - ";}" - ); - }; - // start the animation class - start() { - this.disable = !1; - } - // reset the animation class - reset(t = 0) { - // 0 resets to initial state (opacity 0 all elements) - // 1 resets to final state (opacity 1 all elements) - // -1 re initialize variables (opacity 1 for elements that are in view only) - let e = ""; - return ( - 0 == t - ? ((this.disable = !1), - this.rst(1), - (e = "Reset | In initial state (ie: Opacity 0 all elements)")) - : -1 == t - ? (this.rst(0), - this.animationInit(), - (e = - "Reset | Re-initialize variables (opacity 1 for elements that are in view only)")) - : (this.rst(0), - (e = "Reset | In final state (ie: Opacity 1 all elements)")), - (this.disable = !1), - // return this; - // debug info - 1 == this.debug && - console.info("JOS [" + Date.now() + "] [STATUS]\n : " + e), - !0 - ); - } - // stop the animation class - stop(t = 0) { - // -1 = disable and reset to initial state (opacity 0) - // 0 or any = disable and reset to final state (opacity 1) - // 1 = disable in place - var e = ""; - return ( - -1 == t - ? ((this.disable = !0), - this.rst(1), - (e = "Disabled | Reset to initial state (ie: Opacity 0)")) - : 1 == t - ? ((this.disable = !0), (e = "Disabled | Elements in place")) - : ((this.disable = !0), - this.rst(0), - (e = "Disabled | Reset to final state (ie: Opacity 1)")), - 1 == this.debug && - console.info("JOS [" + Date.now() + "] [STATUS]\n : " + e), - this.observer.disconnect(), - !0 - ); - // return this; - } - // destroy the animation class - destroy() { - return ( - this.rst(), - this.boxes.forEach((t) => { - // remove jos class from all element - t.classList.remove("jos"), - t.classList.remove("jos-" + t.dataset.jos_animation); - }), - // console.log("JOS Destroyed"); - // debug info - 1 == this.debug && - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Destroyed"), - null - ); - // return this; - } -})(); -// By Jesvi Jonathan diff --git a/dist/v0.7/jos.dev.js b/dist/v0.7/jos.dev.js deleted file mode 100644 index 8caa403..0000000 --- a/dist/v0.7/jos.dev.js +++ /dev/null @@ -1,623 +0,0 @@ -class jos { - // JOS global parameter - default_once = false; - default_animation = "fade"; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_passive = true; - debug = false; - disable = false; - // Package Info - version = "0.7 (Development)"; - author = "Jesvi Jonathan"; - github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - // Read DOM - jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - boxes = document.querySelectorAll(".jos"); - - constructor() { - // will be completed later - } - - //Init Debugger - debugLogger(type = 0) { - if (type == 0 || type == 1) { - console.info( - "JOS " + - ("[" + Date.now() + "] [INFO]\n") + - " : Javascript On Scroll Animation Library\n" + - (" | Version: " + this.version + "\n") + - (" | Author: " + this.author + "\n") + - (" | Github: " + this.github + "\n\n") - ); - } - if (type == 0 || type == 2) { - console.info( - "JOS " + - ("[" + Date.now() + "] [INFO]\n") + - " : Params \n" + - (" | Global Animation: " + this.default_animation + "\n") + - (" | Global Duration: " + this.default_duration + "\n") + - (" | Global Timing Function: " + - this.default_timingFunction + - "\n") + - (" | Global Delay: " + this.default_delay + "\n") + - (" | Global Once: " + this.default_once + "\n") + - (" | Global Intersection Ratio: " + - this.default_intersectionRatio + - "\n") + - (" | Global Threshold: " + this.default_threshold + "\n") + - (" | Global Root Margin: " + this.default_rootMargin + "\n") + - (" | Passive: " + this.default_passive + "\n") + - (" | Debug Mode: " + this.debug + "\n") + - "\n" - ); - } - - console.info( - "JOS " + - ("[" + Date.now() + "] [INFO]\n") + - " : Debugging (Enable Verbose Mode to see more info)\n" + - "\n" - ); - } - // callback for anchor observer - callbackRouter_anchor = (entries, observer) => { - let entry = entries[0]; - let parentTarget = entry.target; - // console.log(parentTarget); - - // get all elements with the same anchor - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - - elem.forEach((target) => { - // console.log(target); - - let text_once = ""; - let text_invoke = ""; - let state = ""; - let text_target = ""; - let text_duration = ""; - let text_timingFunction = ""; - let text_delay = ""; - let text_iterationCount = ""; - let target_jos_animation = target.dataset.jos_animation; - - if (entry.intersectionRatio > this.default_intersectionRatio) { - state = "Enter"; - // add to element counter - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - text_iterationCount = "\n | Counter : " + counter_value; - } - // start animation - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - - // check for element invoke function - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - text_invoke = "\n | Invoked : " + target.dataset.jos_invoke; - } - - // once or n times on viewport logic - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - // target.classList.remove("jos"); - // console.log("Removed-Observer"); - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - - target.dataset.jos_anchor = null; - - text_once = "\n | Once : Removed Observer (1)"; - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - - target.dataset.jos_anchor = null; - - text_once = - "\n | Once : Removed Observer (" + - target.dataset.jos_once + - ")"; - } - } - } - - // iiterate the counter for the element - } else { - // revert animation - state = "Exit"; - target.classList.add("jos-" + target_jos_animation); - - // check for element invoke function - if (target.dataset.jos_invoke_out != undefined) { - window[target.dataset.jos_invoke_out](target); - text_invoke = "\n | Invoked : " + target.dataset.jos_invoke_out; - } - // console.log("jos-" + target_jos_animation); - } - - if (target.id != "") { - text_target = "\n | ID : " + target.id; - } - if (target.dataset.jos_duration != undefined) { - text_duration = - "\n | Duration : " + target.dataset.jos_duration + "s"; - } - - if (this.debug == true) { - console.debug( - "JOS " + - ("[" + Date.now() + "] [DEBUG]\n") + - " : On-" + - state + - " (" + - target.tagName + - ") Info" + - "\n | Anchor : " + - parentTarget.id + - text_target + - "\n | Class : (" + - target.className + - ")\n | Intersection Ratio : (" + - entry.intersectionRatio + - " ~ " + - this.default_intersectionRatio + - ")\n | Animation : " + - target.dataset.jos_animation + - text_duration + - text_delay + - text_timingFunction + - text_once + - text_iterationCount + - text_invoke - ); - } - }); - }; - - callbackRouter = (entries, observer, type = 1) => { - if (this.disable == true) { - return; - } - // target/entry being observed - let entry = entries[0]; - let target = entry.target; - // debug variable - let text_once = ""; - let text_invoke = ""; - let state = ""; - let text_target = ""; - let text_duration = ""; - let text_timingFunction = ""; - let text_delay = ""; - let text_iterationCount = ""; - let target_jos_animation = target.dataset.jos_animation; - - // Check for viewport intersection - if (entry.intersectionRatio > this.default_intersectionRatio) { - state = "Enter"; - // add to element counter - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - text_iterationCount = "\n | Counter : " + counter_value; - } - // start animation - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - - // check for element invoke function - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - text_invoke = "\n | Invoked : " + target.dataset.jos_invoke; - } - - // once or n times on viewport logic - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - // target.classList.remove("jos"); - // console.log("Removed-Observer"); - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - text_once = "\n | Once : Removed Observer (1)"; - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - text_once = - "\n | Once : Removed Observer (" + - target.dataset.jos_once + - ")"; - } - } - } - - // iiterate the counter for the element - } else { - // revert animation - state = "Exit"; - target.classList.add("jos-" + target_jos_animation); - - // check for element invoke function - if (target.dataset.jos_invoke_out != undefined) { - window[target.dataset.jos_invoke_out](target); - text_invoke = "\n | Invoked : " + target.dataset.jos_invoke_out; - } - // console.log("jos-" + target_jos_animation); - } - - // debug info - if (target.id != "") { - text_target = "\n | ID : " + target.id; - } - - if (target.dataset.jos_duration != undefined) { - text_duration = "\n | Duration : " + target.dataset.jos_duration + "s"; - } - if (target.dataset.jos_timingFunction != undefined) { - text_timingFunction = - "\n | Timing Function : " + target.dataset.jos_timingFunction; - } - - if (target.dataset.jos_delay != undefined) { - text_delay = "\n | Delay : " + target.dataset.jos_delay + "s"; - } - // debug info - if (this.debug == true) { - console.debug( - "JOS " + - ("[" + Date.now() + "] [DEBUG]\n") + - " : On-" + - state + - " (" + - target.tagName + - ") Info" + - text_target + - "\n | Class : (" + - target.className + - ")\n | Intersection Ratio : (" + - entry.intersectionRatio + - " ~ " + - this.default_intersectionRatio + - ")\n | Animation : " + - target.dataset.jos_animation + - text_duration + - text_delay + - text_timingFunction + - text_once + - text_iterationCount + - text_invoke - ); - } - }; - - // initialize the observer - animationInit() { - let log_text = ""; - this.boxes.forEach((box) => { - // observer.observe(box);; - // check for default values - let object_default_once = box.dataset.jos_once; - let object_default_itterationCount = box.dataset.jos_count; - let object_default_animation = box.dataset.jos_animation; - let object_default_timingFunction = box.dataset.jos_timingFunction; - let object_default_duration = box.dataset.jos_duration; - let object_default_delay = box.dataset.jos_delay; - - // set element attribute values - if (object_default_once != undefined && object_default_once != "false") { - //object_default_once = this.default_once; - if (object_default_once == "true") { - box.setAttribute("data-jos_once", "1"); - } - // checl and apply condition only if the value is a number - else if (object_default_once.match(/^[0-9]+$/)) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", "false"); - } - } - // if ( - // object_default_itterationCount == undefined || - // object_default_itterationCount <= 0 - // ) { - // console.log("deprecated : jos-itterationCount is not defined or <= 0"); - // box.dataset.jos_itterationCount = 1; - // box.setAttribute( - // "data-jos_iterationCount", - // object_default_itterationCount - // ); - // } else { - // } - if (object_default_animation != undefined) { - //object_default_animation = this.default_animation; - box.setAttribute("data-jos_animation", object_default_animation); - } else { - box.setAttribute("data-jos_animation", this.default_animation); - object_default_animation = this.default_animation; - } - if (object_default_timingFunction != undefined) { - //object_default_timingFunction = this.default_timingFunction; - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - if (object_default_duration != undefined) { - //object_default_duration = this.default_duration; - box.setAttribute("data-jos_duration", object_default_duration); - } - if (object_default_delay != undefined) { - //object_default_duration = this.default_duration; - box.setAttribute("data-jos_delay", object_default_delay); - } - - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - - // refresh the dom to apply the re insert the elements in the body - - if (box.dataset.jos_anchor != undefined) { - this.observer = new IntersectionObserver(this.callbackRouter_anchor, { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }); - this.observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - this.observer = new IntersectionObserver(this.callbackRouter, { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }); - this.observer.observe(box); - } - - // add observer for element - }); - // debug info - if (this.debug == true) { - console.log( - "JOS " + - ("[" + Date.now() + "] [DEBUG]\n") + - " : Initialized\n |", - { - log_element_object: this.boxes, - } - ); - - // console.log( - // "JOS : Init\n" + - // box.id + - // " | " + - // box.className + - // " | " + - // box.tagName + - // "\n" + - // " | " + - // object_default_animation - // ); - } - } - - // initialize JOS class - init(options = {}) { - // apply options if value is not undefined - - if (options) { - if (options.once != undefined) { - this.default_once = options.once; - } - if (options.animation != undefined) { - this.default_animation = options.animation; - } - if (options.timingFunction != undefined) { - this.default_timingFunction = options.timingFunction; - } - if (options.threshold != undefined) { - this.default_threshold = options.threshold; - } - - if (options.intersectionRatio != undefined) { - console.warn( - "JOS [" + - Date.now() + - "] [WARN] \n : IntersectionRatio is deprecated\n" + - " | Use threshold instead." - ); - this.default_intersectionRatio = - options.intersectionRatio == 1 ? 0.99 : options.intersectionRatio; - } else { - this.default_intersectionRatio = - this.default_threshold == 1 ? 0.99 : this.default_threshold; - } - if (options.duration != undefined) { - this.default_duration = options.duration; - } - if (options.delay != undefined) { - this.default_delay = options.delay; - } - if (options.disable != undefined) { - this.disable = options.disable; - } - if (options.rootMargin != undefined) { - this.default_rootMargin = options.rootMargin; - } else { - if ( - options.rootMarginTop != undefined || - options.rootMarginBottom != undefined - ) { - this.default_rootMargin = - (options.rootMarginTop != undefined - ? options.rootMarginTop - : "-10%") + - " 0% " + - (options.rootMarginBottom != undefined - ? options.rootMarginBottom - : "-40%") + - " 0%"; - } - } - // debug info for debug mode - if (options.debugMode == true) { - this.debug = true; - this.debugLogger(); - } - } - // add global css for jos - this.jos_stylesheet.insertRule( - ".jos {" + - // ("transition-timing-function: " + - // this.default_timingFunction + - // " !important;") + - // ("transition-duration: " + this.default_duration + "s !important;") + - // ("transition-delay: " + this.default_delay + "s; ") + - ("transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;") + - "}" - ); - if (this.disable == true) { - this.rst(); - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Disbaled"); - } - } else { - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Started"); - } - this.animationInit(); - } - } - // reset common function - rst = (type = 0) => { - // 0 resets to initial state (opacity 0 all elements) - this.boxes.forEach((box) => { - // reset to initial state - if (type == 0) { - box.classList.remove("jos-" + box.dataset.jos_animation); - } else { - // reset to final state - box.classList.add("jos-" + box.dataset.jos_animation); - } - // unobserve element - this.observer.unobserve(box); - }); - - // reset jos css class - this.jos_stylesheet.insertRule( - ".jos {" + - ("transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - ";") + - "}" - ); - }; - - // start the animation class - start() { - this.disable = false; - } - // reset the animation class - reset(type = 0) { - // 0 resets to initial state (opacity 0 all elements) - // 1 resets to final state (opacity 1 all elements) - // -1 re initialize variables (opacity 1 for elements that are in view only) - - let returnString = ""; - - if (type == 0) { - this.disable = false; - this.rst(1); - - returnString = "Reset | In initial state (ie: Opacity 0 all elements)"; - } else if (type == -1) { - this.rst(0); - this.animationInit(); - returnString = - "Reset | Re-initialize variables (opacity 1 for elements that are in view only)"; - } - // console.log("JOS Reset"); - else { - this.rst(0); - returnString = "Reset | In final state (ie: Opacity 1 all elements)"; - } - - this.disable = false; - // return this; - // debug info - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [STATUS]\n : " + returnString); - } - return true; - } - // stop the animation class - stop(type = 0) { - // -1 = disable and reset to initial state (opacity 0) - // 0 or any = disable and reset to final state (opacity 1) - // 1 = disable in place - var returnString = ""; - if (type == -1) { - this.disable = true; - this.rst(1); - returnString = "Disabled | Reset to initial state (ie: Opacity 0)"; - } else if (type == 1) { - this.disable = true; - returnString = "Disabled | Elements in place"; - } else { - this.disable = true; - this.rst(0); - returnString = "Disabled | Reset to final state (ie: Opacity 1)"; - } - - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [STATUS]\n : " + returnString); - } - this.observer.disconnect(); - return true; - // return this; - } - // destroy the animation class - destroy() { - this.rst(); - this.boxes.forEach((box) => { - // remove jos class from all element - box.classList.remove("jos"); - box.classList.remove("jos-" + box.dataset.jos_animation); - }); - // console.log("JOS Destroyed"); - // debug info - if (this.debug == true) { - console.info("JOS [" + Date.now() + "] [DEBUG]\n : Destroyed"); - } - return null; - // return this; - } -} - -// Create an JOS object -const JOS = new jos(); -// By Jesvi Jonathan diff --git a/dist/v0.7/jos.js b/dist/v0.7/jos.js deleted file mode 100644 index 558c6b2..0000000 --- a/dist/v0.7/jos.js +++ /dev/null @@ -1,264 +0,0 @@ -const JOS = new (class jos { - default_once = !1; - default_animation = "fade"; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_passive = !0; - debug = !1; - disable = !1; - version = "0.7"; - author = "Jesvi Jonathan"; - github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - boxes = document.querySelectorAll(".jos"); - constructor() {} - debugLogger(t = 0) { - console.warn( - "JOS | This version of JOS package does not support debug mode, Please use jos.debug.js for debugging." - ); - } - callbackRouter_anchor = (t, e) => { - let s = t[0], - a = s.target; - document - .querySelectorAll("[data-jos_anchor='#" + a.id + "']") - .forEach((t) => { - let a = "", - o = "", - i = "", - n = "", - l = "", - d = "", - r = t.dataset.jos_animation; - if (s.intersectionRatio > this.default_intersectionRatio) { - if (((i = "Enter"), null != t.dataset.jos_counter)) { - let e = parseInt(t.dataset.jos_counter); - e++, (t.dataset.jos_counter = e), (d = "\n | Counter : " + e); - } - r && - (t.classList.remove("jos-" + r), - null != t.dataset.jos_invoke && - (window[t.dataset.jos_invoke](t), - (o = "\n | Invoked : " + t.dataset.jos_invoke)), - (null == t.dataset.jos_once && "false" == t.dataset.jos_once) || - ("true" == t.dataset.jos_once - ? (e.unobserve(t), - (t.dataset.jos_anchor = null), - (a = "\n | Once : Removed Observer (1)")) - : t.dataset.jos_counter >= t.dataset.jos_once && - (e.unobserve(t), - (t.dataset.jos_anchor = null), - (a = - "\n | Once : Removed Observer (" + - t.dataset.jos_once + - ")")))); - } else - (i = "Exit"), - t.classList.add("jos-" + r), - null != t.dataset.jos_invoke_out && - (window[t.dataset.jos_invoke_out](t), - (o = "\n | Invoked : " + t.dataset.jos_invoke_out)); - "" != t.id && (n = "\n | ID : " + t.id), - null != t.dataset.jos_duration && - (l = "\n | Duration : " + t.dataset.jos_duration + "s"), - this.debug; - }); - }; - callbackRouter = (t, e, s = 1) => { - if (1 == this.disable) return; - let a = t[0], - o = a.target, - i = "", - n = "", - l = "", - d = "", - r = "", - u = "", - h = "", - _ = "", - c = o.dataset.jos_animation; - if (a.intersectionRatio > this.default_intersectionRatio) { - if (((l = "Enter"), null != o.dataset.jos_counter)) { - let t = parseInt(o.dataset.jos_counter); - t++, (o.dataset.jos_counter = t), (_ = "\n | Counter : " + t); - } - c && - (o.classList.remove("jos-" + c), - null != o.dataset.jos_invoke && - (window[o.dataset.jos_invoke](o), - (n = "\n | Invoked : " + o.dataset.jos_invoke)), - (null == o.dataset.jos_once && "false" == o.dataset.jos_once) || - ("true" == o.dataset.jos_once - ? (e.unobserve(o), (i = "\n | Once : Removed Observer (1)")) - : o.dataset.jos_counter >= o.dataset.jos_once && - (e.unobserve(o), - (i = - "\n | Once : Removed Observer (" + - o.dataset.jos_once + - ")")))); - } else - (l = "Exit"), - o.classList.add("jos-" + c), - null != o.dataset.jos_invoke_out && - (window[o.dataset.jos_invoke_out](o), - (n = "\n | Invoked : " + o.dataset.jos_invoke_out)); - "" != o.id && (d = "\n | ID : " + o.id), - null != o.dataset.jos_duration && - (r = "\n | Duration : " + o.dataset.jos_duration + "s"), - null != o.dataset.jos_timingFunction && - (u = "\n | Timing Function : " + o.dataset.jos_timingFunction), - null != o.dataset.jos_delay && - (h = "\n | Delay : " + o.dataset.jos_delay + "s"), - this.debug; - }; - animationInit() { - this.boxes.forEach((t) => { - let e = t.dataset.jos_once, - s = (t.dataset.jos_count, t.dataset.jos_animation), - a = t.dataset.jos_timingFunction, - o = t.dataset.jos_duration, - i = t.dataset.jos_delay; - null != e && - "false" != e && - ("true" == e - ? t.setAttribute("data-jos_once", "1") - : e.match(/^[0-9]+$/) - ? t.setAttribute("data-jos_once", e) - : t.setAttribute("data-jos_once", "false")), - null != s - ? t.setAttribute("data-jos_animation", s) - : (t.setAttribute("data-jos_animation", this.default_animation), - (s = this.default_animation)), - null != a && t.setAttribute("data-jos_timingFunction", a), - null != o && t.setAttribute("data-jos_duration", o), - null != i && t.setAttribute("data-jos_delay", i), - t.setAttribute("data-jos_counter", "0"), - t.classList.add("jos-" + s), - null != t.dataset.jos_anchor - ? ((this.observer = new IntersectionObserver( - this.callbackRouter_anchor, - { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - } - )), - this.observer.observe( - document.getElementById(t.dataset.jos_anchor.substring(1)) - )) - : ((this.observer = new IntersectionObserver(this.callbackRouter, { - rootMargin: this.default_rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - })), - this.observer.observe(t)); - }), - this.debug; - } - init(t = {}) { - t && - (null != t.once && (this.default_once = t.once), - null != t.animation && (this.default_animation = t.animation), - null != t.timingFunction && - (this.default_timingFunction = t.timingFunction), - null != t.threshold && (this.default_threshold = t.threshold), - null != t.intersectionRatio - ? (this.default_intersectionRatio = - 1 == t.intersectionRatio ? 0.99 : t.intersectionRatio) - : (this.default_intersectionRatio = - 1 == this.default_threshold ? 0.99 : this.default_threshold), - null != t.duration && (this.default_duration = t.duration), - null != t.delay && (this.default_delay = t.delay), - null != t.disable && (this.disable = t.disable), - null != t.rootMargin - ? (this.default_rootMargin = t.rootMargin) - : (null == t.rootMarginTop && null == t.rootMarginBottom) || - (this.default_rootMargin = - (null != t.rootMarginTop ? t.rootMarginTop : "-10%") + - " 0% " + - (null != t.rootMarginBottom ? t.rootMarginBottom : "-40%") + - " 0%"), - 1 == t.debugMode && ((this.debug = !0), this.debugLogger())), - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;}" - ), - 1 == this.disable - ? (this.rst(), this.debug) - : (this.debug, this.animationInit()); - } - rst = (t = 0) => { - this.boxes.forEach((e) => { - 0 == t - ? e.classList.remove("jos-" + e.dataset.jos_animation) - : e.classList.add("jos-" + e.dataset.jos_animation), - this.observer.unobserve(e); - }), - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - ";}" - ); - }; - start() { - this.disable = !1; - } - reset(t = 0) { - let e = ""; - return ( - 0 == t - ? ((this.disable = !1), - this.rst(1), - (e = "Reset | In initial state (ie: Opacity 0 all elements)")) - : -1 == t - ? (this.rst(0), - this.animationInit(), - (e = - "Reset | Re-initialize variables (opacity 1 for elements that are in view only)")) - : (this.rst(0), - (e = "Reset | In final state (ie: Opacity 1 all elements)")), - (this.disable = !1), - this.debug, - !0 - ); - } - stop(t = 0) { - return ( - -1 == t - ? ((this.disable = !0), - this.rst(1), - "Disabled | Reset to initial state (ie: Opacity 0)") - : 1 == t - ? ((this.disable = !0), "Disabled | Elements in place") - : ((this.disable = !0), - this.rst(0), - "Disabled | Reset to final state (ie: Opacity 1)"), - this.debug, - this.observer.disconnect(), - !0 - ); - } - destroy() { - return ( - this.rst(), - this.boxes.forEach((t) => { - t.classList.remove("jos"), - t.classList.remove("jos-" + t.dataset.jos_animation); - }), - this.debug, - null - ); - } -})(); -// By Jesvi Jonathan diff --git a/dist/v0.7/jos.min.js b/dist/v0.7/jos.min.js deleted file mode 100644 index cef75e6..0000000 --- a/dist/v0.7/jos.min.js +++ /dev/null @@ -1,2 +0,0 @@ -const JOS = new class jos{default_once=!1;default_animation="fade";default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_passive=!0;debug=!1;disable=!1;version="0.7 (Minified)";author="Jesvi Jonathan";github="https://github.com/jesvijonathan/JOS-Animation-Library";jos_stylesheet=document.getElementById("jos-stylesheet").sheet;boxes=document.querySelectorAll(".jos");constructor(){}callbackRouter_anchor=(t,e)=>{let s=t[0],a=s.target;document.querySelectorAll("[data-jos_anchor='#"+a.id+"']").forEach((t=>{let a=t.dataset.jos_animation;if(s.intersectionRatio>this.default_intersectionRatio){if(null!=t.dataset.jos_counter){let e=parseInt(t.dataset.jos_counter);e++,t.dataset.jos_counter=e}a&&(t.classList.remove("jos-"+a),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&(e.unobserve(t),t.dataset.jos_anchor=null))}else t.classList.add("jos-"+a),null!=t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t)}))};callbackRouter=(t,e)=>{if(1==this.disable)return;let s=t[0],a=s.target,o=a.dataset.jos_animation;if(s.intersectionRatio>this.default_intersectionRatio){if(null!=a.dataset.jos_counter){let t=parseInt(a.dataset.jos_counter);t++,a.dataset.jos_counter=t}o&&(a.classList.remove("jos-"+o),null!=a.dataset.jos_invoke&&window[a.dataset.jos_invoke](a),null==a.dataset.jos_once&&"false"==a.dataset.jos_once||("true"==a.dataset.jos_once||a.dataset.jos_counter>=a.dataset.jos_once)&&e.unobserve(a))}else a.classList.add("jos-"+o),null!=a.dataset.jos_invoke_out&&window[a.dataset.jos_invoke_out](a)};animationInit(){this.boxes.forEach((t=>{let e=t.dataset.jos_once,s=(t.dataset.jos_count,t.dataset.jos_animation),a=t.dataset.jos_timingFunction,o=t.dataset.jos_duration,i=t.dataset.jos_delay;null!=e&&"false"!=e&&("true"==e?t.setAttribute("data-jos_once","1"):e.match(/^[0-9]+$/)?t.setAttribute("data-jos_once",e):t.setAttribute("data-jos_once","false")),null!=s?t.setAttribute("data-jos_animation",s):(t.setAttribute("data-jos_animation",this.default_animation),s=this.default_animation),null!=a&&t.setAttribute("data-jos_timingFunction",a),null!=o&&t.setAttribute("data-jos_duration",o),null!=i&&t.setAttribute("data-jos_delay",i),t.setAttribute("data-jos_counter","0"),t.classList.add("jos-"+s),null!=t.dataset.jos_anchor?(this.observer=new IntersectionObserver(this.callbackRouter_anchor,{rootMargin:this.default_rootMargin,threshold:this.default_threshold,passive:this.default_passive}),this.observer.observe(document.getElementById(t.dataset.jos_anchor.substring(1)))):(this.observer=new IntersectionObserver(this.callbackRouter,{rootMargin:this.default_rootMargin,threshold:this.default_threshold,passive:this.default_passive}),this.observer.observe(t))}))}init(t={}){t&&(null!=t.once&&(this.default_once=t.once),null!=t.animation&&(this.default_animation=t.animation),null!=t.timingFunction&&(this.default_timingFunction=t.timingFunction),null!=t.threshold&&(this.default_threshold=t.threshold),null!=t.intersectionRatio?this.default_intersectionRatio=1==t.intersectionRatio?.99:t.intersectionRatio:this.default_intersectionRatio=1==this.default_threshold?.99:this.default_threshold,null!=t.duration&&(this.default_duration=t.duration),null!=t.delay&&(this.default_delay=t.delay),null!=t.disable&&(this.disable=t.disable),null!=t.rootMargin?this.default_rootMargin=t.rootMargin:null==t.rootMarginTop&&null==t.rootMarginBottom||(this.default_rootMargin=(null!=t.rootMarginTop?t.rootMarginTop:"-10%")+" 0% "+(null!=t.rootMarginBottom?t.rootMarginBottom:"-40%")+" 0%"),t.debugMode),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s !important;}"),1==this.disable?this.rst():this.animationInit()}rst=(t=0)=>{this.boxes.forEach((e=>{0==t?e.classList.remove("jos-"+e.dataset.jos_animation):e.classList.add("jos-"+e.dataset.jos_animation),this.observer.unobserve(e)})),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+";}")};start(){this.disable=!1}reset(t=0){return 0==t?(this.disable=!1,this.rst(1)):-1==t?(this.rst(0),this.animationInit()):this.rst(0),this.disable=!1,!0}stop(t=0){return-1==t?(this.disable=!0,this.rst(1)):1==t?this.disable=!0:(this.disable=!0,this.rst(0)),this.observer.disconnect(),!0}destroy(){return this.rst(),this.boxes.forEach((t=>{t.classList.remove("jos"),t.classList.remove("jos-"+t.dataset.jos_animation)})),null}}; -// By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.8.8/.htaccess b/dist/v0.8.8/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/v0.8.8/jos.css b/dist/v0.8.8/jos.css deleted file mode 100644 index afee2e6..0000000 --- a/dist/v0.8.8/jos.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:.4s ease-in-out}.jos{display:block}.jos-anchor{opacity:0}.jos-static{transform:translate(0,0);opacity:1}.jos-no-transition{transition-timing-function:linear;transition-duration:0s}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{transform:perspective(2500px) rotateY(-100deg);opacity:0}.jos-flip-left{transform:perspective(2500px) rotateY(100deg);opacity:0}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-360deg) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(360deg) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=cubic-bezier]{transition-timing-function:cubic-bezier(0.1,0.7,1,0.1)!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5,end)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}[data-jos_timing_function=initial]{transition-timing-function:initial!important}[data-jos_timing_function=inherit]{transition-timing-function:inherit!important}[data-jos_timing_function=unset]{transition-timing-function:unset!important}[data-jos_duration="0"]{transition-duration:0s!important}[data-jos_duration="0.1"]{transition-duration:.1s!important}[data-jos_duration="0.2"]{transition-duration:.2s!important}[data-jos_duration="0.3"]{transition-duration:.3s!important}[data-jos_duration="0.4"]{transition-duration:.4s!important}[data-jos_duration="0.5"]{transition-duration:.5s!important}[data-jos_duration="0.6"]{transition-duration:.6s!important}[data-jos_duration="0.7"]{transition-duration:.7s!important}[data-jos_duration="0.8"]{transition-duration:.8s!important}[data-jos_duration="0.9"]{transition-duration:.9s!important}[data-jos_duration="1"],[data-jos_duration="6"]{transition-duration:1s!important}[data-jos_duration="2"],[data-jos_duration="7"]{transition-duration:2s!important}[data-jos_duration="3"],[data-jos_duration="8"]{transition-duration:3s!important}[data-jos_duration="4"],[data-jos_duration="9"]{transition-duration:4s!important}[data-jos_duration="10"],[data-jos_duration="5"]{transition:5s!important}[data-jos_delay="0"]{transition-delay:0s!important}[data-jos_delay="0.1"]{transition-delay:0.1s!important}[data-jos_delay="0.2"]{transition-delay:0.2s!important}[data-jos_delay="0.3"]{transition-delay:0.3s!important}[data-jos_delay="0.4"]{transition-delay:0.4s!important}[data-jos_delay="0.5"]{transition-delay:0.5s!important}[data-jos_delay="0.6"]{transition-delay:0.6s!important}[data-jos_delay="0.7"]{transition-delay:0.7s!important}[data-jos_delay="0.8"]{transition-delay:0.8s!important}[data-jos_delay="0.9"]{transition-delay:0.9s!important}[data-jos_delay="1"]{transition-delay:1s!important}[data-jos_delay="2"]{transition-delay:2s!important}[data-jos_delay="3"]{transition-delay:3s!important}[data-jos_delay="4"]{transition-delay:4s!important}[data-jos_delay="5"]{transition-delay:5s!important}.jos-slide-horizontal-play,.jos-slide-play{transition:1s;animation:.7s ease-in-out infinite alternate-reverse jos-slide-play}@keyframes jos-slide-play{0%{transform:translateX(-100px)}100%{transform:translateX(100px)}}.jos-slide-vertical-play{animation:.7s ease-in-out infinite alternate-reverse jos-slide-vertical-play}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}100%{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:1s infinite alternate jos-zoom-in-play}@keyframes jos-zoom-in-play{0%{transform:scale(1);opacity:0}100%{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:.5s linear infinite alternate jos-zoom-play}@keyframes jos-zoom-play{0%{transform:scale(1);opacity:0}100%{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:.7s infinite alternate jos-flip-play}@keyframes jos-flip-play{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}.jos-rotate-play{animation:1s linear infinite alternate-reverse forwards jos-rotate-play;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.jos-spin-play{animation:1.5s infinite alternate jos-spin-play}@keyframes jos-spin-play{0%{transform:rotate(0);opacity:0}100%{transform:rotate(360deg);opacity:1}}.jos-revolve-play{animation:1.5s infinite alternate jos-revolve-play}@keyframes jos-revolve-play{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.jos-grow-play,.jos-shrink-play{animation:1s infinite alternate jos-grow-play}@keyframes jos-grow-play{0%{transform:scale(0)}100%{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:.7s infinite alternate jos-stretch-play}@keyframes jos-stretch-play{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:.7s infinite alternate-reverse jos-stretch-vertical-play}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}.jos-fade-play{animation:.8s infinite alternate jos-fade-play}@keyframes jos-fade-play{0%{opacity:0}100%{opacity:1}}.jos-fade-horizontal-play{animation:1s infinite alternate-reverse jos-fade-horizontal-play}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}100%{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:1s infinite alternate-reverse jos-fade-vertical-play}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}100%{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:1s steps(1,end) infinite jos-blink-play}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} /* JOS By Jesvi Jonathan*/ \ No newline at end of file diff --git a/dist/v0.8.8/jos.debug.js b/dist/v0.8.8/jos.debug.js deleted file mode 100644 index f472a00..0000000 --- a/dist/v0.8.8/jos.debug.js +++ /dev/null @@ -1,526 +0,0 @@ -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - default_mirror = undefined; - - debug = false; - disable = false; - - static version = "0.8.8 (Debug)"; - static author = "Jesvi Jonathan"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - scrollEnter = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Github: ${jos.github}\n`); - } - //debugger = () => null; - debugger(type = 0) { - if (type == 0 && this.debugMode) { - this.version(); - console.log(`JOS Settings: - - animation: ${this.default_animation} - - once: ${this.default_once} - - animationinverse: ${this.default_animationinverse} - - timingFunction: ${this.default_timingFunction} - - duration: ${this.default_duration} - - delay: ${this.default_delay} - - threshold: ${this.default_threshold} - - startVisible: ${this.default_startVisible} - - scrolldirection: ${this.default_scrolldirection} - - intersectionRatio: ${this.default_intersectionRatio} - - rootMargin: ${this.default_rootMargin} - - disable: ${this.disable} - - debugMode: ${this.debugMode}\n`); - } - console.log("JOS Initialized:\n\n"); - if ((type == 1 || type == 0) && this.debugMode) { - console.log(this.boxes || "No Elements Found"); - } - } - - callbackRouter_anchor = (entries, observer) => { - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }); - }; - - // var box = target; - // console.log(box); - // const rootmargin = " 0% 0% -30% 0%"; - callbackScroller = (scl) => { - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; - - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin; - const rootMarginValues = rootMargin.split(" ").map(parseFloat); - const topMargin = (wh * rootMarginValues[0]) / 100; - const bottomMargin = (wh * rootMarginValues[2]) / 100; - - box.jos = { - rootMargin, - rootMarginValues, - topMargin, - bottomMargin, - }; - const elementRect = box.getBoundingClientRect(); - const elementTop = elementRect.top - box.jos.topMargin; - const elementBottom = elementRect.bottom - box.jos.bottomMargin; - - const windowScrollProgress = elementRect.top / wh; - - const rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); - - let scrollProgress = 0; - - if (rootScrollProgress < 0) { - scrollProgress = 0; - } else if (rootScrollProgress > 100) { - scrollProgress = 1; - } else { - scrollProgress = rootScrollProgress; - } - - box.jos = { - elementRect, - elementTop, - elementBottom, - windowScrollProgress, - rootScrollProgress, - scrollProgress, - }; - - window[box.dataset.jos_scroll](box); - }; - - document.onscroll = (e) => { - scl.forEach(updateBox); - }; - }; - - // window["jos_scroll_" + box.id](obj); - callbackRouter = (entries, observer, type = 1) => { - if (this.disable == true) { - return; - } - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } - - if (entry.isIntersecting) { - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter.push(target); - this.callbackScroller(this.scrollEnter); - } - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target.dataset.jos_mirror == "false") { - target.classList.remove("jos-no-mirror"); - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.toggle( - "jos-no-mirror", - target.dataset.jos_mirror == "false" - ); - - target.classList.add("jos-" + target_jos_animation); - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - ); - this.callbackScroller(this.scrollEnter); - } - } - }; - - animationInit() { - let doit = []; - this.boxes.forEach((box) => { - let object_default_once = box.dataset.jos_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = box.dataset.jos_animationinverse; - let object_default_timingFunction = box.dataset.jos_timingFunction; - let object_default_duration = box.dataset.jos_duration; - let object_default_delay = box.dataset.jos_delay; - let object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - - if (object_default_mirror == "false") { - box.setAttribute("data-jos_mirror", object_default_mirror); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => { - const isNegative = value.startsWith("-"); - return isNegative ? value.substring(1) : `-${value}`; - }) - .join(" "); - - // let rootMargin = " 10% 0% -30% 0%"; - - let box_observer = { - rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }); - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - } - - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); - } else { - box.classList.remove("jos-" + box.dataset.jos_animation); - } - }); - } - this.observers?.forEach((observer) => observer.disconnect()); - } - - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror" + " { transition: 0s forwards !important;}" - ); - //opacity " + s + ", transform - let property = "all "; - let s = - property + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - - styleSheet.insertRule( - ".jos {" + ("transition: " + s) + ";}" - ); - - this.jos_stylesheet = styleSheet; - } - - getBoxes() { - this.boxes = undefined; - - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); - } - return this.boxes; - } - - getDefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrollDirection, - intersectionRatio, - duration, - mirror, - delay, - debugMode, - disable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = animationinverse || this.default_animation; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrollDirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - this.disable = disable || this.disable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - this.default_mirror = mirror || this.default_mirror; - } - - init(options = this.options) { - this.options = options; - this.getDefault(options); - this.getStylesheet(); - this.getBoxes(); - if (this.debugMode) { - this.debugger(); - } - if (this.disable) { - this.stop(); - } else { - this.start(); - } - } - - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); - } - this.disable = false; - return "Started"; - } - - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; - } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); - } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; - } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; - } - } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; - } -} -const JOS = new jos(); - -if (typeof module !== "undefined" && typeof module.exports !== "undefined") { - module.exports = JOS; -} -// By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.8.8/jos.js b/dist/v0.8.8/jos.js deleted file mode 100644 index 51942c0..0000000 --- a/dist/v0.8.8/jos.js +++ /dev/null @@ -1,389 +0,0 @@ -class jos { - default_once = !1; - default_animation = "fade"; - default_animationinverse = void 0; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = void 0; - default_scrolldirection = void 0; - default_passive = !0; - default_mirror = void 0; - debug = !1; - disable = !1; - static version = "0.8.8"; - static author = "Jesvi Jonathan"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - options = {}; - jos_stylesheet = void 0; - boxes = void 0; - observers = []; - scrollEnter = []; - constructor() {} - version() { - console.log( - `JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Github: ${jos.github}\n` - ); - } - debugger(type = 0) { - 0 == type && - this.debugMode && - (this.version(), - console.log( - `JOS Settings:\n - animation: ${this.default_animation}\n - once: ${this.default_once}\n - animationinverse: ${this.default_animationinverse}\n - timingFunction: ${this.default_timingFunction}\n - duration: ${this.default_duration}\n - delay: ${this.default_delay}\n - threshold: ${this.default_threshold}\n - startVisible: ${this.default_startVisible}\n - scrolldirection: ${this.default_scrolldirection}\n - intersectionRatio: ${this.default_intersectionRatio}\n - rootMargin: ${this.default_rootMargin}\n - disable: ${this.disable}\n - debugMode: ${this.debugMode}\n` - )), - console.log("JOS Initialized:\n\n"), - (1 != type && 0 != type) || - !this.debugMode || - console.log(this.boxes || "No Elements Found"); - } - callbackRouter_anchor = (entries, observer) => { - let entry = entries[0], - parentTarget = entry.target; - document - .querySelectorAll("[data-jos_anchor='#" + parentTarget.id + "']") - .forEach((target) => { - let target_jos_animation = target.dataset.jos_animation, - target_jos_animationinverse = target.dataset.jos_animationinverse; - if (entry.isIntersecting) { - if (null != target.dataset.jos_counter) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++, (target.dataset.jos_counter = counter_value); - } - target_jos_animation && - (target.classList.remove("jos-" + target_jos_animation), - null != target.dataset.jos_invoke && - window[target.dataset.jos_invoke](target), - (null == target.dataset.jos_once && - "false" == target.dataset.jos_once) || - (("true" == target.dataset.jos_once || - target.dataset.jos_counter >= target.dataset.jos_once) && - observer.unobserve(target)), - null != target_jos_animationinverse && - target.classList.add("jos-" + target_jos_animationinverse)); - } else - (void 0 !== target.dataset.jos_scrolldirection && - "down" !== target.dataset.jos_scrolldirection && - "none" !== target.dataset.jos_scrolldirection) || - (target.classList.add("jos-" + target_jos_animation), - void 0 !== target.dataset.jos_invoke_out && - window[target.dataset.jos_invoke_out](target)); - }); - }; - callbackScroller = (scl) => { - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin, - rootMarginValues = rootMargin.split(" ").map(parseFloat), - topMargin = (wh * rootMarginValues[0]) / 100, - bottomMargin = (wh * rootMarginValues[2]) / 100; - box.jos = { - rootMargin: rootMargin, - rootMarginValues: rootMarginValues, - topMargin: topMargin, - bottomMargin: bottomMargin, - }; - const elementRect = box.getBoundingClientRect(), - elementTop = elementRect.top - box.jos.topMargin, - elementBottom = elementRect.bottom - box.jos.bottomMargin, - windowScrollProgress = elementRect.top / wh, - rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); - let scrollProgress = 0; - (scrollProgress = - rootScrollProgress < 0 - ? 0 - : rootScrollProgress > 100 - ? 1 - : rootScrollProgress), - (box.jos = { - elementRect: elementRect, - elementTop: elementTop, - elementBottom: elementBottom, - windowScrollProgress: windowScrollProgress, - rootScrollProgress: rootScrollProgress, - scrollProgress: scrollProgress, - }), - window[box.dataset.jos_scroll](box); - }; - document.onscroll = (e) => { - scl.forEach(updateBox); - }; - }; - callbackRouter = (entries, observer, type = 1) => { - if (1 == this.disable) return; - let entry = entries[0], - target = entry.target, - target_jos_animation = target.dataset.jos_animation, - target_jos_animationinverse = target.dataset.jos_animationinverse, - scroll_dir = 1; - if ( - ((scroll_dir = entry.boundingClientRect.top < 0 ? 0 : 1), - entry.isIntersecting) - ) { - if ( - ("false" != target.dataset.jos_scroll && - null != target.dataset.jos_scroll && - (this.scrollEnter.push(target), - this.callbackScroller(this.scrollEnter)), - null != target.dataset.jos_counter) - ) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++, (target.dataset.jos_counter = counter_value); - } - "false" == target.dataset.jos_mirror && - target.classList.remove("jos-no-mirror"), - target_jos_animation && - (target.classList.remove("jos-" + target_jos_animation), - null != target.dataset.jos_invoke && - window[target.dataset.jos_invoke](target), - (null == target.dataset.jos_once && - "false" == target.dataset.jos_once) || - (("true" == target.dataset.jos_once || - target.dataset.jos_counter >= target.dataset.jos_once) && - observer.unobserve(target))), - null != target_jos_animationinverse && - target.classList.add("jos-" + target_jos_animationinverse); - } else - (void 0 === target.dataset.jos_scrolldirection || - (1 === scroll_dir && "down" === target.dataset.jos_scrolldirection) || - (0 === scroll_dir && "up" === target.dataset.jos_scrolldirection) || - "none" === target.dataset.jos_scrolldirection) && - (target.classList.toggle( - "jos-no-mirror", - "false" == target.dataset.jos_mirror - ), - target.classList.add("jos-" + target_jos_animation), - null != target_jos_animationinverse && - target.classList.remove("jos-" + target_jos_animationinverse), - void 0 !== target.dataset.jos_invoke_out && - window[target.dataset.jos_invoke_out](target)), - "false" != target.dataset.jos_scroll && - null != target.dataset.jos_scroll && - ((this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - )), - this.callbackScroller(this.scrollEnter)); - }; - animationInit() { - let doit = []; - this.boxes.forEach((box) => { - let object_default_once = box.dataset.jos_once, - object_default_animation = - box.dataset.jos_animation || this.default_animation, - object_default_animationinverse = box.dataset.jos_animationinverse, - object_default_timingFunction = box.dataset.jos_timingFunction, - object_default_duration = box.dataset.jos_duration, - object_default_delay = box.dataset.jos_delay, - object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - box.classList.contains("jos_disabled") && - (box.classList.remove("jos_disabled"), box.classList.add("jos")), - object_default_once && - ("true" == object_default_once || /^\d+$/.test(object_default_once)) - ? box.setAttribute("data-jos_once", object_default_once) - : box.setAttribute( - "data-jos_once", - this.default_once ? "1" : "false" - ), - box.setAttribute("data-jos_animation", object_default_animation), - object_default_animationinverse && - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ), - object_default_timingFunction && - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ), - "false" == object_default_mirror && - box.setAttribute("data-jos_mirror", object_default_mirror), - object_default_duration && - box.setAttribute("data-jos_duration", object_default_duration), - object_default_delay && - box.setAttribute("data-jos_delay", object_default_delay), - box.setAttribute("data-jos_counter", "0"), - box.classList.add("jos-" + object_default_animation), - (box.dataset.jos_startvisible || this.default_startVisible) && - doit.push(box), - this.default_scrolldirection && - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - let box_observer = { - rootMargin: [ - box.dataset.jos_rootmargin_top || - this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => - value.startsWith("-") ? value.substring(1) : `-${value}` - ) - .join(" "), - threshold: this.default_threshold, - passive: this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer), - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer), observer.observe(box); - } - }), - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - "true" == box_time && (box_time = 0), - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - } - animationUnset(state = 0) { - -1 != state && - this.boxes?.forEach((box) => { - box.classList.remove("jos"), - box.classList.add("jos_disabled"), - 0 == state - ? box.classList.add("jos-" + box.dataset.jos_animation) - : box.classList.remove("jos-" + box.dataset.jos_animation); - }), - this.observers?.forEach((observer) => observer.disconnect()); - } - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror { transition: 0s forwards !important;}" - ); - let s = - "all " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - styleSheet.insertRule(".jos {transition: " + s + ";}"), - (this.jos_stylesheet = styleSheet); - } - getBoxes() { - return ( - (this.boxes = void 0), - this.boxes || (this.boxes = document.querySelectorAll(".jos")), - this.boxes - ); - } - getDefault(options = {}) { - let { - once: once, - animation: animation, - animationinverse: animationinverse, - timingFunction: timingFunction, - threshold: threshold, - startVisible: startVisible, - scrollDirection: scrollDirection, - intersectionRatio: intersectionRatio, - duration: duration, - mirror: mirror, - delay: delay, - debugMode: debugMode, - disable: disable, - rootMargin: rootMargin, - rootMarginTop: rootMarginTop, - rootMarginBottom: rootMarginBottom, - } = options; - (this.default_once = once || this.default_once), - (this.default_animation = animation || this.default_animation), - (this.default_animationinverse = - animationinverse || this.default_animation), - (this.default_timingFunction = - timingFunction || this.default_timingFunction), - (this.default_threshold = threshold || this.default_threshold), - (this.default_startVisible = startVisible || this.default_startVisible), - (this.default_scrolldirection = - scrollDirection || this.default_scrolldirection), - (this.default_intersectionRatio = - intersectionRatio || this.default_threshold), - (this.default_duration = duration || this.default_duration), - (this.default_delay = delay || this.default_delay), - (this.debugMode = debugMode || this.debugMode), - (this.disable = disable || this.disable), - (this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`), - (this.default_mirror = mirror || this.default_mirror); - } - init(options = this.options) { - (this.options = options), - this.getDefault(options), - this.getStylesheet(), - this.getBoxes(), - this.debugMode && this.debugger(), - this.disable ? this.stop() : this.start(); - } - start(state = 0) { - return ( - -1 != state && (this.stop(), this.animationInit()), - (this.disable = !1), - "Started" - ); - } - stop(state = 0) { - return ( - 1 == state ? (state = 0) : 0 == state && (state = 1), - (this.disable = !0), - -1 != state && this.animationUnset(state), - "Stopped" - ); - } - refresh() { - return ( - this.animationUnset(-1), - (this.boxes = void 0), - this.getBoxes(), - this.animationInit(), - this.debugger(1), - "Refreshed" - ); - } - destroy(state = 0) { - this.animationUnset(-1), - (this.boxes = void 0), - (this.observers = []), - 1 == state && (this.jos_stylesheet.disabled = !0), - (this.jos_stylesheet = void 0); - for (let prop in this) - this.hasOwnProperty(prop) && - "function" != typeof this[prop] && - (this[prop] = void 0); - return Object.setPrototypeOf(this, null), "JOS Instance Nuked"; - } -} -const JOS = new jos(); -"undefined" != typeof module && - void 0 !== module.exports && - (module.exports = JOS); -// By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.8.8/jos.min.js b/dist/v0.8.8/jos.min.js deleted file mode 100644 index b0bba68..0000000 --- a/dist/v0.8.8/jos.min.js +++ /dev/null @@ -1 +0,0 @@ -class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;debug=!1;disable=!1;static version="0.8.8 (Minified)";static author="Jesvi Jonathan";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Github: ${jos.github}\n`)}debugger(t=0){0==t&&this.debugMode&&(this.version(),console.log(`JOS Settings:\n - animation: ${this.default_animation}\n - once: ${this.default_once}\n - animationinverse: ${this.default_animationinverse}\n - timingFunction: ${this.default_timingFunction}\n - duration: ${this.default_duration}\n - delay: ${this.default_delay}\n - threshold: ${this.default_threshold}\n - startVisible: ${this.default_startVisible}\n - scrolldirection: ${this.default_scrolldirection}\n - intersectionRatio: ${this.default_intersectionRatio}\n - rootMargin: ${this.default_rootMargin}\n - disable: ${this.disable}\n - debugMode: ${this.debugMode}\n`)),console.log("JOS Initialized:\n\n"),1!=t&&0!=t||!this.debugMode||console.log(this.boxes||"No Elements Found")}callbackRouter_anchor=(t,s)=>{let e=t[0],o=e.target;document.querySelectorAll("[data-jos_anchor='#"+o.id+"']").forEach((t=>{let o=t.dataset.jos_animation,i=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}o&&(t.classList.remove("jos-"+o),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=i&&t.classList.add("jos-"+i))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+o),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackScroller=t=>{const s=this.default_rootMargin;let e=window.innerHeight;const o=t=>{const o=t.dataset.jos_rootmargin||s,i=o.split(" ").map(parseFloat),a=e*i[0]/100,n=e*i[2]/100;t.jos={rootMargin:o,rootMarginValues:i,topMargin:a,bottomMargin:n};const r=t.getBoundingClientRect(),l=r.top-t.jos.topMargin,d=r.bottom-t.jos.bottomMargin,u=r.top/e,c=l/(e-t.jos.topMargin-t.jos.bottomMargin);let h=0;h=c<0?0:c>100?1:c,t.jos={elementRect:r,elementTop:l,elementBottom:d,windowScrollProgress:u,rootScrollProgress:c,scrollProgress:h},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{t.forEach(o)}};callbackRouter=(t,s,e=1)=>{if(1==this.disable)return;let o=t[0],i=o.target,a=i.dataset.jos_animation,n=i.dataset.jos_animationinverse,r=1;if(r=o.boundingClientRect.top<0?0:1,o.isIntersecting){if("false"!=i.dataset.jos_scroll&&null!=i.dataset.jos_scroll&&(this.scrollEnter.push(i),this.callbackScroller(this.scrollEnter)),null!=i.dataset.jos_counter){let t=parseInt(i.dataset.jos_counter);t++,i.dataset.jos_counter=t}"false"==i.dataset.jos_mirror&&i.classList.remove("jos-no-mirror"),a&&(i.classList.remove("jos-"+a),null!=i.dataset.jos_invoke&&window[i.dataset.jos_invoke](i),null==i.dataset.jos_once&&"false"==i.dataset.jos_once||("true"==i.dataset.jos_once||i.dataset.jos_counter>=i.dataset.jos_once)&&s.unobserve(i)),null!=n&&i.classList.add("jos-"+n)}else(void 0===i.dataset.jos_scrolldirection||1===r&&"down"===i.dataset.jos_scrolldirection||0===r&&"up"===i.dataset.jos_scrolldirection||"none"===i.dataset.jos_scrolldirection)&&(i.classList.toggle("jos-no-mirror","false"==i.dataset.jos_mirror),i.classList.add("jos-"+a),null!=n&&i.classList.remove("jos-"+n),void 0!==i.dataset.jos_invoke_out&&window[i.dataset.jos_invoke_out](i)),"false"!=i.dataset.jos_scroll&&null!=i.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==i.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[];this.boxes.forEach((s=>{let e=s.dataset.jos_once,o=s.dataset.jos_animation||this.default_animation,i=s.dataset.jos_animationinverse,a=s.dataset.jos_timingFunction,n=s.dataset.jos_duration,r=s.dataset.jos_delay,l=s.dataset.jos_mirror||this.default_mirror;s.classList.contains("jos_disabled")&&(s.classList.remove("jos_disabled"),s.classList.add("jos")),e&&("true"==e||/^\d+$/.test(e))?s.setAttribute("data-jos_once",e):s.setAttribute("data-jos_once",this.default_once?"1":"false"),s.setAttribute("data-jos_animation",o),i&&s.setAttribute("data-jos_animationinverse",i),a&&s.setAttribute("data-jos_timingFunction",a),"false"==l&&s.setAttribute("data-jos_mirror",l),n&&s.setAttribute("data-jos_duration",n),r&&s.setAttribute("data-jos_delay",r),s.setAttribute("data-jos_counter","0"),s.classList.add("jos-"+o),(s.dataset.jos_startvisible||this.default_startVisible)&&t.push(s),this.default_scrolldirection&&s.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let d={rootMargin:[s.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],s.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],s.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],s.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:this.default_threshold,passive:this.default_passive};if(s.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,d);this.observers.push(t),t.observe(document.getElementById(s.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,d);this.observers.push(t),t.observe(s)}})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+e+";}"),this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:o,timingFunction:i,threshold:a,startVisible:n,scrollDirection:r,intersectionRatio:l,duration:d,mirror:u,delay:c,debugMode:h,disable:_,rootMargin:j,rootMarginTop:f,rootMarginBottom:m}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=o||this.default_animation,this.default_timingFunction=i||this.default_timingFunction,this.default_threshold=a||this.default_threshold,this.default_startVisible=n||this.default_startVisible,this.default_scrolldirection=r||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=c||this.default_delay,this.debugMode=h||this.debugMode,this.disable=_||this.disable,this.default_rootMargin=j||`${f||"-10%"} 0% ${m||"-40%"} 0%`,this.default_mirror=u||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.getStylesheet(),this.getBoxes(),this.debugMode&&this.debugger(),this.disable?this.stop():this.start()}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports&&(module.exports=JOS); //By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.8/.htaccess b/dist/v0.8/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/v0.8/jos.css b/dist/v0.8/jos.css deleted file mode 100644 index 7f9da35..0000000 --- a/dist/v0.8/jos.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:transform ease-in-out,opacity .5s ease-in-out}.jos{opacity:1;display:block}.jos-anchor{opacity:0}.jos-static{transform:translate(0,0);opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{transform:perspective(2500px) rotateY(-100deg);opacity:0}.jos-flip-left{transform:perspective(2500px) rotateY(100deg);opacity:0}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-360deg) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(360deg) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_pow="0.1"]{transform:rotateY(calc(.1 * 360deg))}[data-jos_pow="0.2"]{transform:rotateY(calc(.2 * 360deg))}[data-jos_pow="0.3"]{transform:rotateY(calc(.3 * 360deg))}[data-jos_pow="0.4"]{transform:rotateY(calc(.4 * 360deg))}[data-jos_pow="0.5"]{transform:rotateY(calc(.5 * 360deg))}[data-jos_pow="0.6"]{transform:rotateY(calc(.6 * 360deg))}[data-jos_pow="0.7"]{transform:rotateY(calc(.7 * 360deg))}[data-jos_pow="0.8"]{transform:rotateY(calc(.8 * 360deg))}[data-jos_pow="0.9"]{transform:rotateY(calc(.9 * 360deg))}[data-jos_pow="1"]{transform:rotateY(calc(1 * 360deg))}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=cubic-bezier]{transition-timing-function:cubic-bezier(0.1,0.7,1,0.1)!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5,end)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}[data-jos_timing_function=initial]{transition-timing-function:initial!important}[data-jos_timing_function=inherit]{transition-timing-function:inherit!important}[data-jos_timing_function=unset]{transition-timing-function:unset!important}[data-jos_duration="0.1"]{transition-duration:.1s!important}[data-jos_duration="0.2"]{transition-duration:.2s!important}[data-jos_duration="0.3"]{transition-duration:.3s!important}[data-jos_duration="0.4"]{transition-duration:.4s!important}[data-jos_duration="0.5"]{transition-duration:.5s!important}[data-jos_duration="0.6"]{transition-duration:.6s!important}[data-jos_duration="0.7"]{transition-duration:.7s!important}[data-jos_duration="0.8"]{transition-duration:.8s!important}[data-jos_duration="0.9"]{transition-duration:.9s!important}[data-jos_duration="1"],[data-jos_duration="6"]{transition-duration:1s!important}[data-jos_duration="2"],[data-jos_duration="7"]{transition-duration:2s!important}[data-jos_duration="3"],[data-jos_duration="8"]{transition-duration:3s!important}[data-jos_duration="4"],[data-jos_duration="9"]{transition-duration:4s!important}[data-jos_duration="10"],[data-jos_duration="5"]{transition:5s!important}[data-jos_delay="0.1"]{transition-delay:0.1s!important}[data-jos_delay="0.2"]{transition-delay:0.2s!important}[data-jos_delay="0.3"]{transition-delay:0.3s!important}[data-jos_delay="0.4"]{transition-delay:0.4s!important}[data-jos_delay="0.5"]{transition-delay:0.5s!important}[data-jos_delay="0.6"]{transition-delay:0.6s!important}[data-jos_delay="0.7"]{transition-delay:0.7s!important}[data-jos_delay="0.8"]{transition-delay:0.8s!important}[data-jos_delay="0.9"]{transition-delay:0.9s!important}[data-jos_delay="1"]{transition-delay:1s!important}[data-jos_delay="2"]{transition-delay:2s!important}[data-jos_delay="3"]{transition-delay:3s!important}[data-jos_delay="4"]{transition-delay:4s!important}[data-jos_delay="5"]{transition-delay:5s!important}/* JOS By Jesvi Jonathan */ \ No newline at end of file diff --git a/dist/v0.8/jos.debug.js b/dist/v0.8/jos.debug.js deleted file mode 100644 index 2176631..0000000 --- a/dist/v0.8/jos.debug.js +++ /dev/null @@ -1,414 +0,0 @@ -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - - debug = false; - disable = false; - - static version = "0.8.1 (Debug)"; - static author = "Jesvi Jonathan"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Github: ${jos.github}\n`); - } - //debugger = () => null; - debugger(type = 0) { - if (type == 0 && this.debugMode) { - this.version(); - console.log(`JOS Settings: -- animation: ${this.default_animation} -- once: ${this.default_once} -- animationinverse: ${this.default_animationinverse} -- timingFunction: ${this.default_timingFunction} -- duration: ${this.default_duration} -- delay: ${this.default_delay} -- threshold: ${this.default_threshold} -- startVisible: ${this.default_startVisible} -- scrolldirection: ${this.default_scrolldirection} -- intersectionRatio: ${this.default_intersectionRatio} -- rootMargin: ${this.default_rootMargin} -- disable: ${this.disable} -- debugMode: ${this.debugMode}\n`); - } - console.log("JOS Initialized:\n\n"); - if ((type == 1 || type == 0) && this.debugMode) { - console.log(this.boxes || "No Elements Found"); - } - } - - callbackRouter_anchor = (entries, observer) => { - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }); - }; - - callbackRouter = (entries, observer, type = 1) => { - if (this.disable == true) { - return; - } - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }; - - animationInit() { - let doit = []; - this.boxes.forEach((box) => { - let object_default_once = box.dataset.jos_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = box.dataset.jos_animationinverse; - let object_default_timingFunction = box.dataset.jos_timingFunction; - let object_default_duration = box.dataset.jos_duration; - let object_default_delay = box.dataset.jos_delay; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[1], - ].join(" "); - let box_observer = { - rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }); - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - } - - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); - } else { - box.classList.remove("jos-" + box.dataset.jos_animation); - } - }); - } - this.observers?.forEach((observer) => observer.disconnect()); - } - - getstylesheet() { - if (!this.jos_stylesheet) { - this.jos_stylesheet = document.getElementById("jos-stylesheet").sheet; - } - this.jos_stylesheet.insertRule( - ".jos {" + - ("transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;") + - "}" - ); - return this.jos_stylesheet; - } - - getBoxes() { - this.boxes = undefined; - - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); - } - return this.boxes; - } - - getdefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrollDirection, - intersectionRatio, - duration, - delay, - debugMode, - disable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = animationinverse || this.default_animation; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrollDirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - this.disable = disable || this.disable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - } - - init(options = this.options) { - this.options = options; - this.getdefault(options); - this.getstylesheet(); - this.getBoxes(); - if (this.debugMode) { - this.debugger(); - } - if (this.disable) { - this.stop(); - } else { - this.start(); - } - } - - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); - } - this.disable = false; - return "Started"; - } - - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; - } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); - } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; - } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; - } - } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; - } -} -const JOS = new jos(); -// By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.8/jos.js b/dist/v0.8/jos.js deleted file mode 100644 index 91bca96..0000000 --- a/dist/v0.8/jos.js +++ /dev/null @@ -1,309 +0,0 @@ -class jos { - default_once = !1; - default_animation = "fade"; - default_animationinverse = void 0; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = void 0; - default_scrolldirection = void 0; - default_passive = !0; - debug = !1; - disable = !1; - static version = "0.8.1"; - static author = "Jesvi Jonathan"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - options = {}; - jos_stylesheet = void 0; - boxes = void 0; - observers = []; - constructor() {} - version() { - console.log( - `JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Github: ${jos.github}\n` - ); - } - debugger(type = 0) { - 0 == type && this.debugMode && this.version(), - console.log("JOS Initialized:\n\n"); - } - callbackRouter_anchor = (entries, observer) => { - let entry = entries[0], - parentTarget = entry.target; - document - .querySelectorAll("[data-jos_anchor='#" + parentTarget.id + "']") - .forEach((target) => { - let target_jos_animation = target.dataset.jos_animation, - target_jos_animationinverse = target.dataset.jos_animationinverse; - if (entry.isIntersecting) { - if (null != target.dataset.jos_counter) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++, (target.dataset.jos_counter = counter_value); - } - target_jos_animation && - (target.classList.remove("jos-" + target_jos_animation), - null != target.dataset.jos_invoke && - window[target.dataset.jos_invoke](target), - (null == target.dataset.jos_once && - "false" == target.dataset.jos_once) || - (("true" == target.dataset.jos_once || - target.dataset.jos_counter >= target.dataset.jos_once) && - observer.unobserve(target)), - null != target_jos_animationinverse && - target.classList.add("jos-" + target_jos_animationinverse)); - } else - (void 0 !== target.dataset.jos_scrolldirection && - "down" !== target.dataset.jos_scrolldirection && - "none" !== target.dataset.jos_scrolldirection) || - (target.classList.add("jos-" + target_jos_animation), - void 0 !== target.dataset.jos_invoke_out && - window[target.dataset.jos_invoke_out](target)); - }); - }; - callbackRouter = (entries, observer, type = 1) => { - if (1 == this.disable) return; - let entry = entries[0], - target = entry.target, - target_jos_animation = target.dataset.jos_animation, - target_jos_animationinverse = target.dataset.jos_animationinverse, - scroll_dir = 1; - if ( - ((scroll_dir = entry.boundingClientRect.top < 0 ? 0 : 1), - entry.isIntersecting) - ) { - if (null != target.dataset.jos_counter) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++, (target.dataset.jos_counter = counter_value); - } - target_jos_animation && - (target.classList.remove("jos-" + target_jos_animation), - null != target.dataset.jos_invoke && - window[target.dataset.jos_invoke](target), - (null == target.dataset.jos_once && - "false" == target.dataset.jos_once) || - (("true" == target.dataset.jos_once || - target.dataset.jos_counter >= target.dataset.jos_once) && - observer.unobserve(target))), - null != target_jos_animationinverse && - target.classList.add("jos-" + target_jos_animationinverse); - } else - (void 0 === target.dataset.jos_scrolldirection || - (1 === scroll_dir && "down" === target.dataset.jos_scrolldirection) || - (0 === scroll_dir && "up" === target.dataset.jos_scrolldirection) || - "none" === target.dataset.jos_scrolldirection) && - (target.classList.add("jos-" + target_jos_animation), - null != target_jos_animationinverse && - target.classList.remove("jos-" + target_jos_animationinverse), - void 0 !== target.dataset.jos_invoke_out && - window[target.dataset.jos_invoke_out](target)); - }; - animationInit() { - let doit = []; - this.boxes.forEach((box) => { - let object_default_once = box.dataset.jos_once, - object_default_animation = - box.dataset.jos_animation || this.default_animation, - object_default_animationinverse = box.dataset.jos_animationinverse, - object_default_timingFunction = box.dataset.jos_timingFunction, - object_default_duration = box.dataset.jos_duration, - object_default_delay = box.dataset.jos_delay; - box.classList.contains("jos_disabled") && - (box.classList.remove("jos_disabled"), box.classList.add("jos")), - object_default_once && - ("true" == object_default_once || /^\d+$/.test(object_default_once)) - ? box.setAttribute("data-jos_once", object_default_once) - : box.setAttribute( - "data-jos_once", - this.default_once ? "1" : "false" - ), - box.setAttribute("data-jos_animation", object_default_animation), - object_default_animationinverse && - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ), - object_default_timingFunction && - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ), - object_default_duration && - box.setAttribute("data-jos_duration", object_default_duration), - object_default_delay && - box.setAttribute("data-jos_delay", object_default_delay), - box.setAttribute("data-jos_counter", "0"), - box.classList.add("jos-" + object_default_animation), - (box.dataset.jos_startvisible || this.default_startVisible) && - doit.push(box), - this.default_scrolldirection && - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - let box_observer = { - rootMargin: [ - box.dataset.jos_rootmargin_top || - this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[1], - ].join(" "), - threshold: this.default_threshold, - passive: this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer), - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer), observer.observe(box); - } - }), - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - "true" == box_time && (box_time = 0), - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - } - animationUnset(state = 0) { - -1 != state && - this.boxes?.forEach((box) => { - box.classList.remove("jos"), - box.classList.add("jos_disabled"), - 0 == state - ? box.classList.add("jos-" + box.dataset.jos_animation) - : box.classList.remove("jos-" + box.dataset.jos_animation); - }), - this.observers?.forEach((observer) => observer.disconnect()); - } - getstylesheet() { - return ( - this.jos_stylesheet || - (this.jos_stylesheet = document.getElementById("jos-stylesheet").sheet), - this.jos_stylesheet.insertRule( - ".jos {transition: " + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s !important;}" - ), - this.jos_stylesheet - ); - } - getBoxes() { - return ( - (this.boxes = void 0), - this.boxes || (this.boxes = document.querySelectorAll(".jos")), - this.boxes - ); - } - getdefault(options = {}) { - let { - once: once, - animation: animation, - animationinverse: animationinverse, - timingFunction: timingFunction, - threshold: threshold, - startVisible: startVisible, - scrollDirection: scrollDirection, - intersectionRatio: intersectionRatio, - duration: duration, - delay: delay, - debugMode: debugMode, - disable: disable, - rootMargin: rootMargin, - rootMarginTop: rootMarginTop, - rootMarginBottom: rootMarginBottom, - } = options; - (this.default_once = once || this.default_once), - (this.default_animation = animation || this.default_animation), - (this.default_animationinverse = - animationinverse || this.default_animation), - (this.default_timingFunction = - timingFunction || this.default_timingFunction), - (this.default_threshold = threshold || this.default_threshold), - (this.default_startVisible = startVisible || this.default_startVisible), - (this.default_scrolldirection = - scrollDirection || this.default_scrolldirection), - (this.default_intersectionRatio = - intersectionRatio || this.default_threshold), - (this.default_duration = duration || this.default_duration), - (this.default_delay = delay || this.default_delay), - (this.debugMode = debugMode || this.debugMode), - (this.disable = disable || this.disable), - (this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`); - } - init(options = this.options) { - (this.options = options), - this.getdefault(options), - this.getstylesheet(), - this.getBoxes(), - this.debugMode && - console.warn( - "JOS | This version of JOS package does not support debug mode, Please use jos.debug.js for debugging." - ), - this.disable ? this.stop() : this.start(); - } - start(state = 0) { - return ( - -1 != state && (this.stop(), this.animationInit()), - (this.disable = !1), - "Started" - ); - } - stop(state = 0) { - return ( - 1 == state ? (state = 0) : 0 == state && (state = 1), - (this.disable = !0), - -1 != state && this.animationUnset(state), - "Stopped" - ); - } - refresh() { - return ( - this.animationUnset(-1), - (this.boxes = void 0), - this.getBoxes(), - this.animationInit(), - this.debugger(1), - "Refreshed" - ); - } - destroy(state = 0) { - this.animationUnset(-1), - (this.boxes = void 0), - (this.observers = []), - 1 == state && (this.jos_stylesheet.disabled = !0), - (this.jos_stylesheet = void 0); - for (let prop in this) - this.hasOwnProperty(prop) && - "function" != typeof this[prop] && - (this[prop] = void 0); - return Object.setPrototypeOf(this, null), "JOS Instance Nuked"; - } -} -const JOS = new jos(); -// By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.8/jos.min.js b/dist/v0.8/jos.min.js deleted file mode 100644 index 81b22f8..0000000 --- a/dist/v0.8/jos.min.js +++ /dev/null @@ -1 +0,0 @@ -class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;debug=!1;disable=!1;static version="0.8.1 (Minified)";static author="Jesvi Jonathan";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Github: ${jos.github}\n`)}debugger=()=>this.version();callbackRouter_anchor=(t,s)=>{let e=t[0],o=e.target;document.querySelectorAll("[data-jos_anchor='#"+o.id+"']").forEach((t=>{let o=t.dataset.jos_animation,i=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}o&&(t.classList.remove("jos-"+o),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=i&&t.classList.add("jos-"+i))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+o),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackRouter=(t,s,e=1)=>{if(1==this.disable)return;let o=t[0],i=o.target,a=i.dataset.jos_animation,n=i.dataset.jos_animationinverse,d=1;if(d=o.boundingClientRect.top<0?0:1,o.isIntersecting){if(null!=i.dataset.jos_counter){let t=parseInt(i.dataset.jos_counter);t++,i.dataset.jos_counter=t}a&&(i.classList.remove("jos-"+a),null!=i.dataset.jos_invoke&&window[i.dataset.jos_invoke](i),null==i.dataset.jos_once&&"false"==i.dataset.jos_once||("true"==i.dataset.jos_once||i.dataset.jos_counter>=i.dataset.jos_once)&&s.unobserve(i)),null!=n&&i.classList.add("jos-"+n)}else(void 0===i.dataset.jos_scrolldirection||1===d&&"down"===i.dataset.jos_scrolldirection||0===d&&"up"===i.dataset.jos_scrolldirection||"none"===i.dataset.jos_scrolldirection)&&(i.classList.add("jos-"+a),null!=n&&i.classList.remove("jos-"+n),void 0!==i.dataset.jos_invoke_out&&window[i.dataset.jos_invoke_out](i))};animationInit(){let t=[];this.boxes.forEach((s=>{let e=s.dataset.jos_once,o=s.dataset.jos_animation||this.default_animation,i=s.dataset.jos_animationinverse,a=s.dataset.jos_timingFunction,n=s.dataset.jos_duration,d=s.dataset.jos_delay;s.classList.contains("jos_disabled")&&(s.classList.remove("jos_disabled"),s.classList.add("jos")),e&&("true"==e||/^\d+$/.test(e))?s.setAttribute("data-jos_once",e):s.setAttribute("data-jos_once",this.default_once?"1":"false"),s.setAttribute("data-jos_animation",o),i&&s.setAttribute("data-jos_animationinverse",i),a&&s.setAttribute("data-jos_timingFunction",a),n&&s.setAttribute("data-jos_duration",n),d&&s.setAttribute("data-jos_delay",d),s.setAttribute("data-jos_counter","0"),s.classList.add("jos-"+o),(s.dataset.jos_startvisible||this.default_startVisible)&&t.push(s),this.default_scrolldirection&&s.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let r={rootMargin:[s.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],s.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3],s.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],s.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[1]].join(" "),threshold:this.default_threshold,passive:this.default_passive};if(s.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,r);this.observers.push(t),t.observe(document.getElementById(s.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,r);this.observers.push(t),t.observe(s)}})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getstylesheet(){return this.jos_stylesheet||(this.jos_stylesheet=document.getElementById("jos-stylesheet").sheet),this.jos_stylesheet.insertRule(".jos {transition: "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s !important;}"),this.jos_stylesheet}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getdefault(t={}){let{once:s,animation:e,animationinverse:o,timingFunction:i,threshold:a,startVisible:n,scrollDirection:d,intersectionRatio:r,duration:l,delay:u,debugMode:h,disable:_,rootMargin:c,rootMarginTop:j,rootMarginBottom:f}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=o||this.default_animation,this.default_timingFunction=i||this.default_timingFunction,this.default_threshold=a||this.default_threshold,this.default_startVisible=n||this.default_startVisible,this.default_scrolldirection=d||this.default_scrolldirection,this.default_intersectionRatio=r||this.default_threshold,this.default_duration=l||this.default_duration,this.default_delay=u||this.default_delay,this.debugMode=h||this.debugMode,this.disable=_||this.disable,this.default_rootMargin=c||`${j||"-10%"} 0% ${f||"-40%"} 0%`}init(t=this.options){this.options=t,this.getdefault(t),this.getstylesheet(),this.getBoxes(),this.debugMode&&console.warn("JOS | This version of JOS package does not support debug mode, Please use jos.debug.js for debugging."),this.disable?this.stop():this.start()}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;// By Jesvi Jonathan \ No newline at end of file diff --git a/dist/v0.9.1/.htaccess b/dist/v0.9.1/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/v0.9.1/jos.css b/dist/v0.9.1/jos.css deleted file mode 100644 index ea37fe9..0000000 --- a/dist/v0.9.1/jos.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} \ No newline at end of file diff --git a/dist/v0.9.1/jos.debug.css b/dist/v0.9.1/jos.debug.css deleted file mode 100644 index 5ae1143..0000000 --- a/dist/v0.9.1/jos.debug.css +++ /dev/null @@ -1,594 +0,0 @@ -/* -JOS v0.9.1 By Jesvi Jonathan -*/ - -/* jos default */ -.jos { - /* opacity: 1;*/ - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - /* display: block; */ - /* transition-timing-function: ease-in-out; - transition-property: all; - transition-delay: 0; - transition-duration: 0.4s; */ -} -/* .jos:not([class]):not([class*="display"]):not(:has([class*="display"])) { - display: block; -} */ - -.jos-anchor { - opacity: 0; - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - transition-timing-function: ease-in-out; -} -.jos-static { - transform: translate(0, 0); - opacity: 1; -} -.jos-no-transition { - transition-timing-function: linear; - transition-duration: 0s; -} -.jos-none { -} -.jos-hidden { - display: none; -} -.jos-visible { - display: block; - opacity: 1; -} -.jos-stagger { - /* some cool transition */ - /* do not nullify this */ -} - -/* .jos-no-mirror { - transition: 0s forwards !important; -} */ - -/* fade */ -.jos-fade { - opacity: 0; -} -.jos-fade-right { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-fade-right-up { - opacity: 0; - transform: translateX(-100px) translateY(50px); -} -.jos-fade-right-down { - opacity: 0; - transform: translateX(-100px) translateY(-50px); -} -.jos-fade-left-up { - opacity: 0; - transform: translateX(100px) translateY(50px); -} -.jos-fade-left-down { - opacity: 0; - transform: translateX(100px) translateY(-50px); -} - -/* slide */ - -.jos-slide, -.jos-slide-right { - transform: translateX(-100px); -} -.jos-slide-left { - transform: translateX(100px); -} -.jos-slide-up { - transform: translateY(100px); -} -.jos-slide-down { - transform: translateY(-100px); -} -.jos-slide-right-up { - transform: translateX(-100px) translateY(100px); -} -.jos-slide-right-down { - transform: translateX(-100px) translateY(-100px); -} -.jos-slide-left-up { - transform: translateX(100px) translateY(100px); -} -.jos-slide-left-down { - transform: translateX(100px) translateY(-100px); -} - -/* zoom out */ -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); -} -.jos-zoom-out-right, -.jos-zoom-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0px, -100px); -} -.jos-zoom-out-left, -.jos-zoom-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0px, -100px); -} -.jos-zoom-out-down, -.jos-zoom-down { - opacity: 0; - transform: scale(0.8) translate3d(0px, -100px, 0px); -} -.jos-zoom-out-up, -.jos-zoom-up { - opacity: 0; - transform: scale(0.8) translate3d(0px, 100px, 0px); -} - -/* grow */ -.jos-grow { - transform: scale(0); -} -.jos-grow-right { - transform: scale(0) translate3d(-100px, 0px, -100px); -} -.jos-grow-left { - transform: scale(0) translate3d(100px, 0px, -100px); -} -.jos-grow-down { - transform: scale(0) translate3d(0px, -100px, 0px); -} -.jos-grow-up { - transform: scale(0) translate3d(0px, 100px, 0px); -} - -/* zoom in */ -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0px, -100px, 0px); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0px, 100px, 0px); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0px, -100px); -} - -/* shrink */ -.jos-shrink { - transform: scale(1.4); -} -.jos-shrink-right { - transform: scale(1.4) translate3d(-100px, 0px, -100px); -} -.jos-shrink-left { - transform: scale(1.4) translate3d(100px, 0px, -100px); -} -.jos-shrink-down { - transform: scale(1.4) translate3d(0px, -100px, 0px); -} -.jos-shrink-up { - transform: scale(1.4) translate3d(0px, 100px, 0px); -} - -/* flip */ -.jos-flip, -.jos-flip-right { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} - -/* rotate */ -.jos-rotate, -.jos-rotate-right { - opacity: 0; - transform: rotate(-180deg); -} -.jos-rotate-left { - opacity: 0; - transform: rotate(180deg); -} - -/* spin */ -.jos-spin, -.jos-spin-right { - opacity: 0; - transform: rotate(-180deg) scale(0); -} -.jos-spin-left { - opacity: 0; - transform: rotate(180deg) scale(0); -} - -/* revolve */ -.jos-revolve, -.jos-revolve-right { - opacity: 0; - transform: rotate(-360deg) scale(0); -} -.jos-revolve-left { - opacity: 0; - transform: rotate(360deg) scale(0); -} - -/* stretch */ -.jos-stretch { - opacity: 0; - transform: scaleX(0); -} -.jos-stretch-vertical { - opacity: 0; - transform: scaleY(0); -} - -/* skew */ -.jos-skew { - opacity: 0; - transform: skew(20deg, 20deg); -} -.jos-skew-right { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(-100px, 0px, -100px); -} -.jos-skew-left { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(100px, 0px, -100px); -} -.jos-skew-down { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, -100px, 0px); -} -.jos-skew-up { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, 100px, 0px); -} -.jos-slant { - transform: skew(25deg, 25deg); -} -.jos-slant-right { - transform: skew(25deg, 0deg); -} -.jos-slant-left { - transform: skew(0deg, 25deg); -} -.jos-bar, -.jos-bar_vertical { - transform: perspective(2500px) rotateY(-100deg); -} -.jos-bar_horizontal { - transform: perspective(2500px) rotateX(-100deg); -} - -.jos-grey { - filter: grayscale(100%); -} -.jos-blur { - filter: blur(7px); -} -.jos-backdrop { - backdrop-filter: blur(7px); - opacity: 0.8; -} -.jos-invert { - filter: invert(100%); -} -.jos-sepia { - filter: sepia(100%); -} -.jos-saturate { - filter: saturate(100%); -} -.jos-hue-rotate { - filter: hue-rotate(90deg); -} -.jos-brightness { - filter: brightness(0.5); -} - -/* timing function attribute */ -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} - -/* Playable animations */ - -.jos-slide-play, -.jos-slide-horizontal-play { - transition: 1s; - animation: jos-slide-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-play { - 0% { - transform: translateX(-100px); - } - - 100% { - transform: translateX(100px); - } -} - -.jos-slide-vertical-play { - animation: jos-slide-vertical-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-vertical-play { - 0% { - transform: translateY(-100px); - } - - 100% { - transform: translateY(100px); - } -} - -.jos-zoom-in-play, -.jos-pulse-play { - animation: jos-zoom-in-play 1s infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-in-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(0.8); - } -} - -.jos-zoom-play, -.jos-zoom-out-play, -.jos-pulse-out-play { - animation: jos-zoom-play 0.5s linear infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(1.1); - } -} - -.jos-flip-play { - animation: jos-flip-play 0.7s infinite; - animation-direction: alternate; -} -@keyframes jos-flip-play { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(180deg); - } -} - -.jos-rotate-play { - animation: jos-rotate-play 1s linear forwards infinite; - border-radius: 0%; - animation-direction: alternate-reverse; -} - -@keyframes jos-rotate-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-spin-play { - animation: jos-spin-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-spin-play { - 0% { - transform: rotate(0deg); - opacity: 0; - } - - 100% { - transform: rotate(360deg); - opacity: 1; - } -} - -.jos-revolve-play { - animation: jos-revolve-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-revolve-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-grow-play, -.jos-shrink-play { - animation: jos-grow-play 1s infinite; - animation-direction: alternate; -} -@keyframes jos-grow-play { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -.jos-shrink-play { - animation-direction: alternate-reverse; -} - -.jos-stretch-play { - animation: jos-stretch-play 0.7s infinite; - animation-direction: alternate; -} - -@keyframes jos-stretch-play { - 0% { - transform: scaleX(1); - } - - 100% { - transform: scaleX(0); - } -} - -.jos-stretch-vertical-play { - animation: jos-stretch-vertical-play 0.7s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-stretch-vertical-play { - 0% { - transform: scaleY(1); - } - - 100% { - transform: scaleY(0); - } -} - -.jos-fade-play { - animation: jos-fade-play 0.8s infinite; - animation-direction: alternate; -} - -@keyframes jos-fade-play { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.jos-fade-horizontal-play { - animation: jos-fade-horizontal-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-horizontal-play { - 0% { - opacity: 0; - transform: translateX(100px); - } - - 100% { - opacity: 1; - transform: translateX(-100px); - } -} - -.jos-fade-vertical-play { - animation: jos-fade-vertical-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-vertical-play { - 0% { - opacity: 0; - transform: translateY(100px); - } - - 100% { - opacity: 1; - transform: translateY(-100px); - } -} - -.jos-blink-play { - animation: jos-blink-play 1s steps(1, end) infinite; -} - -@keyframes jos-blink-play { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } -} diff --git a/dist/v0.9.1/jos.debug.js b/dist/v0.9.1/jos.debug.js deleted file mode 100644 index 833c969..0000000 --- a/dist/v0.9.1/jos.debug.js +++ /dev/null @@ -1,698 +0,0 @@ -// import "./jos.css"; -// For jos.debug.js & jos under development, you are required to manually include jos.css using tag. -// Other versions of jos.js will auto import jos.css & does not require or specific imports. -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - default_mirror = undefined; - setRange = new Set(); - - debug = false; - scrollProgressDisable = undefined; - disable = false; - - static version = "0.9.1 (Debug)"; - static author = "Jesvi Jonathan"; - static webpage = "https://jos-animation.vercel.app"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - scrollEnter = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Webpage: ${jos.webpage} - - Github: ${jos.github}\n`); - } - //debugger = () => null; - debugger(type = 0) { - if (type == 0 && this.debugMode) { - this.version(); - console.log(`JOS Settings: - - animation: ${this.default_animation} - - once: ${this.default_once} - - animationinverse: ${this.default_animationinverse} - - timingFunction: ${this.default_timingFunction} - - duration: ${this.default_duration} - - delay: ${this.default_delay} - - threshold: ${this.default_threshold} - - startVisible: ${this.default_startVisible} - - scrolldirection: ${this.default_scrolldirection} - - intersectionRatio: ${this.default_intersectionRatio} - - rootMargin: ${this.default_rootMargin} - - disable: ${this.disable} - - debugMode: ${this.debugMode}\n`); - } - console.log("JOS Initialized:\n\n"); - if ((type == 1 || type == 0) && this.debugMode) { - console.log(this.boxes || "No Elements Found"); - } - } - - callbackRouter_anchor = (entries, observer) => { - if (this.disable) return; - - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }); - }; - - // var box = target; - // console.log(box); - // const rootmargin = " 0% 0% -30% 0%"; - callbackScroller = (scl) => { - if (this.disable || this.scrollProgressDisable) return; - - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; - - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin; - const rootMarginValues = rootMargin.split(" ").map(parseFloat); - const topMargin = (wh * rootMarginValues[0]) / 100; - const bottomMargin = (wh * rootMarginValues[2]) / 100; - - box.jos = { - rootMargin, - rootMarginValues, - topMargin, - bottomMargin, - }; - const elementRect = box.getBoundingClientRect(); - const elementTop = elementRect.top - box.jos.topMargin; - const elementBottom = elementRect.bottom - box.jos.bottomMargin; - - const windowScrollProgress = elementRect.top / wh; - - const rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); - - let scrollProgress = 0; - - if (rootScrollProgress <= 0) { - scrollProgress = 0; - } else if (rootScrollProgress >= 100) { - scrollProgress = 1; - } else { - scrollProgress = rootScrollProgress; - } - - box.jos = { - elementRect, - elementTop, - elementBottom, - windowScrollProgress, - rootScrollProgress, - scrollProgress, - }; - - window[box.dataset.jos_scroll](box); - }; - - document.onscroll = (e) => { - if (this.disable || this.scrollProgressDisable) return; - scl.forEach(updateBox); - }; - }; - - // window["jos_scroll_" + box.id](obj); - callbackRouter = (entries, observer, type = 1) => { - if (this.disable) return; - - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } - - if (entry.isIntersecting) { - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter.push(target); - this.callbackScroller(this.scrollEnter); - } - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target.dataset.jos_mirror == "false") { - target.classList.remove("jos-no-mirror"); - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.toggle( - "jos-no-mirror", - target.dataset.jos_mirror == "false" - ); - - target.classList.add("jos-" + target_jos_animation); - - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - ); - this.callbackScroller(this.scrollEnter); - } - } - }; - - animationInit() { - let doit = []; - const set = new Set(); - - let recursive_check = (box) => { - let object_default_once = box.dataset.jos_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = box.dataset.jos_animationinverse; - let object_default_timingFunction = box.dataset.jos_timingFunction; - let object_default_duration = box.dataset.jos_duration; - let object_default_delay = box.dataset.jos_delay; - let object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - - if (box.dataset.jos_stagger) { - const defaultDelay = this.default_delay; - const defaultDuration = this.default_duration; - const defaultOnce = this.once; - const defaultMirror = this.mirror; - const defaultScrolldirection = this.scrolldirection; - const defaultRootMargin = this.rootMargin; - - if (!box.id) { - box.id = Math.random().toString(36).substring(7); - } - - Array.from(box.children).forEach((child, i) => { - if (!child.classList.contains("jos")) { - child.classList.add("jos"); - - if (!child.id) { - child.id = `${box.id}_${i}`; - } - - const stagger = box.dataset.jos_stagger; - const stagger_delay = box.dataset.jos_stagger_delay || defaultDelay; - const stagger_seq = box.dataset.jos_stagger_seq || 0; - const stagger_duration = - box.dataset.jos_stagger_duration || defaultDuration; - const stagger_once = box.dataset.jos_stagger_once || defaultOnce; - const staggerinverse = - box.dataset.jos_staggerinverse || defaultMirror; - const stagger_mirror = - box.dataset.jos_stagger_mirror || defaultMirror; - const stagger_visible = box.dataset.jos_stagger_startVisible; - const stagger_scrolldirection = - box.dataset.jos_stagger_scrolldirection || defaultScrolldirection; - const stagger_rootmargin = - box.dataset.jos_stagger_rootmargin || defaultRootMargin; - - if (box.dataset.jos_stagger_anchor || child.dataset.jos_anchor) { - const anchor = - box.dataset.jos_stagger_anchor === "true" - ? "#" + box.id - : box.dataset.jos_stagger_anchor; - child.setAttribute("data-jos_anchor", anchor); - } - - child.setAttribute("data-jos_animation", stagger); - - staggerinverse - ? child.setAttribute("data-jos_animationinverse", staggerinverse) - : null; - - child.setAttribute("data-jos_duration", stagger_duration); - - // let delg = parseFloat(stagger_seq, 2); - // delg = (delg * i).toFixed(1); - // delg = parseFloat(delg); - // console.log(delg); - // delg = delg + parseFloat(stagger_delay); - - // const delg = parseFloat((parseFloat(stagger_seq, 2) * i).toFixed(1)) + parseFloat(stagger_delay); - - const delg = parseFloat(stagger_seq * i + stagger_delay); - - child.setAttribute("data-jos_delay", delg); - - child.setAttribute("data-jos_once", stagger_once); - - if (stagger_mirror === "false") { - child.setAttribute("data-jos_mirror", "false"); - } - - if (stagger_visible) { - doit.push(child); - } - - if (stagger_scrolldirection) { - child.setAttribute( - "data-jos_scrolldirection", - stagger_scrolldirection - ); - } - - stagger_rootmargin - ? child.setAttribute("data-jos_rootmargin", stagger_rootmargin) - : null; - - if (box.dataset.jos_stagger_scroll) { - child.setAttribute( - "data-jos_scroll", - box.dataset.jos_stagger_scroll - ); - } - - if (box.dataset.jos_stagger_timingFunction) { - child.setAttribute( - "data-jos_timingFunction", - box.dataset.jos_stagger_timingFunction - ); - } - - if (box.dataset.jos_stagger_invoke) { - child.setAttribute( - "data-jos_invoke", - box.dataset.jos_stagger_invoke - ); - } - - if (box.dataset.jos_stagger_invoke_out) { - child.setAttribute( - "data-jos_invoke_out", - box.dataset.jos_stagger_invoke_out - ); - } - - this.boxes = [...this.boxes, child]; - recursive_check(child); - } - }); - - if (!box.dataset.jos_animation) { - box.classList.remove("jos"); - return; - } - } - - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - - if (object_default_mirror == "false") { - box.setAttribute("data-jos_mirror", object_default_mirror); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - this.setRange.add(parseFloat(object_default_duration)); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - this.setRange.add(parseFloat(object_default_delay)); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => { - const isNegative = value.startsWith("-"); - return isNegative ? value.substring(1) : `-${value}`; - }) - .join(" "); - - // let rootMargin = " 10% 0% -30% 0%"; - - let box_observer = { - rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }; - - this.boxes.forEach((box) => { - recursive_check(box); - }); - - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - // console.log(this.setRange); - } - - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); - } else { - box.classList.remove("jos-" + box.dataset.jos_animation); - } - }); - } - this.observers?.forEach((observer) => observer.disconnect()); - } - - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror" + " { transition: 0s forwards !important;}" - ); - //opacity " + s + ", transform - let property = "all "; - let s = - property + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - - styleSheet.insertRule(".jos {" + ("transition: " + s) + ";}"); - - for (const value of this.setRange) { - styleSheet.insertRule( - `[data-jos_duration="${value}"] { - transition-duration: ${value}s !important; - }` - ); - styleSheet.insertRule( - `[data-jos_delay="${value}"] { - transition-delay: ${value}s !important; - }` - ); - } - - this.jos_stylesheet = styleSheet; - } - - getBoxes() { - this.boxes = undefined; - - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); - } - return this.boxes; - } - - getDefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrollDirection, - intersectionRatio, - duration, - mirror, - delay, - debugMode, - disable, - scrollProgressDisable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = animationinverse || this.default_animation; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrollDirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - if (disable != undefined) { - this.disable = disable; - } - this.scrollProgressDisable = - scrollProgressDisable || this.scrollProgressDisable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - this.default_mirror = mirror || this.default_mirror; - } - - init(options = this.options) { - this.options = options; - this.getDefault(options); - - if (this.disable) return; - - this.getBoxes(); - if (this.debugMode) { - this.debugger(); - } - - this.start(); - - this.getStylesheet(); - } - - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); - } - this.disable = false; - return "Started"; - } - - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; - } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); - } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; - } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; - } - } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; - } -} -const JOS = new jos(); - -if (typeof module !== "undefined" && typeof module.exports !== "undefined") { - module.exports = JOS; -} else { - if (typeof define === "function" && define.amd) { - define([], function () { - return JOS; - }); - } else { - window.JOS = JOS; - } -} -//export default JOS; diff --git a/dist/v0.9.1/jos.js b/dist/v0.9.1/jos.js deleted file mode 100644 index 31870dc..0000000 --- a/dist/v0.9.1/jos.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var a=s.insertAt;if(t&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===a&&e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}}");class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.1";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Webpage: ${jos.webpage}\n - Github: ${jos.github}\n`)}debugger(t=0){0==t&&this.debugMode&&(this.version(),console.log(`JOS Settings:\n - animation: ${this.default_animation}\n - once: ${this.default_once}\n - animationinverse: ${this.default_animationinverse}\n - timingFunction: ${this.default_timingFunction}\n - duration: ${this.default_duration}\n - delay: ${this.default_delay}\n - threshold: ${this.default_threshold}\n - startVisible: ${this.default_startVisible}\n - scrolldirection: ${this.default_scrolldirection}\n - intersectionRatio: ${this.default_intersectionRatio}\n - rootMargin: ${this.default_rootMargin}\n - disable: ${this.disable}\n - debugMode: ${this.debugMode}\n`)),console.log("JOS Initialized:\n\n"),1!=t&&0!=t||!this.debugMode||console.log(this.boxes||"No Elements Found")}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let a=t[0],e=a.target;document.querySelectorAll("[data-jos_anchor='#"+e.id+"']").forEach((t=>{let e=t.dataset.jos_animation,o=t.dataset.jos_animationinverse;if(a.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}e&&(t.classList.remove("jos-"+e),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=o&&t.classList.add("jos-"+o))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+e),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;const s=this.default_rootMargin;let a=window.innerHeight;const e=t=>{const e=t.dataset.jos_rootmargin||s,o=e.split(" ").map(parseFloat),i=a*o[0]/100,n=a*o[2]/100;t.jos={rootMargin:e,rootMarginValues:o,topMargin:i,bottomMargin:n};const r=t.getBoundingClientRect(),l=r.top-t.jos.topMargin,d=r.bottom-t.jos.bottomMargin,c=r.top/a,f=l/(a-t.jos.topMargin-t.jos.bottomMargin);let m=0;m=f<=0?0:f>=100?1:f,t.jos={elementRect:r,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:f,scrollProgress:m},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(e)}};callbackRouter=(t,s,a=1)=>{if(this.disable)return;let e=t[0],o=e.target,i=o.dataset.jos_animation,n=o.dataset.jos_animationinverse,r=1;if(r=e.boundingClientRect.top<0?0:1,e.isIntersecting){if("false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter.push(o),this.callbackScroller(this.scrollEnter)),null!=o.dataset.jos_counter){let t=parseInt(o.dataset.jos_counter);t++,o.dataset.jos_counter=t}"false"==o.dataset.jos_mirror&&o.classList.remove("jos-no-mirror"),i&&(o.classList.remove("jos-"+i),null!=o.dataset.jos_invoke&&window[o.dataset.jos_invoke](o),null==o.dataset.jos_once&&"false"==o.dataset.jos_once||("true"==o.dataset.jos_once||o.dataset.jos_counter>=o.dataset.jos_once)&&s.unobserve(o)),null!=n&&o.classList.add("jos-"+n)}else(void 0===o.dataset.jos_scrolldirection||1===r&&"down"===o.dataset.jos_scrolldirection||0===r&&"up"===o.dataset.jos_scrolldirection||"none"===o.dataset.jos_scrolldirection)&&(o.classList.toggle("jos-no-mirror","false"==o.dataset.jos_mirror),o.classList.add("jos-"+i),null!=n&&o.classList.remove("jos-"+n),void 0!==o.dataset.jos_invoke_out&&window[o.dataset.jos_invoke_out](o)),"false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==o.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=a=>{let e=a.dataset.jos_once,o=a.dataset.jos_animation||this.default_animation,i=a.dataset.jos_animationinverse,n=a.dataset.jos_timingFunction,r=a.dataset.jos_duration,l=a.dataset.jos_delay,d=a.dataset.jos_mirror||this.default_mirror;if(a.classList.contains("jos_disabled")&&(a.classList.remove("jos_disabled"),a.classList.add("jos")),e&&("true"==e||/^\d+$/.test(e))?a.setAttribute("data-jos_once",e):a.setAttribute("data-jos_once",this.default_once?"1":"false"),a.dataset.jos_stagger){const e=this.default_delay,o=this.default_duration,i=this.once,n=this.mirror,r=this.scrolldirection,l=this.rootMargin;if(a.id||(a.id=Math.random().toString(36).substring(7)),Array.from(a.children).forEach(((d,c)=>{if(!d.classList.contains("jos")){d.classList.add("jos"),d.id||(d.id=`${a.id}_${c}`);const f=a.dataset.jos_stagger,m=a.dataset.jos_stagger_delay||e,p=a.dataset.jos_stagger_seq||0,j=a.dataset.jos_stagger_duration||o,u=a.dataset.jos_stagger_once||i,h=a.dataset.jos_staggerinverse||n,_=a.dataset.jos_stagger_mirror||n,g=a.dataset.jos_stagger_startVisible,y=a.dataset.jos_stagger_scrolldirection||r,b=a.dataset.jos_stagger_rootmargin||l;if(a.dataset.jos_stagger_anchor||d.dataset.jos_anchor){const t="true"===a.dataset.jos_stagger_anchor?"#"+a.id:a.dataset.jos_stagger_anchor;d.setAttribute("data-jos_anchor",t)}d.setAttribute("data-jos_animation",f),h&&d.setAttribute("data-jos_animationinverse",h),d.setAttribute("data-jos_duration",j);const v=parseFloat(p*c+m);d.setAttribute("data-jos_delay",v),d.setAttribute("data-jos_once",u),"false"===_&&d.setAttribute("data-jos_mirror","false"),g&&t.push(d),y&&d.setAttribute("data-jos_scrolldirection",y),b&&d.setAttribute("data-jos_rootmargin",b),a.dataset.jos_stagger_scroll&&d.setAttribute("data-jos_scroll",a.dataset.jos_stagger_scroll),a.dataset.jos_stagger_timingFunction&&d.setAttribute("data-jos_timingFunction",a.dataset.jos_stagger_timingFunction),a.dataset.jos_stagger_invoke&&d.setAttribute("data-jos_invoke",a.dataset.jos_stagger_invoke),a.dataset.jos_stagger_invoke_out&&d.setAttribute("data-jos_invoke_out",a.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,d],s(d)}})),!a.dataset.jos_animation)return void a.classList.remove("jos")}a.setAttribute("data-jos_animation",o),i&&a.setAttribute("data-jos_animationinverse",i),n&&a.setAttribute("data-jos_timingFunction",n),"false"==d&&a.setAttribute("data-jos_mirror",d),r&&(a.setAttribute("data-jos_duration",r),this.setRange.add(parseFloat(r))),l&&(a.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),a.setAttribute("data-jos_counter","0"),a.classList.add("jos-"+o),(a.dataset.jos_startvisible||this.default_startVisible)&&t.push(a),this.default_scrolldirection&&a.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c={rootMargin:[a.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],a.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],a.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],a.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:this.default_threshold,passive:this.default_passive};if(a.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,c);this.observers.push(t),t.observe(document.getElementById(a.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,c);this.observers.push(t),t.observe(a)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let a="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+a+";}");for(const t of this.setRange)s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:a,animationinverse:e,timingFunction:o,threshold:i,startVisible:n,scrollDirection:r,intersectionRatio:l,duration:d,mirror:c,delay:f,debugMode:m,disable:p,scrollProgressDisable:j,rootMargin:u,rootMarginTop:h,rootMarginBottom:_}=t;this.default_once=s||this.default_once,this.default_animation=a||this.default_animation,this.default_animationinverse=e||this.default_animation,this.default_timingFunction=o||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=n||this.default_startVisible,this.default_scrolldirection=r||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=f||this.default_delay,this.debugMode=m||this.debugMode,null!=p&&(this.disable=p),this.scrollProgressDisable=j||this.scrollProgressDisable,this.default_rootMargin=u||`${h||"-10%"} 0% ${_||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS})); diff --git a/dist/v0.9.1/jos.min.css b/dist/v0.9.1/jos.min.css deleted file mode 100644 index b815a82..0000000 --- a/dist/v0.9.1/jos.min.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important} \ No newline at end of file diff --git a/dist/v0.9.1/jos.min.js b/dist/v0.9.1/jos.min.js deleted file mode 100644 index f3c4ba5..0000000 --- a/dist/v0.9.1/jos.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var e=s.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}");const JOS=new class{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.1 (Minified)";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){}debugger(t=0){if(0==t&&this.debugMode){this.version();for(const[t,s]of Object.entries(this));}(1==t||0==t)&&this.debugMode}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let e=t[0],o=e.target;document.querySelectorAll("[data-jos_anchor='#"+o.id+"']").forEach((t=>{let o=t.dataset.jos_animation,a=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}o&&(t.classList.remove("jos-"+o),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=a&&t.classList.add("jos-"+a))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+o),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;const s=this.default_rootMargin;let e=window.innerHeight;const o=t=>{const o=t.dataset.jos_rootmargin||s,a=o.split(" ").map(parseFloat),i=e*a[0]/100,r=e*a[2]/100;t.jos={rootMargin:o,rootMarginValues:a,topMargin:i,bottomMargin:r};const n=t.getBoundingClientRect(),l=n.top-t.jos.topMargin,d=n.bottom-t.jos.bottomMargin,c=n.top/e,u=l/(e-t.jos.topMargin-t.jos.bottomMargin);let f=0;f=u<=0?0:u>=100?1:u,t.jos={elementRect:n,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:u,scrollProgress:f},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(o)}};callbackRouter=(t,s,e=1)=>{if(this.disable)return;let o=t[0],a=o.target,i=a.dataset.jos_animation,r=a.dataset.jos_animationinverse,n=1;if(n=o.boundingClientRect.top<0?0:1,o.isIntersecting){if("false"!=a.dataset.jos_scroll&&null!=a.dataset.jos_scroll&&(this.scrollEnter.push(a),this.callbackScroller(this.scrollEnter)),null!=a.dataset.jos_counter){let t=parseInt(a.dataset.jos_counter);t++,a.dataset.jos_counter=t}"false"==a.dataset.jos_mirror&&a.classList.remove("jos-no-mirror"),i&&(a.classList.remove("jos-"+i),null!=a.dataset.jos_invoke&&window[a.dataset.jos_invoke](a),null==a.dataset.jos_once&&"false"==a.dataset.jos_once||("true"==a.dataset.jos_once||a.dataset.jos_counter>=a.dataset.jos_once)&&s.unobserve(a)),null!=r&&a.classList.add("jos-"+r)}else(void 0===a.dataset.jos_scrolldirection||1===n&&"down"===a.dataset.jos_scrolldirection||0===n&&"up"===a.dataset.jos_scrolldirection||"none"===a.dataset.jos_scrolldirection)&&(a.classList.toggle("jos-no-mirror","false"==a.dataset.jos_mirror),a.classList.add("jos-"+i),null!=r&&a.classList.remove("jos-"+r),void 0!==a.dataset.jos_invoke_out&&window[a.dataset.jos_invoke_out](a)),"false"!=a.dataset.jos_scroll&&null!=a.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==a.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=e=>{let o=e.dataset.jos_once,a=e.dataset.jos_animation||this.default_animation,i=e.dataset.jos_animationinverse,r=e.dataset.jos_timingFunction,n=e.dataset.jos_duration,l=e.dataset.jos_delay,d=e.dataset.jos_mirror||this.default_mirror;if(e.classList.contains("jos_disabled")&&(e.classList.remove("jos_disabled"),e.classList.add("jos")),o&&("true"==o||/^\d+$/.test(o))?e.setAttribute("data-jos_once",o):e.setAttribute("data-jos_once",this.default_once?"1":"false"),e.dataset.jos_stagger){const o=this.default_delay,a=this.default_duration,i=this.once,r=this.mirror,n=this.scrolldirection,l=this.rootMargin;if(e.id||(e.id=Math.random().toString(36).substring(7)),Array.from(e.children).forEach(((d,c)=>{if(!d.classList.contains("jos")){d.classList.add("jos"),d.id||(d.id=`${e.id}_${c}`);const u=e.dataset.jos_stagger,f=e.dataset.jos_stagger_delay||o,j=e.dataset.jos_stagger_seq||0,_=e.dataset.jos_stagger_duration||a,m=e.dataset.jos_stagger_once||i,p=e.dataset.jos_staggerinverse||r,h=e.dataset.jos_stagger_mirror||r,g=e.dataset.jos_stagger_startVisible,b=e.dataset.jos_stagger_scrolldirection||n,v=e.dataset.jos_stagger_rootmargin||l;if(e.dataset.jos_stagger_anchor||d.dataset.jos_anchor){const t="true"===e.dataset.jos_stagger_anchor?"#"+e.id:e.dataset.jos_stagger_anchor;d.setAttribute("data-jos_anchor",t)}d.setAttribute("data-jos_animation",u),p&&d.setAttribute("data-jos_animationinverse",p),d.setAttribute("data-jos_duration",_);const x=parseFloat(j*c+f);d.setAttribute("data-jos_delay",x),d.setAttribute("data-jos_once",m),"false"===h&&d.setAttribute("data-jos_mirror","false"),g&&t.push(d),b&&d.setAttribute("data-jos_scrolldirection",b),v&&d.setAttribute("data-jos_rootmargin",v),e.dataset.jos_stagger_scroll&&d.setAttribute("data-jos_scroll",e.dataset.jos_stagger_scroll),e.dataset.jos_stagger_timingFunction&&d.setAttribute("data-jos_timingFunction",e.dataset.jos_stagger_timingFunction),e.dataset.jos_stagger_invoke&&d.setAttribute("data-jos_invoke",e.dataset.jos_stagger_invoke),e.dataset.jos_stagger_invoke_out&&d.setAttribute("data-jos_invoke_out",e.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,d],s(d)}})),!e.dataset.jos_animation)return void e.classList.remove("jos")}e.setAttribute("data-jos_animation",a),i&&e.setAttribute("data-jos_animationinverse",i),r&&e.setAttribute("data-jos_timingFunction",r),"false"==d&&e.setAttribute("data-jos_mirror",d),n&&(e.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),l&&(e.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),e.setAttribute("data-jos_counter","0"),e.classList.add("jos-"+a),(e.dataset.jos_startvisible||this.default_startVisible)&&t.push(e),this.default_scrolldirection&&e.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c={rootMargin:[e.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],e.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],e.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],e.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:this.default_threshold,passive:this.default_passive};if(e.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,c);this.observers.push(t),t.observe(document.getElementById(e.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,c);this.observers.push(t),t.observe(e)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+e+";}");for(const t of this.setRange)s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:o,timingFunction:a,threshold:i,startVisible:r,scrollDirection:n,intersectionRatio:l,duration:d,mirror:c,delay:u,debugMode:f,disable:j,scrollProgressDisable:_,rootMargin:m,rootMarginTop:p,rootMarginBottom:h}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=o||this.default_animation,this.default_timingFunction=a||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=u||this.default_delay,this.debugMode=f||this.debugMode,null!=j&&(this.disable=j),this.scrollProgressDisable=_||this.scrollProgressDisable,this.default_rootMargin=m||`${p||"-10%"} 0% ${h||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}};"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS})); diff --git a/dist/v0.9.2/.htaccess b/dist/v0.9.2/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/v0.9.2/jos.css b/dist/v0.9.2/jos.css deleted file mode 100644 index ea37fe9..0000000 --- a/dist/v0.9.2/jos.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} \ No newline at end of file diff --git a/dist/v0.9.2/jos.debug.css b/dist/v0.9.2/jos.debug.css deleted file mode 100644 index 51534da..0000000 --- a/dist/v0.9.2/jos.debug.css +++ /dev/null @@ -1,594 +0,0 @@ -/* -JOS v0.9.2 By Jesvi Jonathan -*/ - -/* jos default */ -.jos { - /* opacity: 1;*/ - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - /* display: block; */ - /* transition-timing-function: ease-in-out; - transition-property: all; - transition-delay: 0; - transition-duration: 0.4s; */ -} -/* .jos:not([class]):not([class*="display"]):not(:has([class*="display"])) { - display: block; -} */ - -.jos-anchor { - opacity: 0; - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - transition-timing-function: ease-in-out; -} -.jos-static { - transform: translate(0, 0); - opacity: 1; -} -.jos-no-transition { - transition-timing-function: linear; - transition-duration: 0s; -} -.jos-none { -} -.jos-hidden { - display: none; -} -.jos-visible { - display: block; - opacity: 1; -} -.jos-stagger { - /* some cool transition */ - /* do not nullify this */ -} - -/* .jos-no-mirror { - transition: 0s forwards !important; -} */ - -/* fade */ -.jos-fade { - opacity: 0; -} -.jos-fade-right { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-fade-right-up { - opacity: 0; - transform: translateX(-100px) translateY(50px); -} -.jos-fade-right-down { - opacity: 0; - transform: translateX(-100px) translateY(-50px); -} -.jos-fade-left-up { - opacity: 0; - transform: translateX(100px) translateY(50px); -} -.jos-fade-left-down { - opacity: 0; - transform: translateX(100px) translateY(-50px); -} - -/* slide */ - -.jos-slide, -.jos-slide-right { - transform: translateX(-100px); -} -.jos-slide-left { - transform: translateX(100px); -} -.jos-slide-up { - transform: translateY(100px); -} -.jos-slide-down { - transform: translateY(-100px); -} -.jos-slide-right-up { - transform: translateX(-100px) translateY(100px); -} -.jos-slide-right-down { - transform: translateX(-100px) translateY(-100px); -} -.jos-slide-left-up { - transform: translateX(100px) translateY(100px); -} -.jos-slide-left-down { - transform: translateX(100px) translateY(-100px); -} - -/* zoom out */ -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); -} -.jos-zoom-out-right, -.jos-zoom-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0px, -100px); -} -.jos-zoom-out-left, -.jos-zoom-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0px, -100px); -} -.jos-zoom-out-down, -.jos-zoom-down { - opacity: 0; - transform: scale(0.8) translate3d(0px, -100px, 0px); -} -.jos-zoom-out-up, -.jos-zoom-up { - opacity: 0; - transform: scale(0.8) translate3d(0px, 100px, 0px); -} - -/* grow */ -.jos-grow { - transform: scale(0); -} -.jos-grow-right { - transform: scale(0) translate3d(-100px, 0px, -100px); -} -.jos-grow-left { - transform: scale(0) translate3d(100px, 0px, -100px); -} -.jos-grow-down { - transform: scale(0) translate3d(0px, -100px, 0px); -} -.jos-grow-up { - transform: scale(0) translate3d(0px, 100px, 0px); -} - -/* zoom in */ -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0px, -100px, 0px); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0px, 100px, 0px); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0px, -100px); -} - -/* shrink */ -.jos-shrink { - transform: scale(1.4); -} -.jos-shrink-right { - transform: scale(1.4) translate3d(-100px, 0px, -100px); -} -.jos-shrink-left { - transform: scale(1.4) translate3d(100px, 0px, -100px); -} -.jos-shrink-down { - transform: scale(1.4) translate3d(0px, -100px, 0px); -} -.jos-shrink-up { - transform: scale(1.4) translate3d(0px, 100px, 0px); -} - -/* flip */ -.jos-flip, -.jos-flip-right { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} - -/* rotate */ -.jos-rotate, -.jos-rotate-right { - opacity: 0; - transform: rotate(-180deg); -} -.jos-rotate-left { - opacity: 0; - transform: rotate(180deg); -} - -/* spin */ -.jos-spin, -.jos-spin-right { - opacity: 0; - transform: rotate(-180deg) scale(0); -} -.jos-spin-left { - opacity: 0; - transform: rotate(180deg) scale(0); -} - -/* revolve */ -.jos-revolve, -.jos-revolve-right { - opacity: 0; - transform: rotate(-360deg) scale(0); -} -.jos-revolve-left { - opacity: 0; - transform: rotate(360deg) scale(0); -} - -/* stretch */ -.jos-stretch { - opacity: 0; - transform: scaleX(0); -} -.jos-stretch-vertical { - opacity: 0; - transform: scaleY(0); -} - -/* skew */ -.jos-skew { - opacity: 0; - transform: skew(20deg, 20deg); -} -.jos-skew-right { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(-100px, 0px, -100px); -} -.jos-skew-left { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(100px, 0px, -100px); -} -.jos-skew-down { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, -100px, 0px); -} -.jos-skew-up { - opacity: 0; - transform: skew(20deg, 20deg) translate3d(0px, 100px, 0px); -} -.jos-slant { - transform: skew(25deg, 25deg); -} -.jos-slant-right { - transform: skew(25deg, 0deg); -} -.jos-slant-left { - transform: skew(0deg, 25deg); -} -.jos-bar, -.jos-bar_vertical { - transform: perspective(2500px) rotateY(-100deg); -} -.jos-bar_horizontal { - transform: perspective(2500px) rotateX(-100deg); -} - -.jos-grey { - filter: grayscale(100%); -} -.jos-blur { - filter: blur(7px); -} -.jos-backdrop { - backdrop-filter: blur(7px); - opacity: 0.8; -} -.jos-invert { - filter: invert(100%); -} -.jos-sepia { - filter: sepia(100%); -} -.jos-saturate { - filter: saturate(100%); -} -.jos-hue-rotate { - filter: hue-rotate(90deg); -} -.jos-brightness { - filter: brightness(0.5); -} - -/* timing function attribute */ -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} - -/* Playable animations */ - -.jos-slide-play, -.jos-slide-horizontal-play { - transition: 1s; - animation: jos-slide-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-play { - 0% { - transform: translateX(-100px); - } - - 100% { - transform: translateX(100px); - } -} - -.jos-slide-vertical-play { - animation: jos-slide-vertical-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-vertical-play { - 0% { - transform: translateY(-100px); - } - - 100% { - transform: translateY(100px); - } -} - -.jos-zoom-in-play, -.jos-pulse-play { - animation: jos-zoom-in-play 1s infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-in-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(0.8); - } -} - -.jos-zoom-play, -.jos-zoom-out-play, -.jos-pulse-out-play { - animation: jos-zoom-play 0.5s linear infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(1.1); - } -} - -.jos-flip-play { - animation: jos-flip-play 0.7s infinite; - animation-direction: alternate; -} -@keyframes jos-flip-play { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(180deg); - } -} - -.jos-rotate-play { - animation: jos-rotate-play 1s linear forwards infinite; - border-radius: 0%; - animation-direction: alternate-reverse; -} - -@keyframes jos-rotate-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-spin-play { - animation: jos-spin-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-spin-play { - 0% { - transform: rotate(0deg); - opacity: 0; - } - - 100% { - transform: rotate(360deg); - opacity: 1; - } -} - -.jos-revolve-play { - animation: jos-revolve-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-revolve-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-grow-play, -.jos-shrink-play { - animation: jos-grow-play 1s infinite; - animation-direction: alternate; -} -@keyframes jos-grow-play { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -.jos-shrink-play { - animation-direction: alternate-reverse; -} - -.jos-stretch-play { - animation: jos-stretch-play 0.7s infinite; - animation-direction: alternate; -} - -@keyframes jos-stretch-play { - 0% { - transform: scaleX(1); - } - - 100% { - transform: scaleX(0); - } -} - -.jos-stretch-vertical-play { - animation: jos-stretch-vertical-play 0.7s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-stretch-vertical-play { - 0% { - transform: scaleY(1); - } - - 100% { - transform: scaleY(0); - } -} - -.jos-fade-play { - animation: jos-fade-play 0.8s infinite; - animation-direction: alternate; -} - -@keyframes jos-fade-play { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.jos-fade-horizontal-play { - animation: jos-fade-horizontal-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-horizontal-play { - 0% { - opacity: 0; - transform: translateX(100px); - } - - 100% { - opacity: 1; - transform: translateX(-100px); - } -} - -.jos-fade-vertical-play { - animation: jos-fade-vertical-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-vertical-play { - 0% { - opacity: 0; - transform: translateY(100px); - } - - 100% { - opacity: 1; - transform: translateY(-100px); - } -} - -.jos-blink-play { - animation: jos-blink-play 1s steps(1, end) infinite; -} - -@keyframes jos-blink-play { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } -} diff --git a/dist/v0.9.2/jos.debug.js b/dist/v0.9.2/jos.debug.js deleted file mode 100644 index 76bc6b7..0000000 --- a/dist/v0.9.2/jos.debug.js +++ /dev/null @@ -1,702 +0,0 @@ -// import "./jos.css"; -// For jos.debug.js & jos under development, you are required to manually include jos.css using tag. -// Other versions of jos.js will auto import jos.css & does not require or specific imports. -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - default_mirror = undefined; - setRange = new Set(); - - debug = false; - scrollProgressDisable = undefined; - disable = false; - - static version = "0.9.2 (Debug)"; - static author = "Jesvi Jonathan"; - static webpage = "https://jos-animation.vercel.app"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - scrollEnter = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Webpage: ${jos.webpage} - - Github: ${jos.github}\n`); - } - //debugger = () => null; - debugger(type = 0) { - if (type === 0 && this.debugMode) { - this.version(); - - const settings = {}; - for (const key of Object.keys(this)) { - if (typeof this[key] !== "function") { - settings[key] = this[key]; - } - } - - console.log(`JOS Values:\n`, settings); - console.log("JOS Initialized:\n\n"); - } - } - - callbackRouter_anchor = (entries, observer) => { - if (this.disable) return; - - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }); - }; - - rand = (e) => { - if (Array.isArray(e)) return e[Math.floor(Math.random() * e.length)]; - - if (typeof e === "number") { - return e % 1 !== 0 ? Math.random() * e : Math.floor(Math.random() * e); - } - - return Math.random(); - }; - - // var box = target; - // console.log(box); - // const rootmargin = " 0% 0% -30% 0%"; - callbackScroller = (scl) => { - if (this.disable || this.scrollProgressDisable) return; - - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; - - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin; - const rootMarginValues = rootMargin.split(" ").map(parseFloat); - const topMargin = (wh * rootMarginValues[0]) / 100; - const bottomMargin = (wh * rootMarginValues[2]) / 100; - - box.jos = { - rootMargin, - rootMarginValues, - topMargin, - bottomMargin, - }; - const elementRect = box.getBoundingClientRect(); - const elementTop = elementRect.top - box.jos.topMargin; - const elementBottom = elementRect.bottom - box.jos.bottomMargin; - - const windowScrollProgress = elementRect.top / wh; - - const rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); - - let scrollProgress = 0; - - if (rootScrollProgress <= 0) { - scrollProgress = 0; - } else if (rootScrollProgress >= 100) { - scrollProgress = 1; - } else { - scrollProgress = rootScrollProgress; - } - - box.jos = { - elementRect, - elementTop, - elementBottom, - windowScrollProgress, - rootScrollProgress, - scrollProgress, - }; - - window[box.dataset.jos_scroll](box); - }; - - document.onscroll = (e) => { - if (this.disable || this.scrollProgressDisable) return; - scl.forEach(updateBox); - }; - }; - - // window["jos_scroll_" + box.id](obj); - callbackRouter = (entries, observer, type = 1) => { - if (this.disable) return; - - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } - - if (entry.isIntersecting) { - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter.push(target); - this.callbackScroller(this.scrollEnter); - } - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target.dataset.jos_mirror == "false") { - target.classList.remove("jos-no-mirror"); - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.toggle( - "jos-no-mirror", - target.dataset.jos_mirror == "false" - ); - - target.classList.add("jos-" + target_jos_animation); - - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - ); - this.callbackScroller(this.scrollEnter); - } - } - }; - - animationInit() { - let doit = []; - - let recursive_check = (box) => { - let object_default_once = box.dataset.jos_once || this.default_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = - box.dataset.jos_animationinverse || this.default_animationinverse; - let object_default_timingFunction = - box.dataset.jos_timingFunction || this.default_timingFunction; - let object_default_duration = - box.dataset.jos_duration || this.default_duration; - let object_default_delay = box.dataset.jos_delay || this.default_delay; - let object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - - if (box.dataset.jos_stagger) { - const defaultDelay = this.default_delay; - const defaultDuration = this.default_duration; - const defaultOnce = this.once; - const defaultMirror = this.mirror; - const defaultScrolldirection = this.scrolldirection; - const defaultRootMargin = this.rootMargin; - const defaultAnimationinverse = this.animationinverse; - if (!box.id) { - box.id = Math.random().toString(36).substring(7); - } - - Array.from(box.children).forEach((child, i) => { - if (!child.classList.contains("jos")) { - child.classList.add("jos"); - - if (!child.id) { - child.id = `${box.id}_${i}`; - } - - const stagger = box.dataset.jos_stagger; - const stagger_delay = box.dataset.jos_stagger_delay || defaultDelay; - const stagger_seq = box.dataset.jos_stagger_seq || 0; - const stagger_duration = - box.dataset.jos_stagger_duration || defaultDuration; - const stagger_once = box.dataset.jos_stagger_once || defaultOnce; - const staggerinverse = - box.dataset.jos_staggerinverse || defaultAnimationinverse; - const stagger_mirror = - box.dataset.jos_stagger_mirror || defaultMirror; - const stagger_visible = box.dataset.jos_stagger_startVisible; - const stagger_scrolldirection = - box.dataset.jos_stagger_scrolldirection || defaultScrolldirection; - const stagger_rootmargin = - box.dataset.jos_stagger_rootmargin || defaultRootMargin; - - if (box.dataset.jos_stagger_anchor || child.dataset.jos_anchor) { - const anchor = - box.dataset.jos_stagger_anchor === "true" - ? "#" + box.id - : box.dataset.jos_stagger_anchor; - child.setAttribute("data-jos_anchor", anchor); - } - - child.setAttribute("data-jos_animation", stagger); - - staggerinverse - ? child.setAttribute("data-jos_animationinverse", staggerinverse) - : null; - - child.setAttribute("data-jos_duration", stagger_duration); - - // let delg = parseFloat(stagger_seq, 2); - // delg = (delg * i).toFixed(1); - // delg = parseFloat(delg); - // console.log(delg); - // delg = delg + parseFloat(stagger_delay); - - // const delg = parseFloat((parseFloat(stagger_seq, 2) * i).toFixed(1)) + parseFloat(stagger_delay); - - const delg = parseFloat(stagger_seq * i + stagger_delay); - - child.setAttribute("data-jos_delay", delg); - - child.setAttribute("data-jos_once", stagger_once); - - if (stagger_mirror === "false") { - child.setAttribute("data-jos_mirror", "false"); - } - - if (stagger_visible) { - doit.push(child); - } - - if (stagger_scrolldirection) { - child.setAttribute( - "data-jos_scrolldirection", - stagger_scrolldirection - ); - } - - stagger_rootmargin - ? child.setAttribute("data-jos_rootmargin", stagger_rootmargin) - : null; - - if (box.dataset.jos_stagger_scroll) { - child.setAttribute( - "data-jos_scroll", - box.dataset.jos_stagger_scroll - ); - } - - if (box.dataset.jos_stagger_timingFunction) { - child.setAttribute( - "data-jos_timingFunction", - box.dataset.jos_stagger_timingFunction - ); - } - - if (box.dataset.jos_stagger_invoke) { - child.setAttribute( - "data-jos_invoke", - box.dataset.jos_stagger_invoke - ); - } - - if (box.dataset.jos_stagger_invoke_out) { - child.setAttribute( - "data-jos_invoke_out", - box.dataset.jos_stagger_invoke_out - ); - } - - this.boxes = [...this.boxes, child]; - recursive_check(child); - } - }); - - if (!box.dataset.jos_animation) { - box.classList.remove("jos"); - return; - } - } - - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - - if (object_default_mirror == "false") { - box.setAttribute("data-jos_mirror", object_default_mirror); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - this.setRange.add(parseFloat(object_default_duration)); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - this.setRange.add(parseFloat(object_default_delay)); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => { - const isNegative = value.startsWith("-"); - return isNegative ? value.substring(1) : `-${value}`; - }) - .join(" "); - - // let rootMargin = " 10% 0% -30% 0%"; - - let box_observer = { - rootMargin, - threshold: box.dataset.jos_threshold || this.default_threshold, - passive: box.dataset.jos_passive || this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }; - - this.boxes.forEach((box) => { - recursive_check(box); - }); - - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - } - - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); - } else { - box.classList.remove("jos-" + box.dataset.jos_animation); - } - }); - } - this.observers?.forEach((observer) => observer.disconnect()); - } - - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror" + " { transition: 0s forwards !important;}" - ); - //opacity " + s + ", transform - let property = "all "; - let s = - property + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - - styleSheet.insertRule(".jos {" + ("transition: " + s) + ";}"); - - for (const value of this.setRange) { - styleSheet.insertRule( - `[data-jos_duration="${value}"] { - transition-duration: ${value}s !important; - }` - ); - styleSheet.insertRule( - `[data-jos_delay="${value}"] { - transition-delay: ${value}s !important; - }` - ); - } - - this.jos_stylesheet = styleSheet; - } - - getBoxes() { - this.boxes = undefined; - - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); - } - return this.boxes; - } - - getDefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrolldirection, - intersectionRatio, - duration, - mirror, - delay, - debugMode, - disable, - scrollProgressDisable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = - animationinverse || this.default_animationinverse; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrolldirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - if (disable != undefined) { - this.disable = disable; - } - this.scrollProgressDisable = - scrollProgressDisable || this.scrollProgressDisable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - this.default_mirror = mirror || this.default_mirror; - } - - init(options = this.options) { - this.options = options; - this.getDefault(options); - - if (this.disable) return; - - this.getBoxes(); - if (this.debugMode) { - this.debugger(); - } - - this.start(); - - this.getStylesheet(); - } - - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); - } - this.disable = false; - return "Started"; - } - - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; - } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); - } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; - } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; - } - } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; - } -} -const JOS = new jos(); - -if (typeof module !== "undefined" && typeof module.exports !== "undefined") { - module.exports = JOS; -} else { - if (typeof define === "function" && define.amd) { - define([], function () { - return JOS; - }); - } else { - window.JOS = JOS; - } -} -//export default JOS; diff --git a/dist/v0.9.2/jos.js b/dist/v0.9.2/jos.js deleted file mode 100644 index 2aa6956..0000000 --- a/dist/v0.9.2/jos.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var a=s.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===a&&o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}}");class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.2";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Webpage: ${jos.webpage}\n - Github: ${jos.github}\n`)}debugger(t=0){if(0===t&&this.debugMode){this.version();const t={};for(const s of Object.keys(this))"function"!=typeof this[s]&&(t[s]=this[s]);console.log("JOS Values:\n",t),console.log("JOS Initialized:\n\n")}}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let a=t[0],o=a.target;document.querySelectorAll("[data-jos_anchor='#"+o.id+"']").forEach((t=>{let o=t.dataset.jos_animation,e=t.dataset.jos_animationinverse;if(a.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}o&&(t.classList.remove("jos-"+o),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=e&&t.classList.add("jos-"+e))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+o),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};rand=t=>Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:"number"==typeof t?t%1!=0?Math.random()*t:Math.floor(Math.random()*t):Math.random();callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;const s=this.default_rootMargin;let a=window.innerHeight;const o=t=>{const o=t.dataset.jos_rootmargin||s,e=o.split(" ").map(parseFloat),i=a*e[0]/100,r=a*e[2]/100;t.jos={rootMargin:o,rootMarginValues:e,topMargin:i,bottomMargin:r};const n=t.getBoundingClientRect(),l=n.top-t.jos.topMargin,d=n.bottom-t.jos.bottomMargin,c=n.top/a,f=l/(a-t.jos.topMargin-t.jos.bottomMargin);let p=0;p=f<=0?0:f>=100?1:f,t.jos={elementRect:n,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:f,scrollProgress:p},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(o)}};callbackRouter=(t,s,a=1)=>{if(this.disable)return;let o=t[0],e=o.target,i=e.dataset.jos_animation,r=e.dataset.jos_animationinverse,n=1;if(n=o.boundingClientRect.top<0?0:1,o.isIntersecting){if("false"!=e.dataset.jos_scroll&&null!=e.dataset.jos_scroll&&(this.scrollEnter.push(e),this.callbackScroller(this.scrollEnter)),null!=e.dataset.jos_counter){let t=parseInt(e.dataset.jos_counter);t++,e.dataset.jos_counter=t}"false"==e.dataset.jos_mirror&&e.classList.remove("jos-no-mirror"),i&&(e.classList.remove("jos-"+i),null!=e.dataset.jos_invoke&&window[e.dataset.jos_invoke](e),null==e.dataset.jos_once&&"false"==e.dataset.jos_once||("true"==e.dataset.jos_once||e.dataset.jos_counter>=e.dataset.jos_once)&&s.unobserve(e)),null!=r&&e.classList.add("jos-"+r)}else(void 0===e.dataset.jos_scrolldirection||1===n&&"down"===e.dataset.jos_scrolldirection||0===n&&"up"===e.dataset.jos_scrolldirection||"none"===e.dataset.jos_scrolldirection)&&(e.classList.toggle("jos-no-mirror","false"==e.dataset.jos_mirror),e.classList.add("jos-"+i),null!=r&&e.classList.remove("jos-"+r),void 0!==e.dataset.jos_invoke_out&&window[e.dataset.jos_invoke_out](e)),"false"!=e.dataset.jos_scroll&&null!=e.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==e.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=a=>{let o=a.dataset.jos_once||this.default_once,e=a.dataset.jos_animation||this.default_animation,i=a.dataset.jos_animationinverse||this.default_animationinverse,r=a.dataset.jos_timingFunction||this.default_timingFunction,n=a.dataset.jos_duration||this.default_duration,l=a.dataset.jos_delay||this.default_delay,d=a.dataset.jos_mirror||this.default_mirror;if(a.classList.contains("jos_disabled")&&(a.classList.remove("jos_disabled"),a.classList.add("jos")),o&&("true"==o||/^\d+$/.test(o))?a.setAttribute("data-jos_once",o):a.setAttribute("data-jos_once",this.default_once?"1":"false"),a.dataset.jos_stagger){const o=this.default_delay,e=this.default_duration,i=this.once,r=this.mirror,n=this.scrolldirection,l=this.rootMargin,d=this.animationinverse;if(a.id||(a.id=Math.random().toString(36).substring(7)),Array.from(a.children).forEach(((c,f)=>{if(!c.classList.contains("jos")){c.classList.add("jos"),c.id||(c.id=`${a.id}_${f}`);const p=a.dataset.jos_stagger,m=a.dataset.jos_stagger_delay||o,j=a.dataset.jos_stagger_seq||0,u=a.dataset.jos_stagger_duration||e,h=a.dataset.jos_stagger_once||i,_=a.dataset.jos_staggerinverse||d,g=a.dataset.jos_stagger_mirror||r,y=a.dataset.jos_stagger_startVisible,b=a.dataset.jos_stagger_scrolldirection||n,v=a.dataset.jos_stagger_rootmargin||l;if(a.dataset.jos_stagger_anchor||c.dataset.jos_anchor){const t="true"===a.dataset.jos_stagger_anchor?"#"+a.id:a.dataset.jos_stagger_anchor;c.setAttribute("data-jos_anchor",t)}c.setAttribute("data-jos_animation",p),_&&c.setAttribute("data-jos_animationinverse",_),c.setAttribute("data-jos_duration",u);const x=parseFloat(j*f+m);c.setAttribute("data-jos_delay",x),c.setAttribute("data-jos_once",h),"false"===g&&c.setAttribute("data-jos_mirror","false"),y&&t.push(c),b&&c.setAttribute("data-jos_scrolldirection",b),v&&c.setAttribute("data-jos_rootmargin",v),a.dataset.jos_stagger_scroll&&c.setAttribute("data-jos_scroll",a.dataset.jos_stagger_scroll),a.dataset.jos_stagger_timingFunction&&c.setAttribute("data-jos_timingFunction",a.dataset.jos_stagger_timingFunction),a.dataset.jos_stagger_invoke&&c.setAttribute("data-jos_invoke",a.dataset.jos_stagger_invoke),a.dataset.jos_stagger_invoke_out&&c.setAttribute("data-jos_invoke_out",a.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,c],s(c)}})),!a.dataset.jos_animation)return void a.classList.remove("jos")}a.setAttribute("data-jos_animation",e),i&&a.setAttribute("data-jos_animationinverse",i),r&&a.setAttribute("data-jos_timingFunction",r),"false"==d&&a.setAttribute("data-jos_mirror",d),n&&(a.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),l&&(a.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),a.setAttribute("data-jos_counter","0"),a.classList.add("jos-"+e),(a.dataset.jos_startvisible||this.default_startVisible)&&t.push(a),this.default_scrolldirection&&a.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c={rootMargin:[a.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],a.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],a.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],a.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:a.dataset.jos_threshold||this.default_threshold,passive:a.dataset.jos_passive||this.default_passive};if(a.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,c);this.observers.push(t),t.observe(document.getElementById(a.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,c);this.observers.push(t),t.observe(a)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let a="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+a+";}");for(const t of this.setRange)s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:a,animationinverse:o,timingFunction:e,threshold:i,startVisible:r,scrolldirection:n,intersectionRatio:l,duration:d,mirror:c,delay:f,debugMode:p,disable:m,scrollProgressDisable:j,rootMargin:u,rootMarginTop:h,rootMarginBottom:_}=t;this.default_once=s||this.default_once,this.default_animation=a||this.default_animation,this.default_animationinverse=o||this.default_animationinverse,this.default_timingFunction=e||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=f||this.default_delay,this.debugMode=p||this.debugMode,null!=m&&(this.disable=m),this.scrollProgressDisable=j||this.scrollProgressDisable,this.default_rootMargin=u||`${h||"-10%"} 0% ${_||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS})); diff --git a/dist/v0.9.2/jos.min.css b/dist/v0.9.2/jos.min.css deleted file mode 100644 index a3e6706..0000000 --- a/dist/v0.9.2/jos.min.css +++ /dev/null @@ -1 +0,0 @@ -.jos,.jos-anchor{transition:.4s ease-in-out}.jos-anchor{opacity:0}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important} \ No newline at end of file diff --git a/dist/v0.9.2/jos.min.js b/dist/v0.9.2/jos.min.js deleted file mode 100644 index 4a143bb..0000000 --- a/dist/v0.9.2/jos.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var e=s.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:.4s ease-in-out}.jos-anchor{opacity:0}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}");const JOS=new class{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.2 (Minified)";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){}debugger(t=0){if(0===t&&this.debugMode){this.version();let t={};for(let s of Object.keys(this))"function"!=typeof this[s]&&(t[s]=this[s])}}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let e=t[0],a=e.target;document.querySelectorAll("[data-jos_anchor='#"+a.id+"']").forEach((t=>{let a=t.dataset.jos_animation,o=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}a&&(t.classList.remove("jos-"+a),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),(null!=t.dataset.jos_once||"false"!=t.dataset.jos_once)&&("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=o&&t.classList.add("jos-"+o))}else(void 0===t.dataset.jos_scrolldirection||"down"===t.dataset.jos_scrolldirection||"none"===t.dataset.jos_scrolldirection)&&(t.classList.add("jos-"+a),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};rand=t=>Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:"number"==typeof t?t%1!=0?Math.random()*t:Math.floor(Math.random()*t):Math.random();callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;let s=this.default_rootMargin,e=window.innerHeight,a=t=>{let a=t.dataset.jos_rootmargin||s,o=a.split(" ").map(parseFloat),i=e*o[0]/100,r=e*o[2]/100;t.jos={rootMargin:a,rootMarginValues:o,topMargin:i,bottomMargin:r};let n=t.getBoundingClientRect(),l=n.top-t.jos.topMargin,d=n.bottom-t.jos.bottomMargin,c=n.top/e,u=l/(e-t.jos.topMargin-t.jos.bottomMargin),f=0;f=u<=0?0:u>=100?1:u,t.jos={elementRect:n,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:u,scrollProgress:f},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(a)}};callbackRouter=(t,s,e=1)=>{if(this.disable)return;let a=t[0],o=a.target,i=o.dataset.jos_animation,r=o.dataset.jos_animationinverse,n=1;if(n=a.boundingClientRect.top<0?0:1,a.isIntersecting){if("false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter.push(o),this.callbackScroller(this.scrollEnter)),null!=o.dataset.jos_counter){let t=parseInt(o.dataset.jos_counter);t++,o.dataset.jos_counter=t}"false"==o.dataset.jos_mirror&&o.classList.remove("jos-no-mirror"),i&&(o.classList.remove("jos-"+i),null!=o.dataset.jos_invoke&&window[o.dataset.jos_invoke](o),(null!=o.dataset.jos_once||"false"!=o.dataset.jos_once)&&("true"==o.dataset.jos_once||o.dataset.jos_counter>=o.dataset.jos_once)&&s.unobserve(o)),null!=r&&o.classList.add("jos-"+r)}else(void 0===o.dataset.jos_scrolldirection||1===n&&"down"===o.dataset.jos_scrolldirection||0===n&&"up"===o.dataset.jos_scrolldirection||"none"===o.dataset.jos_scrolldirection)&&(o.classList.toggle("jos-no-mirror","false"==o.dataset.jos_mirror),o.classList.add("jos-"+i),null!=r&&o.classList.remove("jos-"+r),void 0!==o.dataset.jos_invoke_out&&window[o.dataset.jos_invoke_out](o)),"false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==o.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=e=>{let a=e.dataset.jos_once||this.default_once,o=e.dataset.jos_animation||this.default_animation,i=e.dataset.jos_animationinverse||this.default_animationinverse,r=e.dataset.jos_timingFunction||this.default_timingFunction,n=e.dataset.jos_duration||this.default_duration,l=e.dataset.jos_delay||this.default_delay,d=e.dataset.jos_mirror||this.default_mirror;if(e.classList.contains("jos_disabled")&&(e.classList.remove("jos_disabled"),e.classList.add("jos")),a&&("true"==a||/^\d+$/.test(a))?e.setAttribute("data-jos_once",a):e.setAttribute("data-jos_once",this.default_once?"1":"false"),e.dataset.jos_stagger){let a=this.default_delay,o=this.default_duration,i=this.once,r=this.mirror,n=this.scrolldirection,l=this.rootMargin,d=this.animationinverse;if(e.id||(e.id=Math.random().toString(36).substring(7)),Array.from(e.children).forEach(((c,u)=>{if(!c.classList.contains("jos")){c.classList.add("jos"),c.id||(c.id=`${e.id}_${u}`);let f=e.dataset.jos_stagger,j=e.dataset.jos_stagger_delay||a,_=e.dataset.jos_stagger_seq||0,h=e.dataset.jos_stagger_duration||o,m=e.dataset.jos_stagger_once||i,p=e.dataset.jos_staggerinverse||d,g=e.dataset.jos_stagger_mirror||r,b=e.dataset.jos_stagger_startVisible,v=e.dataset.jos_stagger_scrolldirection||n,y=e.dataset.jos_stagger_rootmargin||l;if(e.dataset.jos_stagger_anchor||c.dataset.jos_anchor){let t="true"===e.dataset.jos_stagger_anchor?"#"+e.id:e.dataset.jos_stagger_anchor;c.setAttribute("data-jos_anchor",t)}c.setAttribute("data-jos_animation",f),p&&c.setAttribute("data-jos_animationinverse",p),c.setAttribute("data-jos_duration",h);let x=parseFloat(_*u+j);c.setAttribute("data-jos_delay",x),c.setAttribute("data-jos_once",m),"false"===g&&c.setAttribute("data-jos_mirror","false"),b&&t.push(c),v&&c.setAttribute("data-jos_scrolldirection",v),y&&c.setAttribute("data-jos_rootmargin",y),e.dataset.jos_stagger_scroll&&c.setAttribute("data-jos_scroll",e.dataset.jos_stagger_scroll),e.dataset.jos_stagger_timingFunction&&c.setAttribute("data-jos_timingFunction",e.dataset.jos_stagger_timingFunction),e.dataset.jos_stagger_invoke&&c.setAttribute("data-jos_invoke",e.dataset.jos_stagger_invoke),e.dataset.jos_stagger_invoke_out&&c.setAttribute("data-jos_invoke_out",e.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,c],s(c)}})),!e.dataset.jos_animation)return void e.classList.remove("jos")}e.setAttribute("data-jos_animation",o),i&&e.setAttribute("data-jos_animationinverse",i),r&&e.setAttribute("data-jos_timingFunction",r),"false"==d&&e.setAttribute("data-jos_mirror",d),n&&(e.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),l&&(e.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),e.setAttribute("data-jos_counter","0"),e.classList.add("jos-"+o),(e.dataset.jos_startvisible||this.default_startVisible)&&t.push(e),this.default_scrolldirection&&e.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c=[e.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],e.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],e.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],e.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),u={rootMargin:c,threshold:e.dataset.jos_threshold||this.default_threshold,passive:e.dataset.jos_passive||this.default_passive};if(e.dataset.jos_anchor){let t=new IntersectionObserver(this.callbackRouter_anchor,u);this.observers.push(t),t.observe(document.getElementById(e.dataset.jos_anchor.substring(1)))}else{let t=new IntersectionObserver(this.callbackRouter,u);this.observers.push(t),t.observe(e)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){let t=document.createElement("style");document.head.appendChild(t);let s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";for(let t of(s.insertRule(".jos {transition: "+e+";}"),this.setRange))s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:a,timingFunction:o,threshold:i,startVisible:r,scrolldirection:n,intersectionRatio:l,duration:d,mirror:c,delay:u,debugMode:f,disable:j,scrollProgressDisable:_,rootMargin:h,rootMarginTop:m,rootMarginBottom:p}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=a||this.default_animationinverse,this.default_timingFunction=o||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=u||this.default_delay,this.debugMode=f||this.debugMode,null!=j&&(this.disable=j),this.scrollProgressDisable=_||this.scrollProgressDisable,this.default_rootMargin=h||`${m||"-10%"} 0% ${p||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){for(let s in this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0,this)this.hasOwnProperty(s)&&"function"!=typeof this[s]&&(this[s]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}};"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS})); diff --git a/dist/v0.9/.htaccess b/dist/v0.9/.htaccess deleted file mode 100644 index e69de29..0000000 diff --git a/dist/v0.9/jos.css b/dist/v0.9/jos.css deleted file mode 100644 index 18fbb22..0000000 --- a/dist/v0.9/jos.css +++ /dev/null @@ -1 +0,0 @@ -.jos{display:block}.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-fade,.jos-stagger-fade *{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} \ No newline at end of file diff --git a/dist/v0.9/jos.debug.css b/dist/v0.9/jos.debug.css deleted file mode 100644 index 3491b69..0000000 --- a/dist/v0.9/jos.debug.css +++ /dev/null @@ -1,518 +0,0 @@ -/* -JOS v0.9.0 By Jesvi Jonathan -*/ - -/* jos default */ -.jos { - /* opacity: 1;*/ - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - display: block; - /* transition-timing-function: ease-in-out; - transition-property: all; - transition-delay: 0; - transition-duration: 0.4s; */ -} -/* .jos:not([class]):not([class*="display"]):not(:has([class*="display"])) { - display: block; -} */ - -.jos-anchor { - opacity: 0; - /* transition: opacity 0.4s, transform 0.4s; */ - transition: all 0.4s ease-in-out; - transition-timing-function: ease-in-out; -} -.jos-static { - transform: translate(0, 0); - opacity: 1; -} -.jos-no-transition { - transition-timing-function: linear; - transition-duration: 0s; -} - -/* .jos-no-mirror { - transition: 0s forwards !important; -} */ - -/* fade */ -.jos-fade, -.jos-stagger-fade * { - opacity: 0; -} -.jos-fade-right { - opacity: 0; - transform: translateX(-100px); -} -.jos-fade-left { - opacity: 0; - transform: translateX(100px); -} -.jos-fade-up { - opacity: 0; - transform: translateY(50px); -} -.jos-fade-down { - opacity: 0; - transform: translateY(-50px); -} -.jos-fade-right-up { - opacity: 0; - transform: translateX(-100px) translateY(50px); -} -.jos-fade-right-down { - opacity: 0; - transform: translateX(-100px) translateY(-50px); -} -.jos-fade-left-up { - opacity: 0; - transform: translateX(100px) translateY(50px); -} -.jos-fade-left-down { - opacity: 0; - transform: translateX(100px) translateY(-50px); -} - -/* slide */ - -.jos-slide, -.jos-slide-right { - transform: translateX(-100px); -} -.jos-slide-left { - transform: translateX(100px); -} -.jos-slide-up { - transform: translateY(100px); -} -.jos-slide-down { - transform: translateY(-100px); -} -.jos-slide-right-up { - transform: translateX(-100px) translateY(100px); -} -.jos-slide-right-down { - transform: translateX(-100px) translateY(-100px); -} -.jos-slide-left-up { - transform: translateX(100px) translateY(100px); -} -.jos-slide-left-down { - transform: translateX(100px) translateY(-100px); -} - -/* zoom out */ -.jos-zoom, -.jos-zoom-out { - opacity: 0; - transform: scale(0.8); -} -.jos-zoom-out-right, -.jos-zoom-right { - opacity: 0; - transform: scale(0.8) translate3d(-100px, 0px, -100px); -} -.jos-zoom-out-left, -.jos-zoom-left { - opacity: 0; - transform: scale(0.8) translate3d(100px, 0px, -100px); -} -.jos-zoom-out-down, -.jos-zoom-down { - opacity: 0; - transform: scale(0.8) translate3d(0px, -100px, 0px); -} -.jos-zoom-out-up, -.jos-zoom-up { - opacity: 0; - transform: scale(0.8) translate3d(0px, 100px, 0px); -} - -/* grow */ -.jos-grow { - transform: scale(0); -} -.jos-grow-right { - transform: scale(0) translate3d(-100px, 0px, -100px); -} -.jos-grow-left { - transform: scale(0) translate3d(100px, 0px, -100px); -} -.jos-grow-down { - transform: scale(0) translate3d(0px, -100px, 0px); -} -.jos-grow-up { - transform: scale(0) translate3d(0px, 100px, 0px); -} - -/* zoom in */ -.jos-zoom-in { - opacity: 0; - transform: scale(1.1); -} -.jos-zoom-in-down { - opacity: 0; - transform: scale(1.1) translate3d(0px, -100px, 0px); -} -.jos-zoom-in-up { - opacity: 0; - transform: scale(1.1) translate3d(0px, 100px, 0px); -} -.jos-zoom-in-right { - opacity: 0; - transform: scale(1.1) translate3d(-100px, 0px, -100px); -} -.jos-zoom-in-left { - opacity: 0; - transform: scale(1.1) translate3d(100px, 0px, -100px); -} - -/* shrink */ -.jos-shrink { - transform: scale(1.4); -} -.jos-shrink-right { - transform: scale(1.4) translate3d(-100px, 0px, -100px); -} -.jos-shrink-left { - transform: scale(1.4) translate3d(100px, 0px, -100px); -} -.jos-shrink-down { - transform: scale(1.4) translate3d(0px, -100px, 0px); -} -.jos-shrink-up { - transform: scale(1.4) translate3d(0px, 100px, 0px); -} - -/* flip */ -.jos-flip, -.jos-flip-right { - transform: perspective(2500px) rotateY(-100deg); - opacity: 0; -} -.jos-flip-left { - transform: perspective(2500px) rotateY(100deg); - opacity: 0; -} -.jos-flip-up { - opacity: 0; - transform: perspective(2500px) rotateX(-100deg); -} -.jos-flip-down { - opacity: 0; - transform: perspective(2500px) rotateX(100deg); -} - -/* rotate */ -.jos-rotate, -.jos-rotate-right { - opacity: 0; - transform: rotate(-180deg); -} -.jos-rotate-left { - opacity: 0; - transform: rotate(180deg); -} - -/* spin */ -.jos-spin, -.jos-spin-right { - opacity: 0; - transform: rotate(-180deg) scale(0); -} -.jos-spin-left { - opacity: 0; - transform: rotate(180deg) scale(0); -} - -/* revolve */ -.jos-revolve, -.jos-revolve-right { - opacity: 0; - transform: rotate(-360deg) scale(0); -} -.jos-revolve-left { - opacity: 0; - transform: rotate(360deg) scale(0); -} - -/* stretch */ -.jos-stretch { - opacity: 0; - transform: scaleX(0); -} -.jos-stretch-vertical { - opacity: 0; - transform: scaleY(0); -} - -/* timing function attribute */ -[data-jos_timing_function="ease"] { - transition-timing-function: ease !important; -} -[data-jos_timing_function="ease-in"] { - transition-timing-function: ease-in !important; -} -[data-jos_timing_function="ease-out"] { - transition-timing-function: ease-out !important; -} -[data-jos_timing_function="ease-in-out"] { - transition-timing-function: ease-in-out !important; -} -[data-jos_timing_function="linear"] { - transition-timing-function: linear !important; -} -[data-jos_timing_function="step-start"] { - transition-timing-function: step-start !important; -} -[data-jos_timing_function="step-end"] { - transition-timing-function: step-end !important; -} -[data-jos_timing_function="steps"] { - transition-timing-function: steps(5, end) !important; -} -[data-jos_timing_function="frames"] { - transition-timing-function: frames(5) !important; -} - -/* Playable animations */ - -.jos-slide-play, -.jos-slide-horizontal-play { - transition: 1s; - animation: jos-slide-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-play { - 0% { - transform: translateX(-100px); - } - - 100% { - transform: translateX(100px); - } -} - -.jos-slide-vertical-play { - animation: jos-slide-vertical-play 0.7s ease-in-out infinite; - animation-direction: alternate-reverse; -} -@keyframes jos-slide-vertical-play { - 0% { - transform: translateY(-100px); - } - - 100% { - transform: translateY(100px); - } -} - -.jos-zoom-in-play, -.jos-pulse-play { - animation: jos-zoom-in-play 1s infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-in-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(0.8); - } -} - -.jos-zoom-play, -.jos-zoom-out-play, -.jos-pulse-out-play { - animation: jos-zoom-play 0.5s linear infinite; - animation-direction: alternate; -} - -@keyframes jos-zoom-play { - 0% { - transform: scale(1); - opacity: 0; - } - - 100% { - opacity: 1; - transform: scale(1.1); - } -} - -.jos-flip-play { - animation: jos-flip-play 0.7s infinite; - animation-direction: alternate; -} -@keyframes jos-flip-play { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(180deg); - } -} - -.jos-rotate-play { - animation: jos-rotate-play 1s linear forwards infinite; - border-radius: 0%; - animation-direction: alternate-reverse; -} - -@keyframes jos-rotate-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-spin-play { - animation: jos-spin-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-spin-play { - 0% { - transform: rotate(0deg); - opacity: 0; - } - - 100% { - transform: rotate(360deg); - opacity: 1; - } -} - -.jos-revolve-play { - animation: jos-revolve-play 1.5s infinite; - animation-direction: alternate; -} -@keyframes jos-revolve-play { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.jos-grow-play, -.jos-shrink-play { - animation: jos-grow-play 1s infinite; - animation-direction: alternate; -} -@keyframes jos-grow-play { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } -} - -.jos-shrink-play { - animation-direction: alternate-reverse; -} - -.jos-stretch-play { - animation: jos-stretch-play 0.7s infinite; - animation-direction: alternate; -} - -@keyframes jos-stretch-play { - 0% { - transform: scaleX(1); - } - - 100% { - transform: scaleX(0); - } -} - -.jos-stretch-vertical-play { - animation: jos-stretch-vertical-play 0.7s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-stretch-vertical-play { - 0% { - transform: scaleY(1); - } - - 100% { - transform: scaleY(0); - } -} - -.jos-fade-play { - animation: jos-fade-play 0.8s infinite; - animation-direction: alternate; -} - -@keyframes jos-fade-play { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.jos-fade-horizontal-play { - animation: jos-fade-horizontal-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-horizontal-play { - 0% { - opacity: 0; - transform: translateX(100px); - } - - 100% { - opacity: 1; - transform: translateX(-100px); - } -} - -.jos-fade-vertical-play { - animation: jos-fade-vertical-play 1s infinite; - animation-direction: alternate-reverse; -} - -@keyframes jos-fade-vertical-play { - 0% { - opacity: 0; - transform: translateY(100px); - } - - 100% { - opacity: 1; - transform: translateY(-100px); - } -} - -.jos-blink-play { - animation: jos-blink-play 1s steps(1, end) infinite; -} - -@keyframes jos-blink-play { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } -} diff --git a/dist/v0.9/jos.debug.js b/dist/v0.9/jos.debug.js deleted file mode 100644 index b0e1508..0000000 --- a/dist/v0.9/jos.debug.js +++ /dev/null @@ -1,556 +0,0 @@ -// import "./jos.css"; -// For jos.debug.js & jos under development, you are required to manually include jos.css using tag. -// Other versions of jos.js will auto import jos.css & does not require or specific imports. -class jos { - default_once = false; - default_animation = "fade"; - default_animationinverse = undefined; - default_timingFunction = "ease-in-out"; - default_threshold = 0; - default_duration = 0.4; - default_delay = 0; - default_intersectionRatio = 0; - default_rootMargin = "-10% 0% -40% 0%"; - default_startVisible = undefined; - default_scrolldirection = undefined; - default_passive = true; - default_mirror = undefined; - setRange = new Set(); - - debug = false; - scrollProgressDisable = undefined; - disable = false; - - static version = "0.9.0 (Debug)"; - static author = "Jesvi Jonathan"; - static github = "https://github.com/jesvijonathan/JOS-Animation-Library"; - - options = {}; - jos_stylesheet = undefined; - boxes = undefined; - observers = []; - scrollEnter = []; - - constructor() {} - - version() { - console.log(`JOS: Javascript On Scroll Animation Library - - Version: ${jos.version} - - Author: ${jos.author} - - Github: ${jos.github}\n`); - } - //debugger = () => null; - debugger(type = 0) { - if (type == 0 && this.debugMode) { - this.version(); - console.log(`JOS Settings: - - animation: ${this.default_animation} - - once: ${this.default_once} - - animationinverse: ${this.default_animationinverse} - - timingFunction: ${this.default_timingFunction} - - duration: ${this.default_duration} - - delay: ${this.default_delay} - - threshold: ${this.default_threshold} - - startVisible: ${this.default_startVisible} - - scrolldirection: ${this.default_scrolldirection} - - intersectionRatio: ${this.default_intersectionRatio} - - rootMargin: ${this.default_rootMargin} - - disable: ${this.disable} - - debugMode: ${this.debugMode}\n`); - } - console.log("JOS Initialized:\n\n"); - if ((type == 1 || type == 0) && this.debugMode) { - console.log(this.boxes || "No Elements Found"); - } - } - - callbackRouter_anchor = (entries, observer) => { - if (this.disable) return; - - let entry = entries[0]; - let parentTarget = entry.target; - let elem = document.querySelectorAll( - "[data-jos_anchor='#" + parentTarget.id + "']" - ); - elem.forEach((target) => { - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - let scroll_dir = 1; - if (entry.isIntersecting) { - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.add("jos-" + target_jos_animation); - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - } - }); - }; - - // var box = target; - // console.log(box); - // const rootmargin = " 0% 0% -30% 0%"; - callbackScroller = (scl) => { - if (this.disable || this.scrollProgressDisable) return; - - const defaultRootMargin = this.default_rootMargin; - let wh = window.innerHeight; - - const updateBox = (box) => { - const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin; - const rootMarginValues = rootMargin.split(" ").map(parseFloat); - const topMargin = (wh * rootMarginValues[0]) / 100; - const bottomMargin = (wh * rootMarginValues[2]) / 100; - - box.jos = { - rootMargin, - rootMarginValues, - topMargin, - bottomMargin, - }; - const elementRect = box.getBoundingClientRect(); - const elementTop = elementRect.top - box.jos.topMargin; - const elementBottom = elementRect.bottom - box.jos.bottomMargin; - - const windowScrollProgress = elementRect.top / wh; - - const rootScrollProgress = - elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin); - - let scrollProgress = 0; - - if (rootScrollProgress < 0) { - scrollProgress = 0; - } else if (rootScrollProgress > 100) { - scrollProgress = 1; - } else { - scrollProgress = rootScrollProgress; - } - - box.jos = { - elementRect, - elementTop, - elementBottom, - windowScrollProgress, - rootScrollProgress, - scrollProgress, - }; - - window[box.dataset.jos_scroll](box); - }; - - document.onscroll = (e) => { - if (this.disable || this.scrollProgressDisable) return; - scl.forEach(updateBox); - }; - }; - - // window["jos_scroll_" + box.id](obj); - callbackRouter = (entries, observer, type = 1) => { - if (this.disable) return; - - let entry = entries[0]; - let target = entry.target; - let target_jos_animation = target.dataset.jos_animation; - let target_jos_animationinverse = target.dataset.jos_animationinverse; - - let scroll_dir = 1; - if (entry.boundingClientRect.top < 0) { - scroll_dir = 0; - } else { - scroll_dir = 1; - } - - if (entry.isIntersecting) { - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter.push(target); - this.callbackScroller(this.scrollEnter); - } - - if (target.dataset.jos_counter != undefined) { - let counter_value = parseInt(target.dataset.jos_counter); - counter_value++; - target.dataset.jos_counter = counter_value; - } - if (target.dataset.jos_mirror == "false") { - target.classList.remove("jos-no-mirror"); - } - if (target_jos_animation) { - target.classList.remove("jos-" + target_jos_animation); - if (target.dataset.jos_invoke != undefined) { - window[target.dataset.jos_invoke](target); - } - if ( - target.dataset.jos_once != undefined || - target.dataset.jos_once != "false" - ) { - if (target.dataset.jos_once == "true") { - observer.unobserve(target); - } else if (target.dataset.jos_counter >= target.dataset.jos_once) { - observer.unobserve(target); - } - } - } - if (target_jos_animationinverse != undefined) { - target.classList.add("jos-" + target_jos_animationinverse); - } - } else { - if ( - target.dataset.jos_scrolldirection === undefined || - (scroll_dir === 1 && target.dataset.jos_scrolldirection === "down") || - (scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") || - target.dataset.jos_scrolldirection === "none" - ) { - target.classList.toggle( - "jos-no-mirror", - target.dataset.jos_mirror == "false" - ); - - target.classList.add("jos-" + target_jos_animation); - if (target_jos_animationinverse != undefined) { - target.classList.remove("jos-" + target_jos_animationinverse); - } - if (target.dataset.jos_invoke_out !== undefined) { - window[target.dataset.jos_invoke_out](target); - } - } - if ( - target.dataset.jos_scroll != "false" && - target.dataset.jos_scroll != undefined - ) { - this.scrollEnter = this.scrollEnter.filter( - (item) => item.id !== target.id - ); - this.callbackScroller(this.scrollEnter); - } - } - }; - - animationInit() { - let doit = []; - const set = new Set(); - this.boxes.forEach((box) => { - let object_default_once = box.dataset.jos_once; - let object_default_animation = - box.dataset.jos_animation || this.default_animation; - let object_default_animationinverse = box.dataset.jos_animationinverse; - let object_default_timingFunction = box.dataset.jos_timingFunction; - let object_default_duration = box.dataset.jos_duration; - let object_default_delay = box.dataset.jos_delay; - let object_default_mirror = box.dataset.jos_mirror || this.default_mirror; - if (box.classList.contains("jos_disabled")) { - box.classList.remove("jos_disabled"); - box.classList.add("jos"); - } - if ( - object_default_once && - (object_default_once == "true" || /^\d+$/.test(object_default_once)) - ) { - box.setAttribute("data-jos_once", object_default_once); - } else { - box.setAttribute("data-jos_once", this.default_once ? "1" : "false"); - } - box.setAttribute("data-jos_animation", object_default_animation); - if (object_default_animationinverse) { - box.setAttribute( - "data-jos_animationinverse", - object_default_animationinverse - ); - } - if (object_default_timingFunction) { - box.setAttribute( - "data-jos_timingFunction", - object_default_timingFunction - ); - } - - if (object_default_mirror == "false") { - box.setAttribute("data-jos_mirror", object_default_mirror); - } - if (object_default_duration) { - box.setAttribute("data-jos_duration", object_default_duration); - this.setRange.add(parseFloat(object_default_duration)); - } - if (object_default_delay) { - box.setAttribute("data-jos_delay", object_default_delay); - this.setRange.add(parseFloat(object_default_delay)); - } - box.setAttribute("data-jos_counter", "0"); - box.classList.add("jos-" + object_default_animation); - if (box.dataset.jos_startvisible || this.default_startVisible) { - doit.push(box); - } - if (this.default_scrolldirection) { - box.setAttribute( - "data-jos_scrolldirection", - this.default_scrolldirection - ); - } - let rootMargin = [ - box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0], - box.dataset.jos_rootmargin_right || - this.default_rootMargin.split(" ")[1], - box.dataset.jos_rootmargin_bottom || - this.default_rootMargin.split(" ")[2], - box.dataset.jos_rootmargin_left || - this.default_rootMargin.split(" ")[3], - ] - .map((value) => { - const isNegative = value.startsWith("-"); - return isNegative ? value.substring(1) : `-${value}`; - }) - .join(" "); - - // let rootMargin = " 10% 0% -30% 0%"; - - let box_observer = { - rootMargin, - threshold: this.default_threshold, - passive: this.default_passive, - }; - if (box.dataset.jos_anchor) { - const observer = new IntersectionObserver( - this.callbackRouter_anchor, - box_observer - ); - this.observers.push(observer); - observer.observe( - document.getElementById(box.dataset.jos_anchor.substring(1)) - ); - } else { - const observer = new IntersectionObserver( - this.callbackRouter, - box_observer - ); - this.observers.push(observer); - observer.observe(box); - } - }); - setTimeout(() => { - doit.forEach((box) => { - let box_time = box.dataset.jos_startvisible; - setTimeout(() => { - if (box_time == "true") { - box_time = 0; - } - box.classList.remove("jos-" + box.dataset.jos_animation); - }, box_time || this.default_startVisible); - }); - }, 100); - console.log(this.setRange); - } - - animationUnset(state = 0) { - if (state != -1) { - this.boxes?.forEach((box) => { - box.classList.remove("jos"); - box.classList.add("jos_disabled"); - if (state == 0) { - box.classList.add("jos-" + box.dataset.jos_animation); - } else { - box.classList.remove("jos-" + box.dataset.jos_animation); - } - }); - } - this.observers?.forEach((observer) => observer.disconnect()); - } - - getStylesheet() { - const styleElement = document.createElement("style"); - document.head.appendChild(styleElement); - - const styleSheet = styleElement.sheet; - styleSheet.insertRule( - ".jos-no-mirror" + " { transition: 0s forwards !important;}" - ); - //opacity " + s + ", transform - let property = "all "; - let s = - property + - this.default_duration + - "s " + - this.default_timingFunction + - " " + - this.default_delay + - "s ;"; - - styleSheet.insertRule(".jos {" + ("transition: " + s) + ";}"); - - for (const value of this.setRange) { - styleSheet.insertRule( - `[data-jos_duration="${value}"] { - transition-duration: ${value}s !important; - }` - ); - styleSheet.insertRule( - `[data-jos_delay="${value}"] { - transition-delay: ${value}s !important; - }` - ); - } - - this.jos_stylesheet = styleSheet; - } - - getBoxes() { - this.boxes = undefined; - - if (!this.boxes) { - this.boxes = document.querySelectorAll(".jos"); - } - return this.boxes; - } - - getDefault(options = {}) { - let { - once, - animation, - animationinverse, - timingFunction, - threshold, - startVisible, - scrollDirection, - intersectionRatio, - duration, - mirror, - delay, - debugMode, - disable, - scrollProgressDisable, - rootMargin, - rootMarginTop, - rootMarginBottom, - } = options; - this.default_once = once || this.default_once; - this.default_animation = animation || this.default_animation; - this.default_animationinverse = animationinverse || this.default_animation; - this.default_timingFunction = timingFunction || this.default_timingFunction; - this.default_threshold = threshold || this.default_threshold; - this.default_startVisible = startVisible || this.default_startVisible; - this.default_scrolldirection = - scrollDirection || this.default_scrolldirection; - this.default_intersectionRatio = - intersectionRatio || this.default_threshold; - this.default_duration = duration || this.default_duration; - this.default_delay = delay || this.default_delay; - this.debugMode = debugMode || this.debugMode; - if (disable != undefined) { - this.disable = disable; - } - this.scrollProgressDisable = - scrollProgressDisable || this.scrollProgressDisable; - this.default_rootMargin = - rootMargin || - `${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`; - this.default_mirror = mirror || this.default_mirror; - } - - init(options = this.options) { - this.options = options; - this.getDefault(options); - - if (this.disable) return; - - this.getBoxes(); - if (this.debugMode) { - this.debugger(); - } - - this.start(); - - this.getStylesheet(); - } - - start(state = 0) { - // 0 - Normal/Full Start - // -1 - Resume with current state - if (state != -1) { - this.stop(); - this.animationInit(); - } - this.disable = false; - return "Started"; - } - - stop(state = 0) { - if (state == 1) { - state = 0; - } else if (state == 0) { - state = 1; - } - // 0 - Stop | final state | opacity 1 - // 1 - Stop | blank | opacity 0 - // -1 - Pause | final state of elements in viewport - this.disable = true; - if (state != -1) { - this.animationUnset(state); - } - return "Stopped"; - } - refresh() { - this.animationUnset(-1); - this.boxes = undefined; - this.getBoxes(); - this.animationInit(); - this.debugger(1); - return "Refreshed"; - } - - destroy(state = 0) { - // 0 - dont remove stylesheet | To preseve state - // 1 - remove along with stylesheet & jos stylesheet reference - this.animationUnset(-1); - this.boxes = undefined; - this.observers = []; - if (state == 1) { - this.jos_stylesheet.disabled = true; - } - this.jos_stylesheet = undefined; - for (let prop in this) { - if (this.hasOwnProperty(prop) && typeof this[prop] !== "function") { - this[prop] = undefined; - } - } - Object.setPrototypeOf(this, null); - return "JOS Instance Nuked"; - } -} -const JOS = new jos(); - -if (typeof module !== "undefined" && typeof module.exports !== "undefined") { - module.exports = JOS; -} -//export default JOS; diff --git a/dist/v0.9/jos.js b/dist/v0.9/jos.js deleted file mode 100644 index 2746fd7..0000000 --- a/dist/v0.9/jos.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var o=s.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===o&&a.firstChild?a.insertBefore(e,a.firstChild):a.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(".jos{display:block}.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-fade,.jos-stagger-fade *{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}.jos-slide-horizontal-play,.jos-slide-play{animation:jos-slide-play .7s ease-in-out infinite;animation-direction:alternate-reverse;transition:1s}@keyframes jos-slide-play{0%{transform:translateX(-100px)}to{transform:translateX(100px)}}.jos-slide-vertical-play{animation:jos-slide-vertical-play .7s ease-in-out infinite;animation-direction:alternate-reverse}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}to{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:jos-zoom-in-play 1s infinite;animation-direction:alternate}@keyframes jos-zoom-in-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:jos-zoom-play .5s linear infinite;animation-direction:alternate}@keyframes jos-zoom-play{0%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:jos-flip-play .7s infinite;animation-direction:alternate}@keyframes jos-flip-play{0%{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}.jos-rotate-play{animation:jos-rotate-play 1s linear infinite forwards;animation-direction:alternate-reverse;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-spin-play{animation:jos-spin-play 1.5s infinite;animation-direction:alternate}@keyframes jos-spin-play{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(1turn)}}.jos-revolve-play{animation:jos-revolve-play 1.5s infinite;animation-direction:alternate}@keyframes jos-revolve-play{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.jos-grow-play,.jos-shrink-play{animation:jos-grow-play 1s infinite;animation-direction:alternate}@keyframes jos-grow-play{0%{transform:scale(0)}to{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:jos-stretch-play .7s infinite;animation-direction:alternate}@keyframes jos-stretch-play{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:jos-stretch-vertical-play .7s infinite;animation-direction:alternate-reverse}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.jos-fade-play{animation:jos-fade-play .8s infinite;animation-direction:alternate}@keyframes jos-fade-play{0%{opacity:0}to{opacity:1}}.jos-fade-horizontal-play{animation:jos-fade-horizontal-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:jos-fade-vertical-play 1s infinite;animation-direction:alternate-reverse}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:jos-blink-play 1s step-end infinite}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}}");class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.0";static author="Jesvi Jonathan";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Github: ${jos.github}\n`)}debugger(t=0){0==t&&this.debugMode&&(this.version(),console.log(`JOS Settings:\n - animation: ${this.default_animation}\n - once: ${this.default_once}\n - animationinverse: ${this.default_animationinverse}\n - timingFunction: ${this.default_timingFunction}\n - duration: ${this.default_duration}\n - delay: ${this.default_delay}\n - threshold: ${this.default_threshold}\n - startVisible: ${this.default_startVisible}\n - scrolldirection: ${this.default_scrolldirection}\n - intersectionRatio: ${this.default_intersectionRatio}\n - rootMargin: ${this.default_rootMargin}\n - disable: ${this.disable}\n - debugMode: ${this.debugMode}\n`)),console.log("JOS Initialized:\n\n"),1!=t&&0!=t||!this.debugMode||console.log(this.boxes||"No Elements Found")}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let o=t[0],a=o.target;document.querySelectorAll("[data-jos_anchor='#"+a.id+"']").forEach((t=>{let a=t.dataset.jos_animation,e=t.dataset.jos_animationinverse;if(o.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}a&&(t.classList.remove("jos-"+a),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=e&&t.classList.add("jos-"+e))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+a),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;const s=this.default_rootMargin;let o=window.innerHeight;const a=t=>{const a=t.dataset.jos_rootmargin||s,e=a.split(" ").map(parseFloat),i=o*e[0]/100,n=o*e[2]/100;t.jos={rootMargin:a,rootMarginValues:e,topMargin:i,bottomMargin:n};const r=t.getBoundingClientRect(),l=r.top-t.jos.topMargin,d=r.bottom-t.jos.bottomMargin,c=r.top/o,f=l/(o-t.jos.topMargin-t.jos.bottomMargin);let m=0;m=f<0?0:f>100?1:f,t.jos={elementRect:r,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:f,scrollProgress:m},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(a)}};callbackRouter=(t,s,o=1)=>{if(this.disable)return;let a=t[0],e=a.target,i=e.dataset.jos_animation,n=e.dataset.jos_animationinverse,r=1;if(r=a.boundingClientRect.top<0?0:1,a.isIntersecting){if("false"!=e.dataset.jos_scroll&&null!=e.dataset.jos_scroll&&(this.scrollEnter.push(e),this.callbackScroller(this.scrollEnter)),null!=e.dataset.jos_counter){let t=parseInt(e.dataset.jos_counter);t++,e.dataset.jos_counter=t}"false"==e.dataset.jos_mirror&&e.classList.remove("jos-no-mirror"),i&&(e.classList.remove("jos-"+i),null!=e.dataset.jos_invoke&&window[e.dataset.jos_invoke](e),null==e.dataset.jos_once&&"false"==e.dataset.jos_once||("true"==e.dataset.jos_once||e.dataset.jos_counter>=e.dataset.jos_once)&&s.unobserve(e)),null!=n&&e.classList.add("jos-"+n)}else(void 0===e.dataset.jos_scrolldirection||1===r&&"down"===e.dataset.jos_scrolldirection||0===r&&"up"===e.dataset.jos_scrolldirection||"none"===e.dataset.jos_scrolldirection)&&(e.classList.toggle("jos-no-mirror","false"==e.dataset.jos_mirror),e.classList.add("jos-"+i),null!=n&&e.classList.remove("jos-"+n),void 0!==e.dataset.jos_invoke_out&&window[e.dataset.jos_invoke_out](e)),"false"!=e.dataset.jos_scroll&&null!=e.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==e.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[];this.boxes.forEach((s=>{let o=s.dataset.jos_once,a=s.dataset.jos_animation||this.default_animation,e=s.dataset.jos_animationinverse,i=s.dataset.jos_timingFunction,n=s.dataset.jos_duration,r=s.dataset.jos_delay,l=s.dataset.jos_mirror||this.default_mirror;s.classList.contains("jos_disabled")&&(s.classList.remove("jos_disabled"),s.classList.add("jos")),o&&("true"==o||/^\d+$/.test(o))?s.setAttribute("data-jos_once",o):s.setAttribute("data-jos_once",this.default_once?"1":"false"),s.setAttribute("data-jos_animation",a),e&&s.setAttribute("data-jos_animationinverse",e),i&&s.setAttribute("data-jos_timingFunction",i),"false"==l&&s.setAttribute("data-jos_mirror",l),n&&(s.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),r&&(s.setAttribute("data-jos_delay",r),this.setRange.add(parseFloat(r))),s.setAttribute("data-jos_counter","0"),s.classList.add("jos-"+a),(s.dataset.jos_startvisible||this.default_startVisible)&&t.push(s),this.default_scrolldirection&&s.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let d={rootMargin:[s.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],s.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],s.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],s.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:this.default_threshold,passive:this.default_passive};if(s.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,d);this.observers.push(t),t.observe(document.getElementById(s.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,d);this.observers.push(t),t.observe(s)}})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100),console.log(this.setRange)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let o="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+o+";}");for(const t of this.setRange)s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:o,animationinverse:a,timingFunction:e,threshold:i,startVisible:n,scrollDirection:r,intersectionRatio:l,duration:d,mirror:c,delay:f,debugMode:m,disable:p,scrollProgressDisable:u,rootMargin:j,rootMarginTop:h,rootMarginBottom:_}=t;this.default_once=s||this.default_once,this.default_animation=o||this.default_animation,this.default_animationinverse=a||this.default_animation,this.default_timingFunction=e||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=n||this.default_startVisible,this.default_scrolldirection=r||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=f||this.default_delay,this.debugMode=m||this.debugMode,null!=p&&(this.disable=p),this.scrollProgressDisable=u||this.scrollProgressDisable,this.default_rootMargin=j||`${h||"-10%"} 0% ${_||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const t=new jos;"undefined"!=typeof module&&void 0!==module.exports&&(module.exports=t)})); diff --git a/dist/v0.9/jos.min.css b/dist/v0.9/jos.min.css deleted file mode 100644 index 7748b68..0000000 --- a/dist/v0.9/jos.min.css +++ /dev/null @@ -1 +0,0 @@ -.jos{display:block}.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-fade,.jos-stagger-fade *{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important} \ No newline at end of file diff --git a/dist/v0.9/jos.min.js b/dist/v0.9/jos.min.js deleted file mode 100644 index 9379117..0000000 --- a/dist/v0.9/jos.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var o=s.insertAt;if(t&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&e.firstChild?e.insertBefore(a,e.firstChild):e.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}(".jos{display:block}.jos,.jos-anchor{transition:all .4s ease-in-out}.jos-anchor{opacity:0;transition-timing-function:ease-in-out}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-fade,.jos-stagger-fade *{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}");const t=new class{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.0 (Minified)";static author="Jesvi Jonathan";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){}debugger(t=0){0==t&&this.debugMode&&this.version(),(1==t||0==t)&&this.debugMode}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let o=t[0],e=o.target;document.querySelectorAll("[data-jos_anchor='#"+e.id+"']").forEach((t=>{let e=t.dataset.jos_animation,a=t.dataset.jos_animationinverse;if(o.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}e&&(t.classList.remove("jos-"+e),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=a&&t.classList.add("jos-"+a))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+e),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;const s=this.default_rootMargin;let o=window.innerHeight;const e=t=>{const e=t.dataset.jos_rootmargin||s,a=e.split(" ").map(parseFloat),i=o*a[0]/100,n=o*a[2]/100;t.jos={rootMargin:e,rootMarginValues:a,topMargin:i,bottomMargin:n};const r=t.getBoundingClientRect(),l=r.top-t.jos.topMargin,d=r.bottom-t.jos.bottomMargin,c=r.top/o,u=l/(o-t.jos.topMargin-t.jos.bottomMargin);let f=0;f=u<0?0:u>100?1:u,t.jos={elementRect:r,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:u,scrollProgress:f},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(e)}};callbackRouter=(t,s,o=1)=>{if(this.disable)return;let e=t[0],a=e.target,i=a.dataset.jos_animation,n=a.dataset.jos_animationinverse,r=1;if(r=e.boundingClientRect.top<0?0:1,e.isIntersecting){if("false"!=a.dataset.jos_scroll&&null!=a.dataset.jos_scroll&&(this.scrollEnter.push(a),this.callbackScroller(this.scrollEnter)),null!=a.dataset.jos_counter){let t=parseInt(a.dataset.jos_counter);t++,a.dataset.jos_counter=t}"false"==a.dataset.jos_mirror&&a.classList.remove("jos-no-mirror"),i&&(a.classList.remove("jos-"+i),null!=a.dataset.jos_invoke&&window[a.dataset.jos_invoke](a),null==a.dataset.jos_once&&"false"==a.dataset.jos_once||("true"==a.dataset.jos_once||a.dataset.jos_counter>=a.dataset.jos_once)&&s.unobserve(a)),null!=n&&a.classList.add("jos-"+n)}else(void 0===a.dataset.jos_scrolldirection||1===r&&"down"===a.dataset.jos_scrolldirection||0===r&&"up"===a.dataset.jos_scrolldirection||"none"===a.dataset.jos_scrolldirection)&&(a.classList.toggle("jos-no-mirror","false"==a.dataset.jos_mirror),a.classList.add("jos-"+i),null!=n&&a.classList.remove("jos-"+n),void 0!==a.dataset.jos_invoke_out&&window[a.dataset.jos_invoke_out](a)),"false"!=a.dataset.jos_scroll&&null!=a.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==a.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[];this.boxes.forEach((s=>{let o=s.dataset.jos_once,e=s.dataset.jos_animation||this.default_animation,a=s.dataset.jos_animationinverse,i=s.dataset.jos_timingFunction,n=s.dataset.jos_duration,r=s.dataset.jos_delay,l=s.dataset.jos_mirror||this.default_mirror;s.classList.contains("jos_disabled")&&(s.classList.remove("jos_disabled"),s.classList.add("jos")),o&&("true"==o||/^\d+$/.test(o))?s.setAttribute("data-jos_once",o):s.setAttribute("data-jos_once",this.default_once?"1":"false"),s.setAttribute("data-jos_animation",e),a&&s.setAttribute("data-jos_animationinverse",a),i&&s.setAttribute("data-jos_timingFunction",i),"false"==l&&s.setAttribute("data-jos_mirror",l),n&&(s.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),r&&(s.setAttribute("data-jos_delay",r),this.setRange.add(parseFloat(r))),s.setAttribute("data-jos_counter","0"),s.classList.add("jos-"+e),(s.dataset.jos_startvisible||this.default_startVisible)&&t.push(s),this.default_scrolldirection&&s.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let d={rootMargin:[s.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],s.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],s.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],s.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:this.default_threshold,passive:this.default_passive};if(s.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,d);this.observers.push(t),t.observe(document.getElementById(s.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,d);this.observers.push(t),t.observe(s)}})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let o="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+o+";}");for(const t of this.setRange)s.insertRule(`[data-jos_duration="${t}"] {\n transition-duration: ${t}s !important;\n }`),s.insertRule(`[data-jos_delay="${t}"] {\n transition-delay: ${t}s !important;\n }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:o,animationinverse:e,timingFunction:a,threshold:i,startVisible:n,scrollDirection:r,intersectionRatio:l,duration:d,mirror:c,delay:u,debugMode:f,disable:m,scrollProgressDisable:h,rootMargin:p,rootMarginTop:j,rootMarginBottom:_}=t;this.default_once=s||this.default_once,this.default_animation=o||this.default_animation,this.default_animationinverse=e||this.default_animation,this.default_timingFunction=a||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=n||this.default_startVisible,this.default_scrolldirection=r||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=u||this.default_delay,this.debugMode=f||this.debugMode,null!=m&&(this.disable=m),this.scrollProgressDisable=h||this.scrollProgressDisable,this.default_rootMargin=p||`${j||"-10%"} 0% ${_||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}};"undefined"!=typeof module&&void 0!==module.exports&&(module.exports=t)})); diff --git a/docs/404.html b/docs/404.html deleted file mode 100644 index b435982..0000000 --- a/docs/404.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - -

Redirecting to Main JOS-Animtion website...

-

- If you are not redirected, - click here. -

- - diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index a1b5271..0000000 --- a/docs/index.html +++ /dev/null @@ -1,562 +0,0 @@ - - - - - - JOS : Animation Library | Demo - - - - - - - - - - - - - - - -
- -
-
-

- JOS Demo -

-
- Scroll Down -
-
- Next Demo -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- - - -
-
- -
- -
- -
-
-
- - - -
-
- -
-
- -
JOS | 2023 | By Jesvi Jonathan
- - - - - - - - - - - - - - - - - diff --git a/docs/index2.html b/docs/index2.html deleted file mode 100644 index 6705239..0000000 --- a/docs/index2.html +++ /dev/null @@ -1,678 +0,0 @@ - - - - - - JOS: Animation Library | Demo 2 - - - - - - - - - - - - - - - - - - - -
-

JOS : Javascript On Scroll

-

- (v0.7 - | Debug Mode) -
- Next -

- -
-
- Anchored with element
-
- Fade [Right] -
-
- Takes anchored elements rootmargin properties -
-
-
-
- -
-
-
-
Fade
- -
- 
-  <div
-    class="demo-container jos"    
-    data-jos_animation="fade" >
-  
-      Fade
-  
-  </div>
-
-
-
- -
-
-
Fade [Right]
- -
- 
-  <div
-    class="demo-container jos"    
-    data-jos_animation="fade-right" >
-  
-      Fade [Right]
-  
-  </div>
-
-
-
- - - -
-
-
Fade [Left]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="fade-left" >
-
-    Fade [Left]
-
-</div>
-
-
-
- -
-
-
Fade [Up]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="fade-up" >
-
-    Fade [Up]
-
-</div>
-
-
-
- -
-
-
Fade [Down]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="fade-down" >
-
-    Fade [Down]
-
-</div>
-
-
-
- -
-
-
Zoom
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom" >
-
-    Zoom
-
-</div>
-
-
-
- -
-
-
Zoom Out [Right]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-out-right" >
-
-    Zoom Out [Right]
-
-</div>
-
-
-
- -
-
-
Zoom Out [Left]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-out-left" >
-
-    Zoom Out [Left]
-
-</div>
-
-
-
- -
-
-
Zoom Out [Down]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-out-down" >
-
-    Zoom Out [Down]
-
-</div>
-
-
-
- -
-
-
Zoom Out [Up]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-out-up" >
-
-    Zoom Out [Up]
-
-</div>
-
-
-
- -
-
-
Zoom In
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-in" >
-
-    Zoom In
-
-</div>
-
-
-
- -
-
-
Zoom in [Right]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-in-right" >
-
-    Zoom in [Right]
-
-</div>
-
-
-
- -
-
-
Zoom in [Left]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-in-left" >
-
-    Zoom in [Left]
-
-</div>
-
-
-
- -
-
-
Zoom in [Down]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-in-down" >
-
-    Zoom in [Down]
-
-</div>
-
-
-
- -
-
-
Zoom in [Up]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="zoom-in-up" >
-
-    Zoom in [Up]
-
-</div>
-
-
-
- -
-
-
Flip
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="flip" >
-
-    Flip
-
-</div>
-
-
-
- -
-
-
Flip [Left]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="flip-left" >
-
-    Flip [Left]
-
-</div>
-
-
-
- -
-
-
Flip [Up]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="flip-up" >
-
-    Flip [Up]
-
-</div>
-
-
-
-
-
-
Flip [Down]
- -
- 
-<div
-  class="demo-container jos"    
-  data-jos_animation="flip-down" >
-
-    Flip [Down]
-
-</div>
-
-
-
- -
-
-
Rotate
- -
- 
-<div
-class="demo-container jos"    
-data-jos_animation="rotate" >
-
-  Rotate
-
-</div>
-
-
-
- -
-
-
Rotate [right]
- -
- 
-<div
-class="demo-container jos"    
-data-jos_animation="rotate-right" >
-
-  Rotate
-
-</div>
-
-
-
- -
-
-
Spin
- -
- 
-<div
-class="demo-container jos"    
-data-jos_animation="spin" >
-
-  Spin
-
-</div>
-
-
-
- -
-
-
Spin [right]
- -
- 
-<div
-class="demo-container jos"    
-data-jos_animation="spin-right" >
-
-  Spin [right]
-
-</div>
-
-
-
- -
-
-
Stretch
- -
- 
-<div
-class="demo-container jos"    
-data-jos_animation="stretch" >
-
-Stretch
-
-</div>
-
-
-
- -
-
-
Stretch [vertical]
- -
- 
-<div
-class="demo-container jos"    
-data-jos_animation="stretch-vertical" >
-
-Stretch [vertical]
-
-</div>
-
-
-
-
- -
JOS | 2023 | By Jesvi Jonathan
- - - - - - - - - - - - - - - diff --git a/docs/index3.html b/docs/index3.html deleted file mode 100644 index 654c072..0000000 --- a/docs/index3.html +++ /dev/null @@ -1,25 +0,0 @@ - - - -Particle Demo - - - - -
-

Partciel Demo

-

JOS : animation library

-
-
-Next -
- -
- - - - - - - - \ No newline at end of file diff --git a/docs/indexOld.html b/docs/indexOld.html deleted file mode 100644 index a693a76..0000000 --- a/docs/indexOld.html +++ /dev/null @@ -1,291 +0,0 @@ - - - - JOS : Animation Library | Demo - - - - - - - - - -
- -
-
-

- JOS Demo -

-
- Scroll Down -
-
- Next Demo -
-
-
-
-
- -
-
- -
-
-
- -
- -
-
- -
-
- -
-
- -
JOS | 2023 | By Jesvi Jonathan
- - - - - - - - - - - - - diff --git a/docs/style.css b/docs/style.css deleted file mode 100644 index f9914d2..0000000 --- a/docs/style.css +++ /dev/null @@ -1,216 +0,0 @@ -:root { - --color-bg: #262626; - --color-bg-hover: #2d2d2d; - --color-text: #ffffff; - --color-border: #e0e0e0; -} - -* { - margin: 0; - padding: 0; - top: 0; - left: 0; -} - -html, -body { - overflow-x: hidden; - width: 100vw; -} -body { - background-color: var(--color-bg); - color: var(--color-text); - font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; -} - -h1 { - font-size: 2.3em; - font-weight: 400; - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 50%; - width: 88%; - text-align: center; -} -h3 { - font-size: 1em; - font-weight: 400; - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 65%; - width: 88%; - text-align: center; -} -h3 a { - text-decoration: none; - color: white !important; -} - -section { - min-height: 100vh; -} - -footer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 8vw; - padding: 6vw; -} - -.demo-container { - margin: 8vw; - min-height: 50vh; - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-evenly; - border: 0.1vw solid var(--color-border); - border-radius: 4px; - background: white; - color: black; - transition: 0.2s ease; - font-size: 2em; - font-weight: bold; - align-content: center; - overflow: hidden; -} -/* .demo-container:hover { - background-color: var(--color-bg-hover); - } */ - -.demo-name { - min-width: 20vw; - min-height: 30vw; - display: flex; - align-items: center; - flex-direction: row; - justify-content: center; - border-radius: 4px; - background: white; - color: black; - transition: 0.2s ease-in-out; - font-weight: bold; -} -.demo-text { - margin-left: 10vw; - margin-right: 10vw; - /* border: 2px solid black; */ - width: fit-content; - transition: 0.2s ease-in-out; -} - -.demo-code { - font-size: 0.8em; - background-color: #2d2d2d; - width: min-content; - height: min-content; - font-size: 0.4em; - border-radius: 4px; - transition: 0.2s ease-in-out; - font-size: 0.8em; - cursor: none; - width: 0; - opacity: 0; - display: flex; - width: 0; - flex-direction: column; - align-content: center; - justify-content: center; - align-items: center; -} - -.demo-container:hover .demo-text { - margin-left: 10vw; - width: 25vw; -} -.demo-container:hover .demo-code { - opacity: 1; - width: 33vw; - cursor: text; - margin-left: 10%; - - margin-right: 10%; -} -pre { - color: white; - font-size: 0.9em; - padding: 2em 1em; -} - -@media screen and (max-width: 1000px) { - .demo-container { - flex-direction: column; - margin: 2em; - } - .demo-name { - flex-direction: column; - } - .demo-text { - margin-right: 0vw; - margin-left: 0; - /* font-size: 1.5em; */ - } - .demo-code { - margin-left: 0; - font-size: 0.8em; - height: 0; - - height: 0; - width: fit-content; - } - .demo-container:hover .demo-text { - margin-left: 0vw; - margin-bottom: 1em; - - margin-left: 0vw; - width: fit-content; - } - .demo-container:hover .demo-code { - opacity: 1; - min-height: 25%; - height: 14em; - margin-top: 0; - overflow-y: scroll; - width: auto; - } - .demo-code::-webkit-scrollbar { - width: 0.5em; - } -} - -.fix { - position: fixed; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 100%; - height: 100%; - z-index: 100; -} - -.fix-element { - width: 100px; - height: 100px; - background-color: rgb(41, 41, 41); - font-size: 7px; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - border: 2px solid white; - padding: 1vw; -} - -.fix-ele { - width: 100px; - height: 100px; - border-radius: 50%; - background-color: aqua; -} diff --git a/package.json b/package.json index afdf800..eb58095 100644 --- a/package.json +++ b/package.json @@ -1,36 +1,74 @@ { "name": "jos-animation", - "version": "0.9.2", - "description": "An animation library package to instantly add beautiful/professional looking animation to your website", + "version": "1.0.0-beta.1", + "description": "A lightweight, performant scroll animation library for the web", "author": "Jesvi Jonathan", + "license": "MIT", + "main": "dist/jos.cjs.js", + "module": "dist/jos.esm.js", + "browser": "dist/jos.js", + "unpkg": "dist/jos.min.js", + "jsdelivr": "dist/jos.min.js", + "sideEffects": [ + "dist/jos.full.js", + "dist/jos.full.min.js", + "dist/jos.css", + "dist/jos.min.css" + ], + "exports": { + ".": { + "import": "./dist/jos.esm.js", + "require": "./dist/jos.cjs.js", + "default": "./dist/jos.js" + }, + "./css": "./dist/jos.css", + "./full": "./dist/jos.full.js", + "./dist/*": "./dist/*" + }, "files": [ - "dist/*.{css,js}", - "dev/*.{css,js}" + "dist/", + "LICENSE.md", + "README.md" ], - "main": "dist/jos.js", + "scripts": { + "dev": "rollup -c -w", + "build": "npm run clean && npm run build:js && npm run build:css", + "build:js": "rollup -c", + "build:css": "postcss src/animations/jos.css -o dist/jos.css && postcss src/animations/jos.css -o dist/jos.min.css --env production", + "clean": "rimraf dist", + "prepublishOnly": "npm run build" + }, "repository": { "type": "git", "url": "git+https://github.com/jesvijonathan/JOS-Animation-Library.git" }, "keywords": [ "jos", - "on-scroll", "scroll", "animation", + "on-scroll", "library", - "package", - "jesvi", - "uikit", - "javascript", "lightweight", "performance", - "scroll", - "event", - "css" + "intersection-observer", + "css-animations", + "scroll-animation", + "javascript" ], - "license": "MIT", "bugs": { "url": "https://github.com/jesvijonathan/JOS-Animation-Library/issues" }, - "homepage": "jos-animation.vercel.app" + "homepage": "https://jos-animation.vercel.app", + "devDependencies": { + "@rollup/plugin-commonjs": "^28.0.0", + "@rollup/plugin-node-resolve": "^16.0.0", + "@rollup/plugin-terser": "^0.4.4", + "autoprefixer": "^10.4.20", + "cssnano": "^7.0.0", + "postcss": "^8.4.49", + "postcss-cli": "^11.0.0", + "rimraf": "^6.0.0", + "rollup": "^4.28.0", + "rollup-plugin-postcss": "^4.0.2" + } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..fba1ec9 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,11 @@ +const autoprefixer = require("autoprefixer"); +const cssnano = require("cssnano"); + +module.exports = (ctx) => ({ + plugins: [ + autoprefixer(), + ...(ctx.env === "production" + ? [cssnano({ preset: ["default", { discardComments: { removeAll: true } }] })] + : []), + ], +}); diff --git a/rollup.config.mjs b/rollup.config.mjs new file mode 100644 index 0000000..4d640a4 --- /dev/null +++ b/rollup.config.mjs @@ -0,0 +1,124 @@ +import resolve from "@rollup/plugin-node-resolve"; +import commonjs from "@rollup/plugin-commonjs"; +import terser from "@rollup/plugin-terser"; +import postcss from "rollup-plugin-postcss"; + +const banner = `/*! + * JOS Animation Library v1.0.0-beta.1 + * https://jos-animation.vercel.app + * (c) ${new Date().getFullYear()} Jesvi Jonathan + * Released under the MIT License + */`; + +const terserOpts = { + format: { comments: false }, + compress: { dead_code: true, drop_debugger: true }, + mangle: { keep_classnames: true, reserved: ["JOS"] }, +}; + +const terserMinOpts = { + ...terserOpts, + compress: { ...terserOpts.compress, drop_console: true }, +}; + +export default [ + // UMD (full, unminified) — for