JOS : Animation Library (v0.9.2)

Whats New :

• Added new Stagger Animations #25

  • Add the data-jos_stagger=animation_name attribute to the parent element along with jos class
  • data-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.
  • 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.
  • learn more about staggering animation & its options here

• Added new Random/Range function

  • JOS.rand() gives a random float number withing lim 0-1
  • JOS.rand(["slide","fade","grow","skew"]) gives a random animation
  • JOS.rand(5) gives a random int number
  • JOS.rand(5.0) gives a random float number of range 5.0
  • Check more about rand() function here

• Animation updates

  • Updated stylesheet jos.css dependencies from v0.9 onwards, it will be exported along with the script.
    (no need to import css separately)
  • Added more new animations, including playable animation
    blur skew slant bar backdrop sepia etc 20+more, including playable animation..
  • Implemented dynamic duration & delay that can handle any given value & has no limits
  • jos_animationinverse is same as jos_play for playable animation #30

• Bundler updates

  • New bundler for bundling & packaging the library. Learn more here
  • Clones working dev directory files before making changes
  • Minifies, Mangles, Injects stylesheet & other required steps
  • Batch & Bash support (Recommended : Use linux/git bash for bundler.sh over bundler.ps1)
  • Updated folder hierarchy

• Comprehensive enhancements:

  • Auto import functionality
  • Improved import/exports #38
  • Added more global params #28
  • Fixed issue where jos could not find jos.css that occurs due to network issue.
  • Included playable animation in jos.css/jos.js & added new jos.min.css for a minified version where you can develop fully custom animation and features.
  • Transition properties are now by default given higher priority, if required to overide, use !important #21

• JOS-Playground 🔗

  • Updated to latest v0.9.2
  • Added examples using all features of JOS
  • Bugs Fixes

• Other updates & bugs fixes

  • Fixed scrollProgress range limit bug #23
  • Updated doc, almost every JOS option is documented and available in docs #31
  • & many more that I forgot...

• Links to check out :

  • https://jos-animation.vercel.app/
  • https://jos-animation.vercel.app/Playground
  • https://www.npmjs.com/package/jos-animation
  • https://www.youtube.com/watch?v=_hlvc5oq9Fw

Full Changelog: v0.8.8...v0.9.2

JOS : Animation Library (v0.9.0)

Whats New :

• Updated stylesheet jos.css dependencies from v0.9 onwards, it will be exported along with the script.
• New bundler for bundling & packaging the library.
• Improved import/exports.
• Fixed issue where jos could not find jos.css that occurs due to network issue.
• Included playable animation in jos.css/jos.js & added new jos.min.css for a minified version where you can develop fully custom animation and features.
• Slight performance bump
• Updated doc
• & many more...

Full Changelog: v0.8.8...v0.9.0

As of [28/10/2023] :

• npm Install : jos-animation@beta or [email protected]
• embed link : https://unpkg.com/jos-animation@beta or https://unpkg.com/[email protected]

are available for public use, will update soon.

Links to check out :

• https://jos-animation.vercel.app/
• https://jos-animation.vercel.app/Playground
• https://www.npmjs.com/package/jos-animation
• https://www.youtube.com/watch?v=_hlvc5oq9Fw

JOS : Animation Library (v0.8.8)

Change Log

Description -

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.

[v0.8.8] - 18/07/2023 -

• 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.
  • still needs work to be done on the npm auto import, but it is functional.

• jos class now has lower priority over other user defined classes. (to ensure user can define their own classes without interference from jos)

  • due use !important to overide
  • define transition property specifically, exmaple : transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  • You have to manually set transition property for custom animation classes, this is to ensure that jos transition property does not interfere with other transition properties for the element.

• 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)

  Exmaple -

  <!-- 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;
  };

  Note -

  • 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 is to ensure full customizability. (refer to the demo/example for implementation)

  • 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

JOS : Animation Library (v0.8.1)

Changelog [v0.8.1] (07/07/2023)

Description -

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. :)

Changes -

• LOTS & LOTS of Optimizations & Fixes
• Fixed Global Params (once, rootmargin, etc) [#16]
• Scroll-Direction based animation support (data-jos_scrollDirection) [#13]
• Induvidual rootMargin & observer properties support [#12]
• New debugger function which is easier to maintain during releases, (Old implementation of debugger was cool but was cost heavy) [#10]
• Fixed & added framework support, make use of refresh() property to force update JOS instance after a DOM change [#15]
• StartVisible parameter support
• Support for playable animation using simple css classes
• animationInverse attribute added
• Fixed JOS class clash with induvidual element classes
• static jos class added
• Reworked scroll logic, more optimized
• Updated JOS methods with newer features (init(), start(), stop(), refresh(), destroy()) & (removed restart(), use init() instead).
• Reworked on JOS state management & callback functions, which have been improved
• Added refresh() method to refresh the observer during DOM changes (useful in SPA) & track explicit changes.
• More new animations added
• Delay attribute unfunctional bug fixed
• Used better semantics & Prettified code
• Asorted bug fixes & improvements
• All previous cdn releases of JOS dist are now available in dist/, you can use a specific version forever in your project, even if discontinued ;).
• Updated Demo page which uses all test featuers of JOS v0.7-v0.8... (will be updated soon with a new demo-playground) Old Demo | Old v0.8 Demo
• Modularized code which makes it easier to maintain & is more optimized
• Updated Docs
• & Lots more that I can't remember...

For more info, Check out the Full Changelog

JOS : Animation Library (v0.7)

Full Changelog: v0.6...v0.7

Main changes in v0.7 :

• Added policies and guidelines required for opensource, security and contribution
• Implemented Anchor Mechanism for animations
• Packaged better
• Added more animation (spin, revlolve, rotate, stretch, etc)
• Better delivery and performance
• folder heirarchy reworked
• Many more that I forgot...

JOS : Animation Library (v0.6)

Full Changelog: v0.5-beta-3...v0.6

Check commit history for more details

JOS : Animation Library (v0.6 beta)

Full Changelog: v0.5-beta-3...v0.6

Check out the commit history for more details

JOS : Animation Library (v0.5)

Full Changelog: v0.3-beta-3...v0.5-beta-3

JOS : Animation Library (v0.3)

Changelog | First Release :

Description -

• An animation package that can be used to add instant-complex animation to all elements in your website making it look beuatiful and professional.

More animations -

• fade
• fade-right
• fade-left
• fade-up
• fade-down
• zoom-in
• zoom-in-left
• zoom-in-up
• zoom-in-down
• zoom-out
• zoom-out-right
• zoom-out-left
• zoom-out-up
• zoom-out-down
• flip-right
• flip-left
• flip-up
• flip-down

Improved performance & features -

• Passive listeners
• Dynamic animation_invoker (was hardcoded earlier)
• Supports JOS attributes :
  • 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>"
• Support JOS init params :
  • 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
• Added 'options' params with observer
• Applies defaults on just adding 'jos' class (configurable)
• Added CDN / Embed links for embedding this library
• Debuggers on by default (beta/canary release)

Docs

• Git Pages Active
• wroking demo of the library
• mobile view support
• added code snippet on hover for every animation block
• reworked folder heirarchy
• added lovely message in my code for developers
• Basic installation guide in Readme.md

Note :

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)