JOS : Animation Library (v0.8.8)

[jesvijonathan]

Change Log

Description -

This version of JOS is a rewrite, with the previous version as the base. Which maked it more optimized with tons of new features. Lots of improvements & bug fixes have been made to the code including modularization. I've made changes to the heart of the library. Like with every JOS update, we aim for better perfomance & useful features. :)

[v0.8.8] - 18/07/2023 -

• Fixed RootMargin calc bug (10% 10% 10% 10% would now be interpreted as 10% 10% -10% -10% automatically).

• Added jos-no-transition class to disable transition (must be added to class list).

• jos class now sets transition property only for required css properties (opacity, transform).

  • You have to manually set transition property for custom animation classes, this is to ensure that jos transition property does not interfere with other transition properties for the element.

• jos-animation now can be npm installed as a separate package.

  • jos-animation is now a separate package, which can be installed using npm i jos-animation.
  • still needs work to be done on the npm auto import, but it is functional.

• jos class now has lower priority over other user defined classes. (to ensure user can define their own classes without interference from jos)

  • due use !important to overide
  • define transition property specifically, exmaple : transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

• Added new scrollCallback feature to get scroll progress.

  • scrollCallback is a function that is called on every scroll event.

  • returns element.jos as a parameter which contains all the jos data including scrollProgress.

  • an html element id is mandatory for this feature to work. So ensure that you have an id set for the element.

    • element.jos.windowScroll (gets scroll progress with respect to the entire window)
    • element.jos.rootScroll (gets scroll progress with respect to the root (rootMargin) of the element)
    • element.jos.scroll (same as rootScroll but values within 0 - 1)

    Exmaple -

    <!-- Scroller observer exmaple elements -->
    <div id="elem1" class="jos" data-jos_scroll="your_callbackFunction">
      Elemen 1
    </div>
    <div id="elem2" class="jos" data-jos_scroll="your_callbackFunction_2">
      Elemnt 2
    </div>
    <div id="elem3" class="jos" data-jos_scroll="your_callbackFunction_3">
      Elemnt 3
    </div>

    your_callbackFunction = (element) => {
      console.log(element.id, element.jos.scrollProgress);
      element.style.opacity = element.jos.scrollProgress;
    };
    
    your_callbackFunction_2 = (element) => {
      let percent = element.jos.windowScroll * 100 + "%";
      console.log(element.id, percent);
      element.style.width = percent;
    };
    
    your_callbackFunction_3 = (element) => {
      let deg = element.jos.rootScroll * 360 + "deg";
      console.log(element.id, deg);
      element.style.transform = deg;
    };

    Note -

    • scrollCallback is called on every scroll event, so it is recommended to use it only if required for better performance. (It is still better than other scroll event listeners as it uses IntersectionObserver API)

    • Scroll callback functions are called only if the element is in the viewport.

    • Custom Functions from demo/above example ( such as scrollWidth(), scrollOpacity(), scrollRotate(), etc) are not available with the package & are to be implemented by the user.

      • This is to ensure full customizability. (refer to the demo/example for implementation)

    • This feature leverages greater customizability & performance for the developer to implement complex animations without having to include other heavy resources.

many more that I can't remember, check em out... Full Changelog

Had to nuke recently releases v0.8.7, patched it up and released it as v0.8.8

---

This discussion was created from the release JOS : Animation Library (v0.8.8).