Author: | jesvijonathan |
---|---|
Views Total: | 128 views |
Official Page: | Go to website |
Last Update: | May 13, 2023 |
License: | MIT |
Preview:

Description:
JOS is an open-source, easy-to-use, blazing-fast Animate On Scroll library for adding scroll animation effects to elements when they appear in the viewport.
It includes preset animations like fade, slide, zoom, and flip as well as options for building custom scroll effects. The library also allows you to build your own scroll-invoked functions for a truly personalized experience.
How to use it:
1. Add the JOS’ JavaScript and Stylesheet in the document.
<link id="jos-stylesheet" rel="stylesheet" href="/dist/jos.css"> <script src="/dist/jos.min.js"></script>
<!-- Or From a CDN --> <link id="jos-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.min.js"></script>
2. Initialize the JOS with default options.
JOS.init();
3. Add the "jos"
CSS class to the target element and specify the animation type using the data-jos_animation
attribute. All available animation types:
- 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
- spin-right
- revolve
- revolve-right
- stretch
- stretch-vertical
- my-custom-animation-function
<div class="jos" data-jos_animation="fade"> Fade Animation On Scroll </div>
4. All available HTML data
attribute to config the scroll animation.
<div class="jos" data-jos_animation="fade" data-jos-once="false" data-jos_duration="0.8" data-jos_delay="0" data-jos_timing-function="ease-in-out" data-jos_invoke="myCustomFunction" data-jos_invoke_out="myCustomFunction_onExit" ></div>
5. You can also pass the options through JavaScript during init.
JOS.init({ // Disable JOS gloabaly debugMode: false, // Set the passive option for the scroll event listener passive: false, // Disable JOS after first animation once: false, // Animation type animation: "fade", // Timing function // 'ease', 'ease-in', 'ease-out', 'ease-in-out' // 'linear', 'step-start', 'step-end', 'steps()' // 'cubic-bezier()', 'my-custom-timing-function' timingFunction: "ease-in-out", // The threshold for the element to be visible // 0-1 threshold: 0, // Set gloabal | Values : 0-1 // The delay for the animation to start // 0,1,2,3,4,5 delay: 0, // The duration for the animation playback // float : 0-1 & int : 0,1,2,3,4,5 duration: 0.8, // Set by which percent the element should animate out // Recommended value between 10% to -30% rootMargin_top: "0%", // Set by which percent the element should animate out // Recommended value between -10% to -60% rootMargin_bottom: "-50%", // Set the root margin for the element to be visible // Values : _% _% _% _% (automaticaly set) rootMargin: "0% 0% -50% 0%", // Set the intersection ratio between which the element should be visible // 0-1 (automaticaly set) intersectionRatio: 0.4, // Set whether elements should animate out while scrolling past them animate_out: false, // Set global the debounce time/rate for listening to scroll events // 0-1000 debounce: 0, });
6. API methods.
JOS.init(); JOS.start(); JOS.stop(); JOS.destroy(); JOS.restart();
Changelog:
v0.7 (05/13/2023)
- Implemented Anchor Mechanism for animations
- Added more animation (spin, revlolve, rotate, stretch, etc)
- Better delivery and performance