Skip to content

Home

Jump to bottom
Jesvi Jonathan edited this page Apr 23, 2023 · 8 revisions

JOS Logo

JOS : Animation Library

A simple & easy to use animation library for web developers

Git Pages

View Demo · Report Bug · Request Feature

About This Project

JOS is a simple & easy to use animation library package to instantly add professional animation to your website. It was built to make my life easier while developing websites & comes with tons of features and is fully customizable. It is lightweight & has a very small footprint. The best part of all is that it has no (*minimum) toll on performance.

  • Open source, no download or install, just add a script tag (Embed).
  • Includes Preset and expert custom animation options.
  • Works with all major browsers & frameworks.
  • Fast, light and small with no/min toll on performance.
  • Simple & easy to setup for both beginners & experts.
  • Customize animation settings and build your own scroll invoked functions
  • And lots more stuff... explore it yourself.

This project is currently being developed by me & the dev community, So you can expect more features and updates quite often..

Was inpired by GSAP, AOS libraries. I wanted something easier to use, with great performance and wanted to make the implementation better. So I worked on this project from scratch.

Feel free to report an issue or request a feature in this repository :) & for more information, Check out the JOS Webpage.

Built With

Installation

  1. Add the <link> inside the <head> tag :
<link
  id="jos-stylesheet"
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css"
  crossorigin="anonymous"
/>
  1. Add the <script> right after the <body> tag :
<script
  defer
  src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.min.js"
></script>

You can add minified version of the script by replacing jos.js with jos.min.js in the above script tag. Use defer attribute in script tag to make sure the script is loaded after the DOM is loaded.

  • jos.js for basic.
  • jos.min.js for production use.
  • jos.debug.js for prettier debugging along with some other function.
  • jos.debug.min.js for debugging along in minified version.

Setup :

  1. Use JOS.init(); to initialize the library with default settings.
<!-- Initialize JOS with default settings -->
<script>
  JOS.init();
</script>
  1. (Or) Use JOS.init({<options>}); to overide the default settings with your custom settings.
<!-- Global Parameters -->
<script>
  JOS.init({
    // disable: false, // Disable JOS gloabaly | Values :  'true', 'false'
    debugMode: true, // Enable JOS debug mode | Values :  'true', 'false'
    passive: false, // Set the passive option for the scroll event listener | Values :  'true', 'false'

    once: false, // Disable JOS after first animation | Values :  'true', 'false'
    animation: "fade", // JOS global animation type | Values :  '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, "my-custom-animation"
    timingFunction: "ease-in-out", // JOS global timing function | Values :  'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps()', 'cubic-bezier()', 'my-custom-timing-function'
    threshold: 0, // Set gloabal the threshold for the element to be visible | Values :  0-1
    delay: 0, // Set global the delay for the animation to start | Values :  0,1,2,3,4,5
    duration: 0.7, // Set global the duration for the animation playback | Values :  flota : 0-1 & int : 0,1,2,3,4,5

    // rootMargin_top: "0%", // Set by which percent the element should animate out (Recommended value between 10% to -30%)
    // rootMargin_bottom: "-50%", // Set by which percent the element should animate out (Recommended value between -10% to -60%)
    // rootMargin: "0% 0% -50% 0%", // Set the root margin for the element to be visible | Values :  _% _% _% _%  (automaticaly set)
    // intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values :  0-1 (automaticaly set)
    // rootMargin: jos_rootMargin_top + " 0% " + jos_rootMargin_bottom + " 0%"; // Set the root margin for the element to be visible | Values :  _% _% _% _%  (automaticaly set)

    // animate_out: false, // Set whether elements should animate out while scrolling past them | Values :  'true', 'false'
    // debounce: 0, // Set global the debounce time/rate for listening to scroll events | Values :  0-1000
  });
</script>
  1. Set class="jos" to the element you want to animate :
