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
data-jos_stagger=animation_name attribute to the parent element along with jos classdata-jos_stagger_anchor=true would auto asign id for parent element & use it as a anchor for child elements.data-jos_stagger_anchor=#id would use the given id as a anchor for child elements.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.jos.css dependencies from v0.9 onwards, it will be exported along with the script.
(no need to import css separately)
blur skew slant bar backdrop sepia etc 20+more, including playable animation..jos_animationinverse is same as jos_play for playable animation #30!important #21Full Changelog: https://github.com/jesvijonathan/JOS-Animation-Library/compare/v0.8.8...v0.9.2
jos.css dependencies from v0.9 onwards, it will be exported along with the script.
Full Changelog: https://github.com/jesvijonathan/JOS-Animation-Library/compare/v0.8.8...v0.9.0
jos-animation@beta or [email protected]
https://unpkg.com/jos-animation@beta or https://unpkg.com/[email protected]
are available for public use, will update soon.
This version of JOS is a rewritten version based on the previous release, with numerous optimizations and a wealth of new features. The code has undergone significant improvements, including modularization, aimed at enhancing performance and providing useful features. We strive to deliver better performance and enhanced functionality with every update of JOS.
Fixed RootMargin calc bug (10% 10% 10% 10% would now be interpreted as 10% 10% -10% -10% automatically).
Patched jos class forcing display:block;.
Added jos-no-transition class to disable transition (must be added to class list).
jos-animation now can be npm installed as a separate package.
jos-animation is now a separate package, which can be installed using npm i jos-animation.jos class now has lower priority over other user defined classes. (to ensure user can define their own classes without interference from jos)
!important to overidetransition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
Added new scrollCallback feature to get scroll progress.
scrollCallback is a function that is called on every scroll event.
returns element.jos as a parameter which contains all the jos data including scrollProgress.
an html element id is mandatory for this feature to work. So ensure that you have an id set for the element.
element.jos.windowScroll (gets scroll progress with respect to the entire window)element.jos.rootScroll (gets scroll progress with respect to the root (rootMargin) of the element)element.jos.scroll (same as rootScroll but values within 0 - 1)<!-- Scroller observer exmaple elements -->
<div id="elem1" class="jos" data-jos_scroll="your_callbackFunction">
Elemen 1
</div>
<div id="elem2" class="jos" data-jos_scroll="your_callbackFunction_2">
Elemnt 2
</div>
<div id="elem3" class="jos" data-jos_scroll="your_callbackFunction_3">
Elemnt 3
</div>
your_callbackFunction = (element) => {
console.log(element.id, element.jos.scrollProgress);
element.style.opacity = element.jos.scrollProgress;
};
your_callbackFunction_2 = (element) => {
let percent = element.jos.windowScroll * 100 + "%";
console.log(element.id, percent);
element.style.width = percent;
};
your_callbackFunction_3 = (element) => {
let deg = element.jos.rootScroll * 360 + "deg";
console.log(element.id, deg);
element.style.transform = deg;
};
scrollCallback is called on every scroll event, so it is recommended to use it only if required for better performance. (It is still better than other scroll event listeners as it uses IntersectionObserver API)
Scroll callback functions are called only if the element is in the viewport.
Custom Functions from demo/above example ( such as scrollWidth(), scrollOpacity(), scrollRotate(), etc) are not available with the package & are to be implemented by the user.
This feature leverages greater customizability & performance for the developer to implement complex animations without having to include other heavy resources.
many more that I can't remember, check em out... Full Changelog
Had to nuke recently releases v0.8.7, patched it up and released it as v0.8.8
This version of JOS is a rewrite, with the previous version as the base. Which maked it more optimized with tons of new features. Lots of improvements & bug fixes have been made to the code including modularization. I've made changes to the heart of the library. Like with every JOS update, we aim for better perfomance & useful features. :)
once, rootmargin, etc) [#16]data-jos_scrollDirection) [#13]refresh() property to force update JOS instance after a DOM change [#15]animationInverse attribute addedstatic jos class addedinit(), start(), stop(), refresh(), destroy()) & (removed restart(), use init() instead).refresh() method to refresh the observer during DOM changes (useful in SPA) & track explicit changes.dist/, you can use a specific version forever in your project, even if discontinued ;).v0.7-v0.8... (will be updated soon with a new demo-playground) Old Demo | Old v0.8 Demo
Full Changelog: https://github.com/jesvijonathan/JOS-Animation-Library/compare/v0.6...v0.7
Full Changelog: https://github.com/jesvijonathan/JOS-Animation-Library/compare/v0.5-beta-3...v0.6
Check commit history for more details
Full Changelog: https://github.com/jesvijonathan/JOS-Animation-Library/compare/v0.5-beta-3...v0.6
Check out the commit history for more details
jos_animation = "<animation_name>"
jos_duration = "<float(0-1) & int [1,2,3,4,5]>"
jos_once = "<boolean>"
jos_timing_function = "<same as native css timing function>"
jos_invoke = "<myCustomFunction>"
jos_invoke_out = "<myCustomFunction>"
jos_pow = "<float 0-1>"
jos_default_animation
jos_default_once
jos_default_intersectionRatio
jos_default_threshold
jos_default_duration
jos_default_type
jos_default_rootMargin
jos_rootMargin_top
jos_rootMargin_bottom
jos_default_timingFunction
'jos' class (configurable)Version 0.3 & below require embedding both, the js and css links in your project to get the library working.
(v0.5 & above require only js)