Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jesvijonathan/jos-animation-library
A fullblown in-house animation library that can add instant scroll animation to all elements in your website, making it look beautiful & professional. Comes with tons of customization options but is still easy to use, all in a small footprint
https://github.com/jesvijonathan/jos-animation-library
animation collaborate css design front-end-development javascript javascript-library javascript-on-scroll jesvi jos learn library onscroll package scroll scroll-animations uikit website
Last synced: about 8 hours ago
JSON representation
A fullblown in-house animation library that can add instant scroll animation to all elements in your website, making it look beautiful & professional. Comes with tons of customization options but is still easy to use, all in a small footprint
- Host: GitHub
- URL: https://github.com/jesvijonathan/jos-animation-library
- Owner: jesvijonathan
- License: mit
- Created: 2023-04-07T16:36:57.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-24T09:37:04.000Z (about 10 hours ago)
- Last Synced: 2025-01-24T10:27:39.453Z (about 9 hours ago)
- Topics: animation, collaborate, css, design, front-end-development, javascript, javascript-library, javascript-on-scroll, jesvi, jos, learn, library, onscroll, package, scroll, scroll-animations, uikit, website
- Language: JavaScript
- Homepage: https://jos-animation.vercel.app
- Size: 20 MB
- Stars: 57
- Watchers: 1
- Forks: 8
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
JOS : Animation Library
A simple & easy to use animation library for web developers
Git Pages
·
Playground Demo
·
Report Bug
·
Request Feature
## About This Project
JOS-Animation, Javascript On Scroll Animation library 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 tiring setup, just add a script tag (Embed).
- Includes Preset and expert custom animation options.
- Works with all major browsers & Platforms.
- 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
- [npm](https://www.npmjs.com/package/jos-animation) & [CDNjs](https://cdnjs.com/libraries/jos-animation) approved library for the fastest deliveries
- 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 inspired 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](https://jos-animation.vercel.app).
Badges
```html
```
Video Tutorial
- 
JOS V0.6 Cubes (Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))
- 
JOS V0.8.8 (Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))
JOS v0.9.2 11 Nov 2023 Jesvi Jonathan
### Built With
- [JavaScript](https://www.w3schools.com/js/)
- [CSS](https://www.w3schools.com/css/)
## Installing JOS
### Embedding JOS
You have the option to use the latest version of JOS from a variety of sources :
##### [CDNJS](https://cdnjs.com/libraries/jos-animation)
```html
```
##### (or) [JSDELIVR](https://cdnjs.com/libraries/jos-animation)
```html
```
Click here to check out other Sources / CDNs
- #### [JSDELIVR](https://www.jsdelivr.com/package/npm/jos-animation)
```html
```
(or)
```html
```
(or)
```html
```
- #### [UNPKG](https://unpkg.com/jos-animation/)
```html
```
(or)
```html
```
- #### [Github](https://raw.githubusercontent.com/jesvijonathan/JOS-Animation-Library/master/dist/jos.js)
```html
```
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 From v0.9 onwards, by default jos.js does not
require you to add the stylesheet jos.css, it will be exported
along with the script. But you can still add the stylesheet if you want to for
some reason. ### Importing JOS 1. Install JOS using npm (yarn or pnpm) : ```bash
npm install jos-animation
#### Version Tags
- Latest : jos-animation@latest
- Stable : [email protected]
- Beta : [email protected]
So it would be https://unpkg.com/jos-animation/@latest/dist/jos.js (embed) for the latest version. or jos-animation/@0.8.8/dist/jos.js (npm install) for a specific version.
## Importing JOS
1. Install JOS using npm (yarn or pnpm) :
```bash
npm install jos-animation
```
2. Import JOS in your project :
```js
// import "jos-animation/dist/jos.css";
// Above is required only for v0.8.8 & below (or) if you want to overide jos by using style from the stylesheet
import JOS from "jos-animation";
// Other ways to import JOS
// import JOS from "jos-animation/dist/jos.js";
// import JOS from "jos-animation/dist/jos.min.js";
// import JOS from "jos-animation/dist/jos.debug.js";
```
### Frameworks
Vue / Nuxt.js
```js
// main.js
import { createApp } from "vue";
import { watch, nextTick } from "vue";
import JOS from "jos-animation"; // jos-animation/dist/jos.debug.js
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");
JOS.init();
//JOS.version();
watch(
() => router.currentRoute.value,
() => {
nextTick(() => {
JOS.refresh();
});
}
);
// To observe elements after a route change
```
Used in : [https://jos-animation.vercel.app/](https://github.com/jesvijonathan/JOS-Animation-Playground/blob/main/src/main.js)
This above example for Vue.js is also applicable for Nuxt.js
React
```js
// index.js
import JOS from "jos-animation/dist/jos.js";
onload = () => {
const options = {
debugMode: true,
animation: "flip",
duration: 0.7,
rootMargin: "0% 0% 0% 0%",
};
JOS.init(options);
//JOS.version();
};
function Main() {
useEffect(() => {
JOS.refresh();
}, []);
// To observe elements after a route change
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
```
Used in : [https://azzle.netlify.app](https://azzle.netlify.app/)
This above example is for React.js is also applicable for Next.js & Preact.js
Next.js
```js
// app/layout.tsx
import jos from "jos-animation/dist/jos.js";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const jos_options = {
debugMode: false,
passive: true,
animation: "fade",
duration: 0.4,
rootMargin: "20% 0% 30% 0%",
};
useEffect(() => {
jos.init(jos_options);
}, []); // Once
useEffect(() => {
jos.refresh();
}); // For every update
return ();
}
// To observe elements after a route change
```
Used in : [https://bitspace-nextjs-jos.vercel.app](https://github.com/jesvijonathan/bitspace-org-in/blob/master/src/app/layout.tsx)
Angular
```js
import { Component, OnInit, AfterViewChecked } from '@angular/core';
import JOS from 'jos-animation';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewChecked {
ngOnInit(): void {
JOS.init(); // Once
}
ngAfterViewChecked(): void {
JOS.refresh(); // For every update
}
// ... rest of your code
}
```
You can check this discussion thread for more information : [JOS for Angular](https://github.com/jesvijonathan/JOS-Animation-Library/issues/41#issuecomment-1914803098)
## Setup
1. Use JOS.init(); to initialize the library with default settings.
```html
JOS.init();
```
2. (Or) Use JOS.init(options); to overide the default settings with your custom settings.
```html
JOS.init({
// disable: false, // Disable JOS globally | 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' || Int : 0-1000
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"
// animationInverse: "static", // Set the animation type for the element when it is scrolled out of view | 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'
//mirror : false, // Set whether the element should animate back when scrolled out of view | Values : 'true', 'false'
threshold: 0, // Set global 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
// startVisible: "true", // Set whether the element should animate when the page is loaded | Values : 'true', 'false' || MS : 0-10000
// scrollDirection: "down", // Set the scroll direction for the element to be visible | Values : 'up', 'down', 'none'
//scrollProgressDisable: true // disable or enable scroll callback function | Values : 'true', 'false'
// intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values : 0-1 (automatically set)
// 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 : _% _% _% _% (automatically set)
});
```
3. Set class="jos" to the element you want to animate :
```html
```
4. Set data-jos \*attributes to customize the element you want to animate,
(although these attributes are optional and will work without them) :
```html
```
See [JOS Props](#jos-attributes) for full information regarding the animation, attributes, and options.
## Custom Animation
1. Create a custom animation by adding the following code to your stylesheet :
```css
/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/
.jos-my-custom-animation {
/* Set the initial state of the element */
}
```
2. Use your custom animation by setting the data-jos_animation attribute to my-custom-animation :
```html
```
Example : [Custom Animation]()
## Custom Inverse Animation
1. Create a custom inverse animation by adding the following code to your stylesheet :
```css
/* Custom inverse animation class name starts with 'jos-' keyword followed by the animation name*/
.jos-my-custom-animation-inverse {
/* Set the initial state of the element */
}
```
2. Use your custom inverse animation by setting the data-jos_animationInverse attribute to my-custom-animation-inverse :
```html
```
This is especially useful when you want to animate an element when it is **scrolled out of its rootMargin**, this gives more customizability for beautiful animations.
You can also use a combination of both data-jos_animation ("none", "static", no-transition, etc) & data-jos_animationInverse attributes to create a custom animation.
Example : [Custom Inverse Animation]()
## Playable Animation
1. Create a playable animation by adding the following code to your stylesheet :
```css
/* Custom playable animation class name starts with 'jos-' keyword followed by the animation name*/
/* My Custom Playable Animation */
.jos-my-custom-animation {
transition: 1s;
animation: jos-my-custom-animation 1s ease-in-out infinite;
transform: translateX(100px);
}
/* Add Keyframes */
@keyframes jos-my-custom-animation {
0% {
opacity: 1;
}
50% {
transform: translateX(-100px);
}
}
```
1. Use the playable animation by setting the data-jos_animation attribute to my-custom-animation & data-jos_animationInverse attribute to my-custom-animation-play :
```html
```
Here the data-jos_animationinverse attribute is set to static to prevent the element from animating out of view & to keep it in the final state. The Playable animation is triggered and starts playing when the element is scrolled into view.
Example : [Playable Animation]()
## Custom Timing Function
1. Create a custom timing function by adding the following code to your stylesheet :
```css
/* 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;
}
```
2. Use your custom timing function by setting the data-jos_timing-function attribute to my-custom-timing-function :
```html
```
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 :
```html
```
1. Create an element that you want to animate & add the data-jos_anchor attribute to it, with the id starting with suffix # :
```html
```
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](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/dev/index.html?plain=1#L35)
## Direction Based Animation
1. Create an element that you want to animate & add the data-jos_scrollDirection attribute to it :
```html
```
This triggers the animation when the element is scrolled into view from the up to down direction.
& you can do the same for down to up direction.
This is particularly useful when you want to animate an element when it is **scrolled into view from a particular direction.**
Example : [Direction Based Animation]()
## Start Visible
1. Create an element that you want to have a visible state when the page is loaded & add the data-jos_startVisible attribute to it :
```html
```
This sets the element to be visible when the page is loaded. you can add a delay to it by setting the value in ms :
```html
```
This sets the element to be visible when the page is loaded after 3000ms or instantly if the value is 0 (or) true.
This feature is useful especially when you want an element which is in a fixed position, or is present in the landing page to be at initially in a visible state with no animation .
Example : [Start Visible]()
## Create Custom Function
1. Create a custom function by adding the following code to your script :
```js
// Create a custom function
function myCustomFunction() {
// Do something
}
```
2. Use your custom function by setting the data-jos_invoke attribute to myCustomFunction :
```html
```
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]()
## Scroll Progress Callback
1. Create an element that you want to animate & add the data-jos_scroll attribute to it :
```html
Scroll Trigger Element
```
2. Create a custom function by adding the following code to your script :
```js
your_callbackFunction = (element) => {
// windowScrollProgress : element scroll pixel
console.log(element.id, element.jos.windowScrollProgress);
// scrollProgress : 0-1
element.style.opacity = element.jos.scrollProgress;
// rootScrollProgress : +-0 to +-1
element.style.innerHTML = element.jos.rootScrollProgress;
};
```
This triggers the your_callbackFunction() function when the element is scrolled. This way you can handle the scroll progress of the element.
Example : [Custom Function](https://github.com/jesvijonathan/JOS-Animation-Library/releases/tag/v0.8.8)
## Staggering Animation
1. Create an parent element that you want to animate & add the data-jos_stagger attribute to it along with jos class :
```html
```
The data-jos_stagger attribute along with jos class in parent element is Required/Must to enable staggering even if you are using other attributes.
- data-jos_stagger=true would auto asign id for parent element & use it as a anchor for child elements.
- data-jos_stagger=#id would use the given id as a anchor for child elements.
- not using data-jos_stagger_anchor make the element independent of the parent element.
data-jos_stagger_seq is used to set the delay between each element in the sequence (to trigger one after other) whereas data-jos_stagger_delay total delay for each element as a whole.
Example : [Staggering Animation]()
## JOS Attributes
| Attribute | Type | Default | Description | Values |
| -------------------------------- | ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data-jos_animation | string | fade | Set the animation type for the element. | `static`, `no-transition`, `fade`, `fade-up`, `fade-down`, `fade-left`, `fade-right`, `fade-up-right`, `fade-up-left`, `fade-down-right`, `fade-down-left`, `flip`, `flip-up`, `flip-down`, `flip-left`, `flip-right`, `slide`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `slide-up-right`, `slide-up-left`, `slide-down-right`, `slide-down-left`, `zoom`, `zoom-in`, `zoom-in-up`, `zoom-in-down`, `zoom-in-left`, `zoom-in-right`, `zoom-out`, `zoom-out-up`, `zoom-out-down`, `zoom-out-left`, `zoom-out-right`, `grow`, `grow-right`, `grow-left`, `grow-up`, `grow-down`, `shrink`, `shrink-right`, `shrink-left`, `shrink-up`, `shrink-down`, `rotate`, `rotate-right`, `rotate-left`, `spin`, `spin-right`, `spin-left`, `revolve`, `revolve-right`, `revolve-left`, `stretch`, `stretch-vertical`, `stretch-horizontal`, `skew`, `skew-left`, `skew-right`, `skew-down`, `skew-up`, `slant`, `slant-right`, `slant-left`, `blur`, `sepia`, `invert`, `backdrop`, `brightness`, `saturate`, `hue-rotate`, `bar`, `bar_horizontal`, `grey`, `slide-play`, `slide-horizontal-play`, `slide-vertical-play`, `zoom-in-play`, `pulse-play`, `zoom-play`, `zoom-out-play`, `pulse-out-play`, `flip-play`, `rotate-play`, `spin-play`, `revolve-play`, `grow-play`, `shrink-play`, `stretch-play`, `stretch-vertical-play`, `fade-play`, `fade-horizontal-play`, `fade-vertical-play`, `blink-play`, `my-custom-animation` |
| data-jos_animationInverse | string | static | Set the Inverse animation type for the element. | `static`, `no-transition`, `fade`, `fade-up`, `fade-down`, `fade-left`, `fade-right`, `fade-up-right`, `fade-up-left`, `fade-down-right`, `fade-down-left`, `flip`, `flip-up`, `flip-down`, `flip-left`, `flip-right`, `slide`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `slide-up-right`, `slide-up-left`, `slide-down-right`, `slide-down-left`, `zoom`, `zoom-in`, `zoom-in-up`, `zoom-in-down`, `zoom-in-left`, `zoom-in-right`, `zoom-out`, `zoom-out-up`, `zoom-out-down`, `zoom-out-left`, `zoom-out-right`, `grow`, `grow-right`, `grow-left`, `grow-up`, `grow-down`, `shrink`, `shrink-right`, `shrink-left`, `shrink-up`, `shrink-down`, `rotate`, `rotate-right`, `rotate-left`, `spin`, `spin-right`, `spin-left`, `revolve`, `revolve-right`, `revolve-left`, `stretch`, `stretch-vertical`, `stretch-horizontal`, `skew`, `skew-left`, `skew-right`, `skew-down`, `skew-up`, `slant`, `slant-right`, `slant-left`, `blur`, `sepia`, `invert`, `backdrop`, `brightness`, `saturate`, `hue-rotate`, `bar`, `bar_horizontal`, `grey`, `slide-play`, `slide-horizontal-play`, `slide-vertical-play`, `zoom-in-play`, `pulse-play`, `zoom-play`, `zoom-out-play`, `pulse-out-play`, `flip-play`, `rotate-play`, `spin-play`, `revolve-play`, `grow-play`, `shrink-play`, `stretch-play`, `stretch-vertical-play`, `fade-play`, `fade-horizontal-play`, `fade-vertical-play`, `blink-play`, `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)` |
| data-jos_rootMargin | string | 0% -10% 0% -50% | Sets the margin for an element to animate on in a viewport when scrolled. | `(string: "right% top% left% bottom%")` |
| data-jos_rootMargin_top | string | 0% | Sets the margin for an element to animate on the top of a viewport when scrolled. | `(string: "top%")` |
| data-jos_rootMargin_bottom | string | 0% | Sets the margin for an element to animate on the bottom of a viewport when scrolled. | `(string: "bottom%")` |
| data-jos_scrollDirection | string | down | Sets the direction for an element to animate on ina viewport when scrolled. | `(string: "up", "down", "none")` |
| data-jos_startVisible | boolean & int | false | Set whether the element should start at the final state when the page is loaded (also works with delay). | `(boolean: true, false)` & `(int: 0-10000 ms)` |
| data-jos_anchor | string | null | Sets the anchor element for an element to animate on in a viewport when scrolled. | `(string: "#elementID")` |
| data-jos_scroll | string | null | Sets the callback function for an element to animate on in a viewport when scrolled. | `function`, `your_callbackFunction` |
| data-jos_stagger | string | fade | Sets the stagger animation for an child stagger element to animate on in a viewport when scrolled. | `string`, `fade` |
| data-jos_staggerinverse | string | static | Sets the stagger inverse animation for an child stagger element to animate on in a viewport when scrolled (play animation). | `string`, `fade-play` |
| data-jos_stagger_anchor | string | null | Sets the anchor element for an child stagger element to animate on in a viewport when scrolled. | `string`, `#elementID` |
| data-jos_stagger_seq | float | null | Sets the sequence delay for an child stagger element to animate on in a viewport when scrolled. | `float`, `0-1` |
| data-jos_stagger_delay | float | null | Sets the delay for an child stagger element to animate on in a viewport when scrolled. | `float`, `0-1` |
| data-jos_stagger_duration | float | null | Sets the duration for an element to child stagger animate on in a viewport when scrolled. | `float`, `0-1` |
| data-jos_stagger_timing-function | string | null | Sets the timing function for an child stagger element to animate on in a viewport when scrolled. | `string`, `ease` |
| data-jos_stagger_mirror | boolean | null | Sets the mirror animation for an child stagger element to animate on in a viewport when scrolled. | `boolean`, `true`, `false` |
| data-jos_stagger_rootMargin | string | null | Sets the margin for an child stagger element to animate on in a viewport when scrolled. | `(string: "right% top% left% bottom%")` |
| data-jos_stagger_scrollDirection | string | null | Sets the direction for an child stagger element to animate on ina viewport when scrolled. | `(string: "up", "down", "none")` |
| data-jos_stagger_startVisible | boolean & int | null | Set whether the child stagger element should start at the final state when the page is loaded (also works with delay). | `(boolean: true, false)` & `(int: 0-10000 ms)` |
| data-jos_stagger_once | boolean | null | Set whether the element should animate only once or n count. | `true`, `false`, `int` |
| data-jos_stagger_scroll | string | null | Sets the callback function for an child stagger to animate on in a viewport when scrolled. | `function`, `your_callbackFunction` |
| data-jos_stagger_invoke | string | null | Set the function to be invoked when the child stagger element is scrolled into view. | `function`, `myCustomFunction` |
| data-jos_stagger_invoke_out | string | null | Set the function to be invoked when the child stagger element is scrolled out of view. | `function`, `myCustomFunction` |
## JOS Methods
| Method | Description | Parameters |
| --------- | ------------------------ | ------------------------------------------------------------------------------------------------------- |
| init() | Initialize/Reset JOS | options = `{}` (refer [JOS.Init(options)]() ) |
| refresh() | Refresh JOS | none |
| stop() | Stop/Pause JOS | state = (`0` - Stop at final state, `1` - Stop at initial state, `-1` - Pause at current state) |
| start() | Start/Resume JOS Service | state = (`0` - Normal/Full start, `-1` - Resume from current state) |
| destroy() | Destroy JOS Instance | state = (`0` - Destroy JOS instance excluding stylesheet, `1` - Full Destroy along with JOS-stylesheet) |
## Bundling JOS
Once you are done and have finished developing a version of JOS, you can bundle it using the following command from project root :
```bash
# JOS-Animation-Library
# |-dev
# |-dist
# |-bundler
# |-config
# |-export <-- Check this folder for the output files
# |-jos.css
# |-jos.js
# |...
# |-original
# |-bundle.sh <-- Run this file to bundle JOS
# ...
```
```bash
# Change/Move to bundler directory
cd ./bundler
# Bundle the project
sh bundle.sh
# View the output files
ls ./export
```
## Bugs and Issues
Moved to [issues](https://github.com/jesvijonathan/JOS-Animation-Library/issues)
## Contributing
- Fork it from [main branch](https://github.com/jesvijonathan/JOS-Animation-Library)
- Add your useful feature or fix a bug
- Commit your changes
- Create a pull request
Maybe even [bundle it](#bundling-jos) and test it out before sharing it with the world ;
## License
- [JOS](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/LICENSE.md) is licensed under the [MIT License](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/LICENSE.md).
## Used In
- [CIT Takshashila 23](https://2023.cittakshashila.in)
- [JOS Playground](https://jos-animation.vercel.app)
- [JOS Demo (Old)](https://jesvijonathan.github.io/JOS-Animation-Library/)
- [Jesvi Jonathan](https://jesvi.pythonanywhere.com)
- [CSC](https://jesvijonathan.github.io/christhava-sangam-church-website/)
- [Bitspace](https://bitspace-nextjs-jos.vercel.app)
- [MS Agency](https://www.ms-agency.org/)
- [AI Avenue](https://ai-avenue.netlify.app/)
- [portfolio-glasc](https://portfolio-glasc.vercel.app/es/)
- [resort-maquetacion](https://resort-maquetacion.vercel.app/)
- [mystep](https://www.mystep-s.com/)
- [kazifi-landing](https://kazifi-landing-preview.vercel.app)
- [npas-technoverse](https://npas-technoverse.vercel.app/)
- [Azzle AI](https://azzle.netlify.app/)
(Ping Me If you have a demo ;))
### 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 (<2kb)
- Customizable with own attributes and animation.
- Open sourced and free to use
## Credits
#### This project was solely developed by [Jesvi Jonathan](https://jesvi.pythonanywhere.com)