{"id":24598206,"url":"https://github.com/jesvijonathan/jos-animation-library","last_synced_at":"2025-04-05T13:06:21.250Z","repository":{"id":153307743,"uuid":"624940719","full_name":"jesvijonathan/JOS-Animation-Library","owner":"jesvijonathan","description":"A fullblown in-house animation library that can add instant scroll animation to all elements in your website, making it look beautiful \u0026 professional. Comes with tons of customization options but is still easy to use, all in a small footprint","archived":false,"fork":false,"pushed_at":"2025-01-24T09:37:04.000Z","size":20947,"stargazers_count":60,"open_issues_count":9,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T13:06:16.347Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://jos-animation.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jesvijonathan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["jesvijonathan"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-04-07T16:36:57.000Z","updated_at":"2025-02-15T19:05:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6ab6d6e-b4f2-497e-ae87-223290936cb1","html_url":"https://github.com/jesvijonathan/JOS-Animation-Library","commit_stats":{"total_commits":242,"total_committers":3,"mean_commits":80.66666666666667,"dds":"0.16942148760330578","last_synced_commit":"f4b2b5dc79dbdf616cd8e8d7ae40c533184ed930"},"previous_names":[],"tags_count":11,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesvijonathan%2FJOS-Animation-Library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesvijonathan%2FJOS-Animation-Library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesvijonathan%2FJOS-Animation-Library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesvijonathan%2FJOS-Animation-Library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jesvijonathan","download_url":"https://codeload.github.com/jesvijonathan/JOS-Animation-Library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339155,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","collaborate","css","design","front-end-development","javascript","javascript-library","javascript-on-scroll","jesvi","jos","learn","library","onscroll","package","scroll","scroll-animations","uikit","website"],"created_at":"2025-01-24T12:15:14.261Z","updated_at":"2025-04-05T13:06:21.219Z","avatar_url":"https://github.com/jesvijonathan.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jesvijonathan"],"categories":[],"sub_categories":[],"readme":"\u003c!--\nJOS : Animation Library\nBy Jesvi Jonathan\n--\u003e\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"\\_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://jos-animation.vercel.app\"\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_full_white.svg\" alt=\"JOS-Animation\" style=\"max-width: 100%;\" height=\"200\"/\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eJOS : Animation Library\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A simple \u0026 easy to use animation library for web developers\n    \u003cbr /\u003e\n    \u003cbr /\u003e \n    \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://github.com/jesvijonathan/JOS-Animation-Library\"\u003e\u003cimg src=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default_black.svg\" alt=\"JOS-Animation\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.jsdelivr.com/package/npm/jos-animation\"\u003e\u003cimg src=\"https://data.jsdelivr.com/v1/package/npm/jos-animation/badge?style=rounded\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e \n    \u003ca href=\"https://badge.fury.io/js/jos-animation\"\u003e\u003cimg src=\"https://badge.fury.io/js/jos-animation.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e \n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://jesvijonathan.github.io/JOS-Animation-Library\"\u003eGit Pages\u003c/a\u003e\n    ·\n    \u003ca href=\"https://jos-animation.vercel.app\"\u003ePlayground Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/jesvijonathan/JOS-Animation-Library/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/jesvijonathan/JOS-Animation-Library/issues\"\u003eRequest Feature\u003c/a\u003e\n\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS\n## Table of Contents\n\n- [About This Project](#about-this-project)\n  - [Built With](#built-with)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n    - [Normal Installation](#normal-installation)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About This Project\n\nJOS-Animation, Javascript On Scroll Animation library is a simple \u0026 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 \u0026 comes with tons of features and is fully customizable. It is lightweight \u0026 has a very small footprint. The best part of all is that it has no (\\*minimum) toll on performance.\n\n- Open source, no download or tiring setup, just add a script tag (Embed).\n- Includes Preset and expert custom animation options.\n- Works with all major browsers \u0026 Platforms.\n- Fast, light and small with no/min toll on performance.\n- Simple \u0026 easy to setup for both beginners \u0026 experts.\n- Customize animation settings and build your own scroll invoked functions\n- [npm](https://www.npmjs.com/package/jos-animation) \u0026 [CDNjs](https://cdnjs.com/libraries/jos-animation) approved library for the fastest deliveries\n- And lots more stuff... explore it yourself.\n\nThis project is currently being developed by me \u0026 the dev community, So you can expect more features and updates quite often..\n\nWas 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.\n\nFeel free to report an issue or request a feature in this repository :)\n\u0026 for more information, Check out the [JOS Webpage](https://jos-animation.vercel.app).\n\u003cbr\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\nBadges\n\u003c/summary\u003e\n\n\u003cbr\u003e\n\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default.svg)\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default_black.svg)\n\n```html\n\u003ca\n  target=\"\\_blank\"\n  rel=\"noopener noreferrer nofollow\"\n  href=\"https://github.com/jesvijonathan/JOS-Animation-Library\"\n\u003e\n  \u003cimg\n    src=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default.svg\"\n    alt=\"JOS-Animation\"\n    style=\"max-width: 100%;\"\n/\u003e\u003c/a\u003e\n```\n\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_black_inverse.svg)\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_white_inverse.svg)\n\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_inside_logo_white.svg)\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_inside_logo_black.svg)\n\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_plain_black.svg)\n![jos-animation-Badge](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_plain_white.svg)\n\n![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_black.svg)\n![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_white.svg)\n\n![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_white.svg)\n![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_black.svg)\n![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_transparent.svg)\n![jos-animation-logo](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_default_transparent_black.svg)\n\n![jos-animation-image](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_full_white.svg)\n![jos-animation-image](https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/logo/jos_full_black.svg)\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e \n\u003cb\u003eVideo Tutorial\u003c/b\u003e\n\u003c/summary\u003e\n\u003ccenter\u003e\n \n- \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://www.youtube.com/watch?v=ziR95EKKttc\"\u003e\u003cimg src=\"https://img.youtube.com/vi/ziR95EKKttc/0.jpg\" alt=\"JOS-Animation v0.6\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e JOS V0.6 Cubes \u003ci\u003e(Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))\u003c/i\u003e\n\u003cbr\u003e\n- \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://www.youtube.com/watch?v=_hlvc5oq9Fw\"\u003e\u003cimg src=\"https://img.youtube.com/vi/_hlvc5oq9Fw/0.jpg\" alt=\"JOS-Animation v0.8\" style=\"max-width: 100%;\"\u003e\u003c/a\u003eJOS V0.8.8 \u003ci\u003e(Outdated | [Latest : v0.9.1](https://github.com/jesvijonathan/JOS-Animation-Library/releases/latest))\u003c/i\u003e\n\n\u003c/center\u003e\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n\u003ccode\u003e \u003ci\u003eJOS\u003c/i\u003e \u003c/code\u003e \u003ccode\u003e \u003ci\u003ev0.9.2\u003c/i\u003e \u003c/code\u003e \u003ccode\u003e\u003ci\u003e 11 Nov 2023\u003c/i\u003e\u003c/code\u003e \u003ccode\u003e \u003ci\u003eJesvi Jonathan\u003c/i\u003e \u003c/code\u003e\n\n\u003cbr\u003e\n\n### Built With\n\n- [JavaScript](https://www.w3schools.com/js/)\n- [CSS](https://www.w3schools.com/css/)\n\n## Installing JOS\n\n### Embedding JOS\n\n\u003c!-- 0. Add the \u003ccode\u003e[\\\u003clink\u003e](https://github.com/jesvijonathan/Jesvi-Bot/releases)\u003c/code\u003e inside the \u003ccode\u003e\\\u003chead\u003e\u003c/code\u003e tag :\n   (this step is not required from \u003ccode\u003ev0.9\u003c/code\u003e onwards) --\u003e\n\n\u003c!-- https://unpkg.com/jos-animation@latest/dist/jos.js --\u003e\n\u003c!-- \"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8.8/jos.css\" --\u003e\n\n\u003c!-- ```html\n\u003clink\n  id=\"jos-stylesheet\"\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/jos-animation/dist/jos.css\"\n  crossorigin=\"anonymous\"\n/\u003e\n```\n\n1. Add the \u003ccode\u003e[\\\u003cscript\u003e](https://github.com/jesvijonathan/Jesvi-Bot/releases)\u003c/code\u003e right after the \u003ccode\u003e\\\u003cbody\u003e\u003c/code\u003e tag :\n   \u003c!-- For easier navigation use jsdelivr --\u003e\n   \u003c!-- https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8.8/jos.min.js --\u003e\n   \u003c!-- For Stability use unpkg  --\u003e\n   \u003c!-- https://unpkg.com/jos-animation@latest/dist/jos.js --\u003e\n\n\u003c!-- ```html\n\u003cscript src=\"https://unpkg.com/jos-animation/dist/jos.min.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003cscript\n  src=\"https://cdnjs.cloudflare.com/ajax/libs/jos-animation/0.9.2/jos.js\"\n  integrity=\"sha512-ZbNmgrMmWwQspNz6WQ1HnqLEPMXE4PyJBVnuc10e4gwJhrycze2IzjDQPx4CxkOBnUyt5wNCekdeTRJOe8J4WA==\"\n  crossorigin=\"anonymous\"\n  referrerpolicy=\"no-referrer\"\n\u003e\u003c/script\u003e\n```  --\u003e\n\nYou have the option to use the latest version of JOS from a variety of sources :\n\n##### [CDNJS](https://cdnjs.com/libraries/jos-animation)\n\n  \u003c!--   \u003clink\n      id=\"jos-stylesheet\"\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css\"\n      crossorigin=\"anonymous\"\n    /\u003e --\u003e\n\n```html\n\u003cscript\n  src=\"https://cdnjs.cloudflare.com/ajax/libs/jos-animation/0.9.2/jos.js\"\n  integrity=\"sha512-ZbNmgrMmWwQspNz6WQ1HnqLEPMXE4PyJBVnuc10e4gwJhrycze2IzjDQPx4CxkOBnUyt5wNCekdeTRJOe8J4WA==\"\n  crossorigin=\"anonymous\"\n  referrerpolicy=\"no-referrer\"\n\u003e\u003c/script\u003e\n```\n\n##### (or) [JSDELIVR](https://cdnjs.com/libraries/jos-animation)\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jos-animation@0.9.2/dist/jos.js\"\u003e\u003c/script\u003e\n```\n\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eClick here to check out other \u003cu\u003eSources / CDNs\u003c/u\u003e\u003c/b\u003e\u003c/summary\u003e\n\n- #### [JSDELIVR](https://www.jsdelivr.com/package/npm/jos-animation)\n\n  \u003c!-- \u003clink\n    id=\"jos-stylesheet\"\n    rel=\"stylesheet\"\n    href=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css\"\n    crossorigin=\"anonymous\"\n  /\u003e --\u003e\n\n  ```html\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.js\"\u003e\u003c/script\u003e\n  ```\n\n  (or)\n\n  ```html\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/jos-animation/dist/jos.js\"\u003e\u003c/script\u003e\n  ```\n\n  (or)\n\n  ```html\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.9.2/jos.js\"\u003e\u003c/script\u003e\n  ```\n\n- #### [UNPKG](https://unpkg.com/jos-animation/)\n\n  \u003c!--   \u003clink\n    id=\"jos-stylesheet\"\n    rel=\"stylesheet\"\n    href=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css\"\n    crossorigin=\"anonymous\"\n  /\u003e --\u003e\n\n  ```html\n  \u003cscript src=\"https://unpkg.com/jos-animation\"\u003e\u003c/script\u003e\n  ```\n\n  (or)\n\n  ```html\n  \u003cscript src=\"https://unpkg.com/jos-animation@0.9.2/dist/jos.js\"\u003e\u003c/script\u003e\n  ```\n\n- #### [Github](https://raw.githubusercontent.com/jesvijonathan/JOS-Animation-Library/master/dist/jos.js)\n\n  \u003c!--   \u003clink\n      id=\"jos-stylesheet\"\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css\"\n      crossorigin=\"anonymous\"\n    /\u003e --\u003e\n\n  ```html\n  \u003cscript src=\"https://raw.githubusercontent.com/jesvijonathan/JOS-Animation-Library/master/dist/jos.js\"\u003e\u003c/script\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\nYou can add minified version of the script by replacing \u003ccode\u003ejos.js\u003c/code\u003e with\n\u003ccode\u003ejos.min.js\u003c/code\u003e in the above script tag.\n\n\u003c!-- Use \u003ccode\u003edefer\u003c/code\u003e attribute in script tag to make sure the script is loaded after the DOM is loaded. --\u003e\n\n- \u003ccode\u003ejos.js\u003c/code\u003e for basic. - \u003ccode\u003ejos.min.js\u003c/code\u003e for production use. -\n  \u003cb\u003e\u003ccode\u003ejos.debug.js\u003c/code\u003e\u003c/b\u003e for \u003cb\u003edebugging\u003c/b\u003e along with some other\n  function From \u003ccode\u003ev0.9\u003c/code\u003e onwards, by default \u003ccode\u003ejos.js\u003c/code\u003e does not\n  require you to add the stylesheet \u003ccode\u003ejos.css\u003c/code\u003e, it will be exported\n  along with the script. But you can still add the stylesheet if you want to for\n  some reason. ### Importing JOS 1. Install JOS using npm (yarn or pnpm) : ```bash\n  npm install jos-animation\n\n#### Version Tags\n\n\u003c!-- https://unpkg.com/jos-animation@0.8.8/dist/jos.js --\u003e\n\n- Latest : \u003ccode\u003ejos-animation@latest\u003c/code\u003e\n- Stable : \u003ccode\u003ejos-animation@0.8.8\u003c/code\u003e\n- Beta : \u003ccode\u003ejos-animation@0.9.0-beta.1\u003c/code\u003e\n\nSo it would be \u003ccode\u003ehttps://unpkg.com/jos-animation/@latest/dist/jos.js\u003c/code\u003e (embed) for the latest version. or \u003ccode\u003ejos-animation/@0.8.8/dist/jos.js\u003c/code\u003e (npm install) for a specific version.\n\n  \u003c!-- - make sure to enable \u003cu\u003everbose\u003c/u\u003e in debug level settings under the console tab in your browser's developer tools. --\u003e\n\n\u003c!-- 3. Initialize JOS with default settings :\n\n```html\n\u003cscript\u003e\n  JOS.init();\n\u003c/script\u003e\n````\n\nBy the end of this step, you should have something like this :\n\n````html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink\n      id=\"jos-stylesheet\"\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css\"\n      crossorigin=\"anonymous\"\n    /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      JOS.init();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n``` --\u003e\n\n\u003c!-- using npm --\u003e\n\n\u003c!-- ### Installation using npm\n\n1. You can also Install JOS using npm :\n\n```bash\nnpm install jos-animation\n````\n\n2. Import JOS in your project :\n\n````js\nimport \"jos-animation/dist/jos.css\";\nimport JOS from \"jos-animation\";\n\nJOS.init();\n``` --\u003e\n\u003cbr\u003e\n\n## Importing JOS\n\n1. Install JOS using npm (yarn or pnpm) :\n\n```bash\nnpm install jos-animation\n```\n\n2. Import JOS in your project :\n\n```js\n// import \"jos-animation/dist/jos.css\";\n// Above is required only for v0.8.8 \u0026 below (or) if you want to overide jos by using style from the stylesheet\n\nimport JOS from \"jos-animation\";\n\n// Other ways to import JOS\n// import JOS from \"jos-animation/dist/jos.js\";\n// import JOS from \"jos-animation/dist/jos.min.js\";\n// import JOS from \"jos-animation/dist/jos.debug.js\";\n```\n\n\u003c!-- some history here : https://github.com/jesvijonathan/JOS-Animation-Library/issues/15 --\u003e\n\n### Frameworks\n\n\u003cdetails\u003e\n\u003csummary\u003eVue / Nuxt.js\u003c/summary\u003e\n\n```js\n// main.js\n\nimport { createApp } from \"vue\";\nimport { watch, nextTick } from \"vue\";\n\nimport JOS from \"jos-animation\"; // jos-animation/dist/jos.debug.js\n\nimport App from \"./App.vue\";\n\nconst app = createApp(App);\napp.mount(\"#app\");\n\nJOS.init();\n//JOS.version();\n\nwatch(\n  () =\u003e router.currentRoute.value,\n  () =\u003e {\n    nextTick(() =\u003e {\n      JOS.refresh();\n    });\n  }\n);\n\n// To observe elements after a route change\n```\n\nUsed in : [https://jos-animation.vercel.app/](https://github.com/jesvijonathan/JOS-Animation-Playground/blob/main/src/main.js)\n\nThis above example for Vue.js is also applicable for Nuxt.js\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReact\u003c/summary\u003e\n\n```js\n// index.js\n\nimport JOS from \"jos-animation/dist/jos.js\";\n\nonload = () =\u003e {\n  const options = {\n    debugMode: true,\n    animation: \"flip\",\n    duration: 0.7,\n    rootMargin: \"0% 0% 0% 0%\",\n  };\n  JOS.init(options);\n  //JOS.version();\n};\n\nfunction Main() {\n  useEffect(() =\u003e {\n    JOS.refresh();\n  }, []);\n  // To observe elements after a route change\n\n  return (\n    \u003cReact.StrictMode\u003e\n      \u003cApp /\u003e\n    \u003c/React.StrictMode\u003e\n  );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\u003cMain /\u003e);\n```\n\nUsed in : [https://azzle.netlify.app](https://azzle.netlify.app/)\n\nThis above example is for React.js is also applicable for Next.js \u0026 Preact.js\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNext.js\u003c/summary\u003e\n\n```js\n// app/layout.tsx\n\nimport jos from \"jos-animation/dist/jos.js\";\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\nconst jos_options = {\n    debugMode: false,\n    passive: true,\n    animation: \"fade\",\n    duration: 0.4,\n    rootMargin: \"20% 0% 30% 0%\",\n  };\n\n  useEffect(() =\u003e {\n    jos.init(jos_options);\n  }, []); // Once\n\n  useEffect(() =\u003e {\n    jos.refresh();\n  }); // For every update\n\n  return ();\n}\n// To observe elements after a route change\n```\n\nUsed in : [https://bitspace-nextjs-jos.vercel.app](https://github.com/jesvijonathan/bitspace-org-in/blob/master/src/app/layout.tsx)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAngular\u003c/summary\u003e\n\n```js\nimport { Component, OnInit, AfterViewChecked } from '@angular/core';\n\nimport JOS from 'jos-animation';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit, AfterViewChecked {\n\n  ngOnInit(): void {\n    JOS.init(); // Once\n  }\n\n  ngAfterViewChecked(): void {\n    JOS.refresh(); // For every update\n  }\n\n  // ... rest of your code\n\n}\n```\n\n\u003c!-- Used in : [https://jos-animation.vercel.app/]() --\u003e\n\nYou can check this discussion thread for more information : [JOS for Angular](https://github.com/jesvijonathan/JOS-Animation-Library/issues/41#issuecomment-1914803098)\n\n\u003c/details\u003e\n\u003cbr\u003e\n\n## Setup\n\n1. Use \u003ccode\u003eJOS.init();\u003c/code\u003e to initialize the library with default settings.\n\n```html\n\u003c!-- Initialize JOS with default settings --\u003e\n\u003cscript\u003e\n  JOS.init();\n\u003c/script\u003e\n```\n\n2. (\u003cb\u003eOr\u003c/b\u003e) Use \u003ccode\u003eJOS.init(options);\u003c/code\u003e to overide the default settings with your custom settings.\n\n```html\n\u003c!-- Global Parameters --\u003e\n\u003cscript\u003e\n  JOS.init({\n    // disable: false, // Disable JOS globally | Values :  'true', 'false'\n    debugMode: true, // Enable JOS debug mode | Values :  'true', 'false'\n    passive: false, // Set the passive option for the scroll event listener | Values :  'true', 'false'\n\n    once: false, // Disable JOS after first animation | Values :  'true', 'false' || Int : 0-1000\n    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\"\n    // 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\"\n    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'\n    //mirror : false, // Set whether the element should animate back when scrolled out of view | Values :  'true', 'false'\n    threshold: 0, // Set global the threshold for the element to be visible | Values :  0-1\n    delay: 0, // Set global the delay for the animation to start | Values :  0,1,2,3,4,5\n    duration: 0.7, // Set global the duration for the animation playback | Values :  flota : 0-1 \u0026 int : 0,1,2,3,4,5\n\n    // startVisible: \"true\", // Set whether the element should animate when the page is loaded | Values :  'true', 'false' || MS : 0-10000\n    // scrollDirection: \"down\", // Set the scroll direction for the element to be visible | Values :  'up', 'down', 'none'\n    //scrollProgressDisable: true // disable or enable scroll callback function | Values :  'true', 'false'\n    // intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values :  0-1 (automatically set)\n    // rootMargin_top: \"0%\", // Set by which percent the element should animate out (Recommended value between 10% to -30%)\n    // rootMargin_bottom: \"-50%\", // Set by which percent the element should animate out (Recommended value between -10% to -60%)\n    // rootMargin: \"0% 0% -50% 0%\", // Set the root margin for the element to be visible | Values :  _% _% _% _%  (automatically set)\n  });\n\u003c/script\u003e\n```\n\n3. Set \u003ccode\u003eclass=\"jos\"\u003c/code\u003e to the element you want to animate :\n\n```html\n\u003c!-- JOS class is required to animate the element --\u003e\n\u003cdiv class=\"jos\"\u003e\u003c/div\u003e\n```\n\n4. Set \u003ccode\u003edata-jos\u003c/code\u003e \\*attributes to customize the element you want to animate,\u003cbr\u003e(although these attributes are optional and will work without them) :\n\n```html\n\u003c!-- 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 --\u003e\n\u003cdiv\n  class=\"jos\"\n  data-jos_animation=\"zoom\"\n  data-jos_once=\"false\"\n  data-jos_duration=\"0.4\"\n  data-jos_delay=\"0.1\"\n  data-jos_timing-function=\"ease-in-out\"\n  data-jos_mirror=\"true\"\n  data-jos_rootMargin=\"0% 0% -50% 0%\"\n  data-jos_rootMargin_top=\"-10%\"\n  data-jos_rootMargin_bottom=\"-50%\"\n  data-jos_scrollDirection=\"down\"\n  data-jos_startVisible=\"false\"\n  data-jos_threshold=\"0.4\"\n  data-jos_passive=\"false\"\n  data-jos_invoke=\"myCustomFunction\"\n  data-jos_invoke_out=\"myCustomFunction_onExit\"\n  data-jos_scroll=\"your_callbackFunction\"\n  data-jos_anchor=\"#elementID\"\n\u003e\u003c/div\u003e\n```\n\nSee [JOS Props](#jos-attributes) for full information regarding the animation, attributes, and options.\n\n## Custom Animation\n\n1. Create a custom animation by adding the following code to your stylesheet :\n\n```css\n/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/\n.jos-my-custom-animation {\n  /* Set the initial state of the element */\n}\n```\n\n2. Use your custom animation by setting the \u003ccode\u003edata-jos_animation\u003c/code\u003e attribute to \u003ccode\u003emy-custom-animation\u003c/code\u003e :\n\n```html\n\u003cdiv class=\"jos\" data-jos_animation=\"my-custom-animation\"\u003e\u003c/div\u003e\n```\n\nExample : [Custom Animation]()\n\n## Custom Inverse Animation\n\n1. Create a custom inverse animation by adding the following code to your stylesheet :\n\n```css\n/* Custom inverse animation class name starts with 'jos-' keyword followed by the animation name*/\n.jos-my-custom-animation-inverse {\n  /* Set the initial state of the element */\n}\n```\n\n2. Use your custom inverse animation by setting the \u003ccode\u003edata-jos_animationInverse\u003c/code\u003e attribute to \u003ccode\u003emy-custom-animation-inverse\u003c/code\u003e :\n\n```html\n\u003cdiv class=\"jos\" data-jos_animationInverse=\"my-custom-animation-inverse\"\u003e\u003c/div\u003e\n```\n\nThis 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.\n\nYou can also use a combination of both \u003ccode\u003edata-jos_animation\u003c/code\u003e (\"none\", \"static\", no-transition, etc) \u0026 \u003ccode\u003edata-jos_animationInverse\u003c/code\u003e attributes to create a custom animation.\n\nExample : [Custom Inverse Animation]()\n\n## Playable Animation\n\n1. Create a playable animation by adding the following code to your stylesheet :\n\n```css\n/* Custom playable animation class name starts with 'jos-' keyword followed by the animation name*/\n\n/* My Custom Playable Animation */\n.jos-my-custom-animation {\n  transition: 1s;\n  animation: jos-my-custom-animation 1s ease-in-out infinite;\n  transform: translateX(100px);\n}\n/* Add Keyframes */\n@keyframes jos-my-custom-animation {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    transform: translateX(-100px);\n  }\n}\n```\n\n1. Use the playable animation by setting the \u003ccode\u003edata-jos_animation\u003c/code\u003e attribute to \u003ccode\u003emy-custom-animation\u003c/code\u003e \u0026 \u003ccode\u003edata-jos_animationInverse\u003c/code\u003e attribute to \u003ccode\u003emy-custom-animation-play\u003c/code\u003e :\n\n```html\n\u003cdiv\n  class=\"jos\"\n  data-jos_animation=\"my-custom-animation\"\n  data-jos_animationinverse=\"static\"\n\u003e\u003c/div\u003e\n```\n\nHere the \u003ccode\u003edata-jos_animationinverse\u003c/code\u003e attribute is set to \u003ccode\u003estatic\u003c/code\u003e to prevent the element from animating out of view \u0026 to keep it in the final state. The Playable animation is triggered and starts playing when the element is scrolled into view.\n\nExample : [Playable Animation]()\n\n## Custom Timing Function\n\n1. Create a custom timing function by adding the following code to your stylesheet :\n\n```css\n/* Custom timing function attribute name starts with 'data-jos_timing_function' keyword \u0026 a custom name of your choice */\n[data-jos_timing_function=\"myCustom-timingFunc\"] {\n  /* Set the timing of the element */\n  transition-timing-function: cubic-bezier(0.2, 0.5, 0.2, 0.5) !important;\n}\n```\n\n2. Use your custom timing function by setting the \u003ccode\u003edata-jos_timing-function\u003c/code\u003e attribute to \u003ccode\u003emy-custom-timing-function\u003c/code\u003e :\n\n```html\n\u003cdiv class=\"jos\" data-jos_timing-function=\"myCustom-timingFunc\"\u003e\u003c/div\u003e\n```\n\nExample : [Custom Timing Function]()\n\n## Anchors to trigger animation\n\n1. Create an element that you want to use as an anchor \u0026 add an \u003ccode\u003eid\u003c/code\u003e to it :\n\n```html\n\u003c!-- My reference anchor element --\u003e\n\u003cdiv id=\"myElement\"\u003e\u003c/div\u003e\n```\n\n1. Create an element that you want to animate \u0026 add the \u003ccode\u003edata-jos_anchor\u003c/code\u003e attribute to it, with the id starting with suffix \u003ccode\u003e#\u003c/code\u003e :\n\n```html\n\u003c!-- My animated element --\u003e\n\u003cdiv class=\"jos\" data-jos_anchor=\"#myElement\"\u003e\u003c/div\u003e\n```\n\nThis triggers the animation when the \u003ccode\u003emyElement\u003c/code\u003e element is scrolled into view.\u003cbr\u003e\nThis feature is useful especially when you want to animate an element which is in a \u003cb\u003efixed position\u003c/b\u003e.\n\nExample : [Anchor](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/dev/index.html?plain=1#L35)\n\n## Direction Based Animation\n\n1. Create an element that you want to animate \u0026 add the \u003ccode\u003edata-jos_scrollDirection\u003c/code\u003e attribute to it :\n\n```html\n\u003c!-- My animated element --\u003e\n\u003cdiv class=\"jos\" data-jos_scrollDirection=\"down\"\u003e\u003c/div\u003e\n```\n\nThis triggers the animation when the element is scrolled into view from the up to \u003ccode\u003edown\u003c/code\u003e direction.\u003cbr\u003e \u0026 you can do the same for down to \u003ccode\u003eup\u003c/code\u003e direction.\n\nThis is particularly useful when you want to animate an element when it is **scrolled into view from a particular direction.**\n\nExample : [Direction Based Animation]()\n\n## Start Visible\n\n1. Create an element that you want to have a visible state when the page is loaded \u0026 add the \u003ccode\u003edata-jos_startVisible\u003c/code\u003e attribute to it :\n\n```html\n\u003c!-- My animated element --\u003e\n\u003cdiv class=\"jos\" data-jos_startVisible=\"true\"\u003e\u003c/div\u003e\n```\n\nThis sets the element to be visible when the page is loaded. you can add a delay to it by setting the value in \u003ccode\u003ems\u003c/code\u003e :\n\n```html\n\u003c!-- My animated element that is visible with a given timer/delay in ms--\u003e\n\u003cdiv class=\"jos\" data-jos_startVisible=\"3000\"\u003e\u003c/div\u003e\n```\n\nThis sets the element to be visible when the page is loaded after \u003ccode\u003e3000\u003c/code\u003ems or instantly if the value is \u003ccode\u003e0\u003c/code\u003e (or) \u003ccode\u003etrue\u003c/code\u003e.\n\nThis feature is useful especially when you want an element which is in a \u003cb\u003efixed position, or is present in the landing page\u003c/b\u003e to be at initially in a visible state with no animation .\n\nExample : [Start Visible]()\n\n## Create Custom Function\n\n1. Create a custom function by adding the following code to your script :\n\n```js\n// Create a custom function\nfunction myCustomFunction() {\n  // Do something\n}\n```\n\n2. Use your custom function by setting the \u003ccode\u003edata-jos_invoke\u003c/code\u003e attribute to \u003ccode\u003emyCustomFunction\u003c/code\u003e :\n\n```html\n\u003cdiv class=\"jos\" data-jos_invoke=\"myCustomFunction\"\u003e\u003c/div\u003e\n```\n\nThis triggers the myCustomFunction() function when the element is scrolled into view.\n\nYou can use \u003cb\u003e\u003ccode\u003edata-jos_invoke_out\u003c/code\u003e\u003c/b\u003e attribute to trigger the function when the element is scrolled out of view.\n\nExample : [Custom Function]()\n\n## Scroll Progress Callback\n\n1. Create an element that you want to animate \u0026 add the \u003ccode\u003edata-jos_scroll\u003c/code\u003e attribute to it :\n\n```html\n\u003cdiv id=\"elem1\" class=\"jos\" data-jos_scroll=\"your_callbackFunction\"\u003e\n  Scroll Trigger Element\n\u003c/div\u003e\n```\n\n2. Create a custom function by adding the following code to your script :\n\n```js\nyour_callbackFunction = (element) =\u003e {\n  // windowScrollProgress : element scroll pixel\n  console.log(element.id, element.jos.windowScrollProgress);\n  // scrollProgress : 0-1\n  element.style.opacity = element.jos.scrollProgress;\n  // rootScrollProgress : +-0 to +-1\n  element.style.innerHTML = element.jos.rootScrollProgress;\n};\n```\n\nThis triggers the your_callbackFunction() function when the element is scrolled. This way you can handle the scroll progress of the element.\n\nExample : [Custom Function](https://github.com/jesvijonathan/JOS-Animation-Library/releases/tag/v0.8.8)\n\n## Staggering Animation\n\n1. Create an \u003cb\u003eparent\u003c/b\u003e element that you want to animate \u0026 add the \u003ccode\u003edata-jos_stagger\u003c/code\u003e attribute to it along with \u003ccode\u003ejos\u003c/code\u003e class :\n\n```html\n\u003cdiv\n  class=\"jos parent_elem\"\n  id=\"stagger\"\n  data-jos_stagger=\"spin\"\n  data-jos_staggerinverse=\"none\"\n  data-jos_stagger_anchor=\"#elementID\"\n  data-jos_stagger_sequence=\"0.1\"\n  data-jos_stagger_delay=\"0\"\n  data-jos_stagger_duration=\"0.4\"\n  data-jos_stagger_timing-function=\"ease-in-out\"\n  data-jos_stagger_mirror=\"true\"\n  data-jos_stagger_rootMargin=\"0% 0% -50% 0%\"\n  data-jos_stagger_invoke=\"myCustomFunction\"\n  data-jos_stagger_invoke_out=\"myCustomFunction_onExit\"\n  data-jos_stagger_scroll=\"your_callbackFunction\"\n  data-jos_stagger_startVisible=\"false\"\n  data-jos_stagger_scrollDirection=\"down\"\n  data-jos_stagger_once=\"false\"\n\u003e\n  \u003c!-- data-jos_stagger=\"true\"        # this attribute along with 'jos' class in parent element is Required/Must to enable staggering --\u003e\n  \u003c!-- data-jos_stagger_anchor=\"true\" # auto sets parent element's id \u0026 uses it as a anchor's --\u003e\n\n  \u003c!-- Element 1  --\u003e\n  \u003cdiv class=\"child_elem\"\u003e\u003c/div\u003e\n  \u003c!-- Element 2  --\u003e\n  \u003cdiv class=\"child_elem\"\u003e\u003c/div\u003e\n  \u003c!-- Element 3  --\u003e\n  \u003cdiv class=\"child_elem\"\u003e\u003c/div\u003e\n  \u003c!-- Element n  --\u003e\n\u003c/div\u003e\n```\n\nThe \u003ccode\u003edata-jos_stagger\u003c/code\u003e attribute along with \u003ccode\u003ejos\u003c/code\u003e class in parent element is Required/Must to enable staggering even if you are using other attributes.\n\n- \u003ccode\u003edata-jos_stagger\u003c/code\u003e=\u003ccode\u003etrue\u003c/code\u003e would auto asign id for parent element \u0026 use it as a anchor for child elements.\n- \u003ccode\u003edata-jos_stagger\u003c/code\u003e=\u003ccode\u003e#id\u003c/code\u003e would use the given id as a anchor for child elements.\n- not using \u003ccode\u003edata-jos_stagger_anchor\u003c/code\u003e make the element independent of the parent element.\n\n\u003ccode\u003edata-jos_stagger_seq\u003c/code\u003e is used to set the delay between each element in the sequence \u003ci\u003e(to trigger one after other)\u003c/i\u003e whereas \u003ccode\u003edata-jos_stagger_delay\u003c/code\u003e total delay for each element as a whole.\n\nExample : [Staggering Animation]() \u003cbr\u003e\n\n## JOS Attributes\n\n| Attribute                        | Type          | Default         | Description                                                                                                                 | Values                                                                                                                                                                                                                                                                                                                                                                                                    |\n| -------------------------------- | ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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` |\n| 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` |\n| data-jos_once                    | boolean       | false           | Set whether the element should animate only once.                                                                           | `true`, `false`                                                                                                                                                                                                                                                                                                                                                                                           |\n| data-jos_delay                   | int           | 0               | Set the delay for the animation to start.                                                                                   | `(float: 0-1)` \u0026 `(int: 0, 1, 2, 3, 4, 5)`                                                                                                                                                                                                                                                                                                                                                                |\n| data-jos_duration                | float         | 0.4             | Set the duration for the animation playback.                                                                                | `(float: 0-1)` \u0026 `(int: 0, 1, 2, 3, 4, 5)`                                                                                                                                                                                                                                                                                                                                                                |\n| 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`                                                                                                                                                                                                                          |\n| data-jos_invoke                  | string        | null            | Set the function to be invoked when the element is scrolled into view.                                                      | `function`, `myCustomFunction`                                                                                                                                                                                                                                                                                                                                                                            |\n| data-jos_invoke_out              | string        | null            | Set the function to be invoked when the element is scrolled out of view.                                                    | `function`, `myCustomFunction`                                                                                                                                                                                                                                                                                                                                                                            |\n| data-once                        | boolean \u0026 int | false           | Set whether the element should animate only                                                                                 | `(boolean: true, false)` \u0026 `(int: 0-infinity)`                                                                                                                                                                                                                                                                                                                                                            |\n| 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%\")`                                                                                                                                                                                                                                                                                                                                                                   |\n| data-jos_rootMargin_top          | string        | 0%              | Sets the margin for an element to animate on the top of a viewport when scrolled.                                           | `(string: \"top%\")`                                                                                                                                                                                                                                                                                                                                                                                        |\n| data-jos_rootMargin_bottom       | string        | 0%              | Sets the margin for an element to animate on the bottom of a viewport when scrolled.                                        | `(string: \"bottom%\")`                                                                                                                                                                                                                                                                                                                                                                                     |\n| data-jos_scrollDirection         | string        | down            | Sets the direction for an element to animate on ina viewport when scrolled.                                                 | `(string: \"up\", \"down\", \"none\")`                                                                                                                                                                                                                                                                                                                                                                          |\n| data-jos_startVisible            | boolean \u0026 int | false           | Set whether the element should start at the final state when the page is loaded (also works with delay).                    | `(boolean: true, false)` \u0026 `(int: 0-10000 ms)`                                                                                                                                                                                                                                                                                                                                                            |\n| data-jos_anchor                  | string        | null            | Sets the anchor element for an element to animate on in a viewport when scrolled.                                           | `(string: \"#elementID\")`                                                                                                                                                                                                                                                                                                                                                                                  |\n| data-jos_scroll                  | string        | null            | Sets the callback function for an element to animate on in a viewport when scrolled.                                        | `function`, `your_callbackFunction`                                                                                                                                                                                                                                                                                                                                                                       |\n| data-jos_stagger                 | string        | fade            | Sets the stagger animation for an child stagger element to animate on in a viewport when scrolled.                          | `string`, `fade`                                                                                                                                                                                                                                                                                                                                                                                          |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                     |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                    |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                            |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                            |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                            |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                          |\n| 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`                                                                                                                                                                                                                                                                                                                                                                                |\n| 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%\")`                                                                                                                                                                                                                                                                                                                                                                   |\n| 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\")`                                                                                                                                                                                                                                                                                                                                                                          |\n| data-jos_stagger_startVisible    | boolean \u0026 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)` \u0026 `(int: 0-10000 ms)`                                                                                                                                                                                                                                                                                                                                                            |\n| data-jos_stagger_once            | boolean       | null            | Set whether the element should animate only once or n count.                                                                | `true`, `false`, `int`                                                                                                                                                                                                                                                                                                                                                                                    |\n| 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`                                                                                                                                                                                                                                                                                                                                                                       |\n| data-jos_stagger_invoke          | string        | null            | Set the function to be invoked when the child stagger element is scrolled into view.                                        | `function`, `myCustomFunction`                                                                                                                                                                                                                                                                                                                                                                            |\n| 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`                                                                                                                                                                                                                                                                                                                                                                            |\n\n\u003c!--create a table for init, refresh, start, stop, destroy --\u003e\n\n## JOS Methods\n\n| Method    | Description              | Parameters                                                                                              |\n| --------- | ------------------------ | ------------------------------------------------------------------------------------------------------- |\n| init()    | Initialize/Reset JOS     | options = `{}` (refer [JOS.Init(options)]() )                                                           |\n| refresh() | Refresh JOS              | none                                                                                                    |\n| stop()    | Stop/Pause JOS           | state = (`0` - Stop at final state, `1` - Stop at initial state, `-1` - Pause at current state)         |\n| start()   | Start/Resume JOS Service | state = (`0` - Normal/Full start, `-1` - Resume from current state)                                     |\n| destroy() | Destroy JOS Instance     | state = (`0` - Destroy JOS instance excluding stylesheet, `1` - Full Destroy along with JOS-stylesheet) |\n\n## Bundling JOS\n\nOnce you are done and have finished developing a version of JOS, you can bundle it using the following command from project root :\n\n```bash\n# JOS-Animation-Library\n# |-dev\n# |-dist\n# |-bundler\n#   |-config\n#   |-export  \u003c-- Check this folder for the output files\n#     |-jos.css\n#     |-jos.js\n#     |...\n#   |-original\n#   |-bundle.sh  \u003c-- Run this file to bundle JOS\n# ...\n```\n\n```bash\n# Change/Move to bundler directory\ncd ./bundler\n\n# Bundle the project\nsh bundle.sh\n\n# View the output files\nls ./export\n```\n\n## Bugs and Issues\n\nMoved to [issues](https://github.com/jesvijonathan/JOS-Animation-Library/issues)\n\n## Contributing\n\n- Fork it from [main branch](https://github.com/jesvijonathan/JOS-Animation-Library)\n- Add your useful feature or fix a bug\n- Commit your changes\n- Create a pull request\n\nMaybe even [bundle it](#bundling-jos) and test it out before sharing it with the world ;\n\n## License\n\n- [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).\n\n## Used In\n\n- [CIT Takshashila 23](https://2023.cittakshashila.in)\n- [JOS Playground](https://jos-animation.vercel.app)\n- [JOS Demo (Old)](https://jesvijonathan.github.io/JOS-Animation-Library/)\n- [Jesvi Jonathan](https://jesvi.pythonanywhere.com)\n- [CSC](https://jesvijonathan.github.io/christhava-sangam-church-website/)\n- [Bitspace](https://bitspace-nextjs-jos.vercel.app)\n- [MS Agency](https://www.ms-agency.org/)\n- [AI Avenue](https://ai-avenue.netlify.app/)\n- [portfolio-glasc](https://portfolio-glasc.vercel.app/es/)\n- [resort-maquetacion](https://resort-maquetacion.vercel.app/)\n- [mystep](https://www.mystep-s.com/)\n- [kazifi-landing](https://kazifi-landing-preview.vercel.app)\n- [npas-technoverse](https://npas-technoverse.vercel.app/)\n- [Azzle AI](https://azzle.netlify.app/) \n  \n(\u003ci\u003ePing Me If you have a demo ;)\u003c/i\u003e)\n\n### Why use JOS ?\n\n- \u003cb\u003ePerformance\u003c/b\u003e, JOS has a implementation, different from others.\n- \u003cb\u003eEasy to use\u003c/b\u003e, you can use it in your projects with very minimal effort.\n- JOS is lightweight (\u003c2kb)\n- Customizable with own attributes and animation.\n- Open sourced and free to use\n\n## Credits\n\n\u003cdiv align=\"center\"\u003e\n\n#### \u003ci\u003e\u003cu\u003eThis project was solely developed by\u003c/i\u003e [Jesvi Jonathan](https://jesvi.pythonanywhere.com)\u003c/u\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesvijonathan%2Fjos-animation-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjesvijonathan%2Fjos-animation-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesvijonathan%2Fjos-animation-library/lists"}