JOS v0.9.2 Update, check out the changes

- Added random function rand() - Added more animation - New & better optimized debugger - Fixed global prop (animationInverse, delay, etc) - Induvidual threshold & passive mode support - Patched under the hood bugs - Updated doc, gitignore
jesvijonathan · Nov 10, 2023 · cfc2b58 · cfc2b58
1 parent 77cd5f7
commit cfc2b58
Show file tree

Hide file tree

Showing 22 changed files with 1,448 additions and 1,143 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ tmp_tk_rough_implements
 dd.js
 scripts
 # rollup 
+dev/index2.html
 bundler/index.html
 bundler/export/* 
 bundler/original/* 

diff --git a/README.md b/README.md
@@ -116,14 +116,16 @@ Badges
 </summary>
 <center>
 
-<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=ziR95EKKttc"><img src="https://img.youtube.com/vi/ziR95EKKttc/0.jpg" alt="JOS-Animation v0.6" style="max-width: 100%;"></a>
-JOS V0.6 Cubes <i>(Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))</i> 
+- <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=ziR95EKKttc"><img src="https://img.youtube.com/vi/ziR95EKKttc/0.jpg" alt="JOS-Animation v0.6" style="max-width: 100%;"></a> JOS V0.6 Cubes <i>(Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))</i>
+<br>
+- <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=_hlvc5oq9Fw"><img src="https://img.youtube.com/vi/_hlvc5oq9Fw/0.jpg" alt="JOS-Animation v0.8" style="max-width: 100%;"></a>JOS V0.8.8 <i>(Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))</i>
+
 </center>
 </details>
 
 <br>
 
-<code> <i>JOS</i> </code> <code> <i>v0.9.1</i> </code> <code><i> 5 Nov 2023</i></code> <code> <i>Jesvi Jonathan</i> </code>
+<code> <i>JOS</i> </code> <code> <i>v0.9.2</i> </code> <code><i> 11 Nov 2023</i></code> <code> <i>Jesvi Jonathan</i> </code>
 
 <br>
 
@@ -134,7 +136,7 @@ JOS V0.6 Cubes <i>(Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan
 
 ### Installation
 
-1. Add the <code>[\<link>](https://github.com/jesvijonathan/Jesvi-Bot/releases)</code> inside the <code>\<head></code> tag :
+0. Add the <code>[\<link>](https://github.com/jesvijonathan/Jesvi-Bot/releases)</code> inside the <code>\<head></code> tag :
    (this step is not required from <code>v0.9</code> onwards)
 
 <!-- https://unpkg.com/jos-animation@latest/dist/jos.js -->
@@ -295,6 +297,8 @@ JOS.init();
   data-jos_rootMargin_bottom="-50%"
   data-jos_scrollDirection="down"
   data-jos_startVisible="false"
+  data-jos_threshold="0.4"
+  data-jos_passive="false"
   data-jos_invoke="myCustomFunction"
   data-jos_invoke_out="myCustomFunction_onExit"
   data-jos_scroll="your_callbackFunction"
@@ -342,6 +346,8 @@ Example : [Custom Animation]()
 
 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 <code>data-jos_animation</code> ("none", "static", no-transition, etc) & <code>data-jos_animationInverse</code> attributes to create a custom animation.
+
 Example : [Custom Inverse Animation]()
 
 ## Playable Animation
@@ -517,7 +523,7 @@ Example : [Custom Function](https://github.com/jesvijonathan/JOS-Animation-Libra
 
 ```html
 <div
-  class="jos"
+  class="jos parent_elem"
   id="stagger"
   data-jos_stagger="spin"
   data-jos_staggerinverse="none"
@@ -539,11 +545,11 @@ Example : [Custom Function](https://github.com/jesvijonathan/JOS-Animation-Libra
   <!-- data-jos_stagger_anchor="true" # auto sets parent element's id & uses it as a anchor's -->
 
   <!-- Element 1  -->
-  <div class="elem"></div>
+  <div class="child_elem"></div>
   <!-- Element 2  -->
-  <div class="elem"></div>
+  <div class="child_elem"></div>
   <!-- Element 3  -->
-  <div class="elem"></div>
+  <div class="child_elem"></div>
   <!-- Element n  -->
 </div>
 ```

diff --git a/dev/index.html b/dev/index.html
@@ -39,7 +39,7 @@
     <center
       class="jos"
       data-jos_animation="fade-up"
-      title="JOS : Animation Library (v0.9.1)"
+      title="JOS : Animation Library (v0.9.2)"
       data-jos_duration="1"
     >
       <h1
@@ -192,6 +192,7 @@
         data-jos_scrollDirection="up"
         title="Animation : fade-up | Scroll-Directiom : up | Start-Visible : 1000ms"
       ></div>
+
       <div
         class="box jos debug2"
         data-jos_animation="fade-right"

diff --git a/dev/jos.css b/dev/jos.css
@@ -1,5 +1,5 @@
 /*
-JOS v0.9.1 By Jesvi Jonathan
+JOS v0.9.2 By Jesvi Jonathan
 */
 
 /* jos default */

diff --git a/dev/jos.js b/dev/jos.js
@@ -21,7 +21,7 @@ class jos {
   scrollProgressDisable = undefined;
   disable = false;
 
-  static version = "0.9.1 (Development)";
+  static version = "0.9.2 (Development)";
   static author = "Jesvi Jonathan";
   static webpage = "https://jos-animation.vercel.app";
   static github = "https://github.com/jesvijonathan/JOS-Animation-Library";
@@ -43,26 +43,18 @@ class jos {
   }
   //debugger = () => null;
   debugger(type = 0) {
-    if (type == 0 && this.debugMode) {
+    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");
+
+      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");
     }
   }
 
@@ -119,6 +111,16 @@ class jos {
     });
   };
 
+  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%";
@@ -264,16 +266,18 @@ class jos {
 
   animationInit() {
     let doit = [];
-    const set = new Set();
 
     let recursive_check = (box) => {
-      let object_default_once = box.dataset.jos_once;
+      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;
-      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_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");
@@ -295,7 +299,7 @@ class jos {
         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);
         }
@@ -315,7 +319,7 @@ class jos {
               box.dataset.jos_stagger_duration || defaultDuration;
             const stagger_once = box.dataset.jos_stagger_once || defaultOnce;
             const staggerinverse =
-              box.dataset.jos_staggerinverse || defaultMirror;
+              box.dataset.jos_staggerinverse || defaultAnimationinverse;
             const stagger_mirror =
               box.dataset.jos_stagger_mirror || defaultMirror;
             const stagger_visible = box.dataset.jos_stagger_startVisible;
@@ -467,8 +471,8 @@ class jos {
 
       let box_observer = {
         rootMargin,
-        threshold: this.default_threshold,
-        passive: this.default_passive,
+        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(
@@ -504,7 +508,6 @@ class jos {
         }, box_time || this.default_startVisible);
       });
     }, 100);
-    // console.log(this.setRange);
   }
 
   animationUnset(state = 0) {
@@ -590,7 +593,8 @@ class jos {
     } = options;
     this.default_once = once || this.default_once;
     this.default_animation = animation || this.default_animation;
-    this.default_animationinverse = animationinverse || 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;