<!-- JOS class is required to animate the element -->
<div class="jos"></div>
  1. Set data-jos *attributes to customize the element you want to animate,
    (although these attributes are optional and will work without them) :
<!-- JOS attributes are optional and will work without them (class="jos" is mandatory). these attributes can be used to customize the animation of the element -->
<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_invoke="myCustomFunction"
  data-jos_invoke_out="myCustomFunction_onExit"
></div>

See JOS Props for full information regarding the animation, attributes, and options.

Custom Animation

  1. Create a custom animation by adding the following code to your stylesheet :
/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/
.jos-my-custom-animation {
  /* Set the initial state of the element */
}
  1. Use your cutom animation by setting the data-jos_animation attribute to my-custom-animation :
<div class="jos" data-jos_animation="my-custom-animation"></div>

Example : Custom Animation

Custom Timing Function

  1. Create a custom timing function by adding the following code to your stylesheet :
/* Custom timing function attribute name starts with 'data-jos_timing_function' keyword & a custom name of your choice */
[data-jos_timing_function="myCustom-timingFunc"] {
  /* Set the timing of the element */
  transition-timing-function: cubic-bezier(0.2, 0.5, 0.2, 0.5) !important;
}
  1. Use your cutom timing function by setting the data-jos_timing-function attribute to my-custom-timing-function :
<div class="jos" data-jos_timing-function="myCustom-timingFunc"></div>

Example : Custom Timing Function

Create Custom Function

  1. Create a custom function by adding the following code to your script :
// Create a custom function
function myCustomFunction() {
  // Do something
}
  1. Use your cutom function by setting the data-jos_invoke attribute to myCustomFunction :
<div class="jos" data-jos_invoke="myCustomFunction"></div>

This triggers the myCustomFunction() function when the element is scrolled into view.

You can use data-jos_invoke_out attribute to trigger the function when the element is scrolled out of view.

Example : Custom Function

JOS Attributes

Attribute Type Default Description values
data-jos_animation string fade Set the animation type for the element. 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, my-custom-animation
data-jos_once boolean false Set whether the element should animate only once. true, false
data-jos_delay int 0 Set the delay for the animation to start. (float : 0-1) & (int : 0,1,2,3,4,5)
data-jos_duration float 0.4 Set the duration for the animation playback. (float : 0-1) & (int : 0,1,2,3,4,5)
data-jos_timing-function string ease Set the timing function for the animation playback. ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps(1, start), steps(1, end), cubic-bezier(0.1, 0.7, 1.0, 0.1), my-custom-timingFunc
data-jos_invoke string null Set the function to be invoked when the element is scrolled into view. function, myCustomFunction
data-jos_invoke_out string null Set the function to be invoked when the element is scrolled out of view. function, myCustomFunction
data-once boolean false Set whether the element should animate only once. true, false

Bugs and Issues

  • JOS Methods do not work as of now. (fixed in v0.3 upstream)
  • attribute names are not consistent.
  • .attribute delay is not working as of now.. (added in v0.5)
  • init method is not working as of now. (need to be set manually as var in html inline script) (added in v0.5)
  • bebounce is not working as of now.
  • requires both js & css cdn links for JOS v0.5 & below.
  • .JOS disable attribute is not working as of now.. (fixed in v0.3 upstream)
  • should move from function workaround to class based approach (added in v0.5)
  • Need to add minified and other versions of JOS package (updated in v0.6)
  • bug where the element is not animating when the page is loaded and the element is already in view.

Contributing

  • Fork it from main branch
  • Add your useful feature or fix a bug
  • Create a pull request

License

Used In

Why use JOS ?

  • Performance, JOS has a implementation, different from others.
  • Easy to use, you can use it in your projects with very minimal effort.
  • JOS is lightweight
  • Customizable with own attributes and animation.
  • Open sourced and free to use

Credits

This project was solely developed by Jesvi Jonathan

Clone this wiki locally