jos-animation 0.8.0

package/dev/jos.js

@@ -0,0 +1,413 @@
+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.4 (Development)";
+  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();

package/dev/scroll.js

@@ -0,0 +1,18 @@
+const updateScrollPercentage = function () {
+  const heightOfWindow = window.innerHeight,
+    contentScrolled = window.pageYOffset,
+    bodyHeight = document.body.offsetHeight,
+    percentage = document.querySelector("[data-scrollPercentage] .percentage");
+  percentageVal = document.querySelector("#percentage-value");
+
+  if (bodyHeight - contentScrolled <= heightOfWindow) {
+    percentageVal.textContent = percentage.style.width = "100%";
+  } else {
+    const total = bodyHeight - heightOfWindow,
+      got = contentScrolled,
+      percent = parseInt((got / total) * 100);
+    percentageVal.textContent = percentage.style.width = percent + "%";
+  }
+};
+
+window.addEventListener("scroll", updateScrollPercentage);

package/dist/jos.css

@@ -0,0 +1 @@
+.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 */