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

profile dashboard :

jos-animation-library's Issues

Oversized elements fluctuate for some animation

Describe the bug
when animation such as rotate & revolve from v0.7 is use on bigger elements, that cover up almost the entire viewport, the animation-in & animation-out starts to fluctuate..

Additional context
Not big deal but has to be sorted out

need the production version to warn the use of debug option in JOS

debug version in production package should give a warning message that suggests the use of jos.debug.js

jos_play support

yes, so you know that we have jos_animationInverse where you can give playable animatino classes for the element to animate, but... it would be nice if we a dedicated attribute that can used to add playable animation :

data-jos_play:"blink"

Nuxt usage exemple

Is your feature request related to a problem? Please describe.
Currently, when using the Vue exemple in a Nuxt project, I get this error:

Hydration class mismatch on <li class=​"jos jos-grow" data-v-inspector=​"pages/​index.vue:​48:​21" data-v-02281a80 data-jos_once=​"false" data-jos_animation=​"grow" data-jos_timingfunction=​"ease-in-out" data-jos_duration=​"0.4" data-jos_counter=​"0">​…​​

• rendered on server: class="jos jos-grow"
• expected on client: class="jos"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.

I don't understand why it says the server render jos jos-grow since clearly I created a client-only plugin jos-animation.client.js:

import JOS from "jos-animation";

export default defineNuxtPlugin(() => {
    console.log('client', process.client)
    console.log('server', process.server)
    JOS.init({
        animation: "grow",
        duration: 0.4,
        rootMargin: "10% 0% 40% 0%",
        debugMode: true,
    });
});

Describe the solution you'd like
It would be nice to have a Nuxt exemple, since there is a Next exemple.

Describe alternatives you've considered
I made a custom plugin, and I was able to bypass the virtual DOM error.
But I'm not 100% sure this is correct:

// plugins/jos-animation.client.js
import JOS from 'jos-animation/dist/jos.js';

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();
    JOS.init({
        passive: true,
        animation: 'fade',
        duration: 0.4,
        rootMargin: '20% 0% 30% 0%',
    });
    nuxtApp.vueApp.directive('jos', {
        mounted(el) {
            el.classList.add('jos');
            JOS.refresh();
        },
    });
    watch(
        () => router.currentRoute.value,
        () => {
            nextTick(() => {
                JOS.refresh();
            });
        }
    );
});

// plugins/jos-animation.server.js
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('jos', {});
});

// pages/index.vue
<ul class="projects-list">
    <li v-jos v-for="projet in projets">
      ...
    </li>
</ul>

nX scroll/view counter bug

A bug that arises when an element is triggered using anchor,

if two elements uses anchor that reference same element, then u can see the debugger iterate the counter in 2x times for each view,
and for 3 elements using same anchor element, 3x times....

not a big deal, and will not affect the project in any way but need to be sought through as once function relies on jos-count attribute of an element

rootmargin for individual element instead of global

there is rootmargin support but works globally as JOS is performance oriented...
will rework this on a new update...

Does not fully support frameworks | Read Explanation (Fixed)

I would call this a critical bug :

So, due to dynamic rendering of frameworks, the library is unable to observe jos elements after re-render, even JOS.init({}) / JOS.reset({}) would not work, for reason it is not able to get the elements from inner view/component

So what works in frameworks ? well, anything in main index html works properly but any jos element inside of a component does not get recognised.

It works with my custom framework tho ;)

EDIT : I have updated the Readme with latest details.. consider this thread as a archive do check the Readme and installation/setup for details on settings up JOS on Dynamic Frameworks

more animations

need more animation presets....

dedicated debug function for jos.debug.js

Current debug implementation is awesome, but it would be nice if there were a separate debug/logger function that takes care of it.. we might even port it to other projects if it were implemented that way...

Features for debug function... about that.. i have thought of it and can say its stable and has almost all the features required
So, dedicated debug function is the feature request for this issue thread..

Rootmargin with dynamic unit (px, %, vw, etc) support

Rootmargin currently works great but does not support unit anything other than %., also the limits have been capped to +0 to +100%
and auto converts any negative value to positive for safety..

A more dynamic rootmargin would be nice

scroll callback function & features

right... purpose of the project is to implement blazing fast animations without performance over head...

maybe a bit of scroll animation regards to continues polling/event listeners would be cool... might affect performance but will be enabled only if you use scroll percent/intersection & its features...

data-jos support for elements

It would be great if we could initialize JOS element using data-jos="true" instead of class="jos" attribute in an element.

cant import it as a package in frameworks

You cant import or install it as a package in frameworks, instead you will have to embed the jos .css & .js links into your project to get it working...

I'll update it soon to avoid confusion...

JOS animation template | example page

would like to have a webapp work ground for JOS which show cases all of its features and lets users fiddle around with its settings & see changes in real time.

anchor trigger direction

