Easy & High Performance Animate On Scroll Library – JOS

Preview:

Description:

JOS is an open-source, easy-to-use, blazing-fast Animate On Scroll library for adding scroll animation effects to elements when they appear in the viewport.

It includes preset animations like fade, slide, zoom, and flip as well as options for building custom scroll effects. The library also allows you to build your own scroll-invoked functions for a truly personalized experience.

How to use it:

1. Add the JOS’ JavaScript and Stylesheet in the document.

<script src="/dist/jos.min.js"></script>

<!-- Or From a CDN -->
<script src="https://unpkg.com/[email protected]"></script>

2. Initialize the JOS with default options.

JOS.init();

3. Add the "jos" CSS class to the target element and specify the animation type using the data-jos_animation attribute. All available animation types:

• fade
• slide
• zoom
• flip
• fade-right
• fade-left
• fade-up
• fade-down
• zoom-in-right
• zoom-in-left
• zoom-in-up
• zoom-in-down
• zoom-out-right
• zoom-out-left
• zoom-out-up
• zoom-out-down
• flip-right
• flip-left
• flip-up
• flip-down
• rotate
• rotate-right
• spin
• spin-right
• revolve
• revolve-right
• stretch
• stretch-vertical
• my-custom-animation-function

<div class="jos" data-jos_animation="fade">
  Fade Animation On Scroll
</div>

4. All available HTML data attribute to config the scroll animation.

<div
  class="jos"
  data-jos_animation="zoom"
  data-jos_once="true"
  data-jos_duration="0.5"
  data-jos_delay="0.2"
  data-jos_timing-function="ease-in-out"
  data-jos_rootMargin="0% 0% -50% 0%"
  data-jos_rootMargin_top="-10%"
  data-jos_rootMargin_bottom="-50%"
  data-jos_scrollDirection="down"
  data-jos_startVisible="true"
  data-jos_invoke="myCustomFunction"
  data-jos_invoke_out="myCustomFunction_onExit"
  data-jos_anchor="#elementID"
  data-jos_scroll="myScrollCallbackFunction"
></div>

5. You can also pass the options through JavaScript during init.

JOS.init({
  // Disable JOS gloabaly
  debugMode: false, 
  // Set the passive option for the scroll event listener
  passive: false,
  // Disable JOS after first animation
  once: false, 
  // Animation type
  animation: "fade", 
  // Timing function
  // 'ease', 'ease-in', 'ease-out', 'ease-in-out'
  // 'linear', 'step-start', 'step-end', 'steps()'
  // 'cubic-bezier()', 'my-custom-timing-function'
  timingFunction: "ease-in-out", 
  // The threshold for the element to be visible
  // 0-1
  threshold: 0, // Set gloabal  | Values :  0-1
  // The delay for the animation to start
  // 0,1,2,3,4,5
  delay: 0, 
  // The duration for the animation playback
  // float : 0-1 & int : 0,1,2,3,4,5
  duration: 0.8,
  rootMargin: "0% 0% -50% 0%",
  // Set by which percent the element should animate out
  // Recommended value between 10% to -30%
  rootMargin_top: "0%", 
  // Set by which percent the element should animate out
  // Recommended value between -10% to -60%
  rootMargin_bottom: "-50%", 
  // Set the root margin for the element to be visible 
  // Values :  _% _% _% _%  (automaticaly set)
  rootMargin: "0% 0% -50% 0%", 
  // Set the intersection ratio between which the element should be visible
  //  0-1 (automaticaly set)
  intersectionRatio: 0.4, 
  //  set whether the element should animate when the page is loaded 
  //  true, false, or pixels
  startVisible: false,
  // 'up', 'down', 'none'
  scrollDirection: 'down',
  // Set whether elements should animate out while scrolling past them
  animate_out: false,
  // Set global the debounce time/rate for listening to scroll events
  // 0-1000
  debounce: 0,
});

6. API methods.

JOS.init();
JOS.start();
JOS.stop();
JOS.destroy();
JOS.refresh();

Changelog:

v0.9.1 (11/05/2023)

• Bugfixes

v0.9.0 (10/28/2023)

• No need to add stylesheet jos.css from v0.9 onwards, it will be exported along with the script.
• New bundler for bundling & packaging the library.
• Improved import/exports.
• Fixed issue where jos could not find jos.css that occurs due to network issue.
• Included playable animation in jos.css/jos.js & added new jos.min.css for a minified version where you can develop fully custom animation and features.
• Slight performance bump

v0.8.8 (07/19/2023)

• Fixed RootMargin calc bug (10% 10% 10% 10% would now be interpreted as 10% 10% -10% -10% automatically).
• Patched jos class forcing display:block;.
• Added jos-no-transition class to disable transition (must be added to class list).
• jos-animation now can be npm installed as a separate package.
• jos class now has lower priority over other user defined classes. (to ensure user can define their own classes without interference from jos)
• Added new scrollCallback feature to get scroll progress.

v0.8.1 (07/07/2023)

• Fixed Global Params (once, rootmargin, etc)
• Scroll-Direction based animation support (data-jos_scrollDirection)
• Induvidual rootMargin & observer properties support
• New debugger function which is easier to maintain during releases, (Old implementation of debugger was cool but was cost heavy)
• Fixed & added framework support, make use of refresh() property to force update JOS instance after a DOM change
• StartVisible parameter support
• Support for playable animation using simple css classes
• animationInverse attribute added
• Fixed JOS class clash with induvidual element classes
• static jos class added
• Reworked scroll logic, more optimized
• Updated JOS methods with newer features (init(), start(), stop(), refresh(), destroy()) & (removed restart(), use init() instead).
• Reworked on JOS state management & callback functions, which have been improved
• Added refresh() method to refresh the observer during DOM changes (useful in SPA) & track explicit changes.
• More new animations added
• Delay attribute unfunctional bug fixed
• Used better semantics & Prettified code
• Asorted bug fixes & improvements
• All previous cdn releases of JOS dist are now available in dist/, you can use a specific version forever in your project, even if discontinued ;).
• Modularized code which makes it easier to maintain & is more optimized

06/28/2023

• added dist version & individual rootmargin

v0.7 (05/13/2023)

• Implemented Anchor Mechanism for animations
• Added more animation (spin, revlolve, rotate, stretch, etc)
• Better delivery and performance