JOS

Empty
This is a work of Art, An In-house library, Ready to power your next application âš¡
Features
Lightweight
  • Very lightweight, the library is <2kb.
  • It does not require plugin addons to gain features.
  • Performance oriented & optimized.
Customizability
  • You can build really complex animations and sequences.
  • Fully customizable to its core
  • The only limit is your imagination.
Easy to use
  • Very easy & straight forward to use.
  • Works with HTML/JS, React, Vue, Angular & other frameworks.
  • Get started in less than 5 minutes.
Open Source
  • This project is open source
  • The library is free to use
  • Anyone can contribute to the development.
Test Demonstration
Test Demonstration
Test Demonstration
Test Demonstration
Test Demonstration
Test it in Playground
Test it in Playground
Test it in Playground

Get started in few steps
1. Install JOS
JOS can be installed using npm, embeds, tags, etc. In this setup we will go with the most basic approach to get JOS up and running

Add the link inside the head tag :
  
    <link id="jos-stylesheet" rel="stylesheet" href="https://unpkg.com/jos-animation/dist/jos.css" crossorigin="anonymous" />
  
Add the script right after the body tag :
  
    <script src="https://unpkg.com/jos-animation/dist/jos.min.js"></script>
  
                


(Or) You can   npm install jos   in your project   (check framework support)  :
  
    npm i jos-animation
  
                
& import it in your project
  
    import JOS from "jos-animation";
  
                
2. Setup
Now that we have installed JOS, we need to initialize it to start using it.
There are two ways to initialize JOS

Use JOS.init(); to initialize the library with default settings.
  
    <script> JOS.init(); </script>
  
                


(Or) Use JOS.init(options); to overide the default settings with your custom settings.
  
    <script> JOS.init({ disable:false, debugMode:true, passive:true, once:false, animation:"grow", animationInverse:"fade", timingFunction:"ease-in-out", mirror:true, threshold:0, delay:0, duration:.5, startVisible:"false", scrollDirection:"none", scrollProgressDisable:false, intersectionRatio:0, rootMargin_top:"0%", rootMargin_bottom:"-50%", rootMargin:"0% 0% -50% 0%"}); </script>
  
                
3. Animate elements
We now animate elements by adding the class="jos" to the element

Set class="jos" to the element you want to animate :
  
    <div class="jos"></div>
  
                


(Or) Set data-jos *attributes to customize the element you want to animate, (although these attributes are optional and will work without them) :
  
    <div class="jos" data-jos_animation="zoom" data-jos_animationInverse="none" data-jos_once="false" data-jos_duration="0.4" data-jos_delay="0" data-jos_timing-function="ease-in-out" data-jos_mirror="true" data-jos_rootMargin="0% 0% -50% 0%" data-jos_rootMargin_top="-10%" data-jos_rootMargin_bottom="-50%" data-jos_scrollDirection="none" data-jos_startVisible="false" data-jos_invoke="myCustomFunction" data-jos_invoke_out="myCustomFunction_onExit" data-jos_scroll="your_scroll_function" data-jos_anchor="#elementID"></div>
  
                
Test it in Playground
Test it in Playground
Test it in Playground
Test it in Playground
Test it in Playground
Test it in Playground
Test it in Playground
Test it in Playground