anchor | trigger direction based mech

try this code :

trigDirection(entry){
        var y = entry.boundingClientRect.y;
        if(self.scrollPos){
            if(self.scrollPos < y-1) {
                self.scrollDir = ["trig-scroll-down", "trig-scroll-up"];
            } else if(self.scrollPos > y+1) {
                self.scrollDir = ["trig-scroll-up", "trig-scroll-down"];
            }
        }
        self.scrollPos = y;
    }

"once" is not working

Describe the bug
My understanding is that if the parameter "once" is set, either globally or on an element, it should only be animated "in" once, then stay there.

To Reproduce
Steps to reproduce the behavior:

1. Load library etc.
2. Call JOS.init({once:true})

Expected behavior
Element animates in, then stays there.

Environment:

• OS: any
• Browser: chrome, safari, ...
• Version: pretty much latest
• jos version 0.7

Add scrollDirection right & left

Add scrollDirection right & left, currently has up and down

Transition Overide

Transition (Duration & Delay) Properties also affects other properties of current element.
Can be annoying especially when you apply jos delay of 2s and then it gets applied to other properties (hover transition effects, etc) ;(

Can be prevented by being specific on the transition properties to the element with higher priority (!important)

Regular ScrollProgress (0-1) limit fix

The purpose of of default scrollProgress is to provide a value between 0-1, and rootScrollProgress to provide a value between 0-1 (where it may go <0 & >1).
But currently the default scroll progress limit works only for the higher limit (1) and goes beyond <0 for the lower limit (0).

Disable Global variable (Cant Re-enable using Init)

Disable is a global variable and is intended as a check to whether enable jos on a application before initializing a instance, useful especially when there is a requirement to enable only in a mobile or specific platform. you can use lambda/pointer function to set true/false.

You can use Stop() and Start() instead... which also provides the option to re enable when required.

Improved Markup Doc

Need a improvised doc with the next-stable release

test Issue opened for sake of git community

Critical Issue - Standard Site Embedding JOS

Basically you can't embed use JOS like before, likely caused by the bundler during packaging,

Coz : should have exported as "JOS" instead of "t" and not have mangled the class

Fix : Will be fixed in a day or so...

Staggering JOS animation

Yes, you know when you are tired of manually adding repetitive animation to elements under a parent element.
It would be nice to add staggering animation, such that we can configure the animation we want and other settings such as

data-jos_stagger :

Animation
delay
duration
direction
anchor

etc

scrollProgress var(—prog) for dynamic non-js value update

We can use scrollProgress callBacks for manually handling the event but would be nice if there was support for dynamically changing
CSS var() properties so that we can add it to the elements css to update the style on scroll directly without having to create a handler for it.

• Default
  var(--jos_scroll)
  var(--jos_scroll_reverse)
• Conversions
  var(--jos_scroll_perc)
  var(--jos_scroll_deg)
• Others
  var(--jos_windowScroll)
  var(--jos_windowScroll_reverse)
  var(--jos_rootScroll_reverse)
  var(--jos_rootScroll)

Angular 16 No Animation

I can't get this to work in Angular 16. I've installed the package and followed the steps for angular install. When I load the page my element is hidden and when I inspect the element in browser I can see the JOS attributes get added. Also if I set debugMode to true in the initializer I can see the initial "JOS values" and "JOS Initialized" print in console so it seems to be setup right. But when I scroll down nothing ever appears. Not sure what I'm missing here.

Note:
When I'm importing
import JOS from "jos-animation";
I get "Could not find a declaration file for module" so I had to create my own module declaration to resolve that issue.

I'm then using OnInit and AfterViewChecked

ngOnInit(): void {
JOS.init({
animation: "grow",
debugMode: true,
duration: 0.4,
rootMargin: "10% 0% 40% 0%",
});
}

ngAfterViewChecked(): void {
JOS.refresh(); // For every update
}

Any idea what I could be missing or is this just not compatible with Angular 16?

Passing new options does not update (pre saved data clash)

So you have initialized a JOS instance, now you want to change the jos member's value.. now you are doomed coz idk why but for exmaple : startVisible attribute inside of JOS is jos_default_startVisiblr...

& On re initing the JOS instance the, the options that are not given/mentioned gets carried over from previous JOS instance/settings.
re init should reset the settings for options that are not passed to it explicitly .

StartVisible=False not applying on Re Initialisation

When re initializing JOS instance, the start visible if set to true works as required but if it is set to false, then it is not applied on re-init.
This works properly if initialized once, but is a bug when re initializing the Instance..

AOS Anchor

Is your feature request related to a problem? Please describe.
I'm always frustrated when I cannot use Anchor functionality on animation library

Describe the solution you'd like
I want to have something similar to data-aos-anchor in AOS https://github.com/michalsnik/aos#anchor

More Global Options Missing

invoke, invokeOut, scrollcallback, etc are missing in jos global options