Skip to content

Home

Jump to bottom
Jesvi Jonathan edited this page May 14, 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.

JOS v0.7 12 May 2023 Jesvi Jonathan


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 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.

  • jos.js for basic.
  • jos.min.js for production use.
  • jos.debug.js for debugging along with some other function
    • make sure to enable verbose in debug level settings under the console tab in your browser's developer tools.

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, spin, revolve, stretch, "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)
  });
</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"
  data-jos_anchor="#elementID"
></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

Anchors to trigger animation

  1. Create an element that you want to use as an anchor & add an id to it :
<!-- My reference anchor element -->
<div id="myElement"></div>
  1. Create an element that you want to animate & add the data-jos_anchor attribute to it, with the id starting with suffix # :
<!-- My animated element -->
<div class="jos" data-jos_anchor="#myElement"></div>

This triggers the animation when the myElement element is scrolled into view.
This feature is useful especially when you want to animate an element which is in a fixed position.

Example : Anchor

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, rotate, rotate-right, spin, spin-right, revolve, revolve-right, stretch, stretch-vertical, 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 & int false Set whether the element should animate only (boolean : true, false) & (int : 0-infinity)

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. (browser rule to require it that way.. )
  • .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.
  • referencing multiple element to a single anchor causes incorrect view count (not a big deal).

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