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.

<link id="jos-stylesheet" rel="stylesheet" href="/dist/jos.css">
<script src="/dist/jos.min.js"></script>

<!-- Or From a CDN -->
<link
  id="jos-stylesheet"
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css"
  crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.min.js"></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
• 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="fade"
  data-jos-once="false"
  data-jos_duration="0.8"
  data-jos_delay="0"
  data-jos_timing-function="ease-in-out"
  data-jos_invoke="myCustomFunction"
  data-jos_invoke_out="myCustomFunction_onExit"
></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,
  // 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 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.restart();

Changelog:

v0.7 (05/13/2023)

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