jshjohnson / animate Goto Github PK

Hey,
I was wondering. Could the offset logic also be reversed?
Now the logic is the number of the input is the percentage of which the element is visible in the viewport.
I would like to see a way to input a number of the percentage of which the element is inside the viewport. So, the other way around. I you would enter 0.1 it checks if the element, not matter the size of the element, had entered 10% of the viewport.

The reason is that, now it works nicely on desktop. But it becomes a mess sometimes on mobile. For example, I've got a block with 2 rows and 4 columns on desktop. But on mobile they are 8 rows of 1 column. In other words, a long-long block. Now you have to scroll, say, 50% of the element to be visible. Leaving the visitor puzzled why for four scrolls nothing shows.

I know I can disable the effect on mobile or even make a conditional second option with an offset of 0.05. But I think a trigger of the view percentage within the viewport would solve a lot for me.

Is there a way to set the animate time?

Override the plugin default reset value per element

For example:

    var animate = new Animate({
        offset: [0.5, 0.25],
    });

This would test to see whether at least 50% of the elements height was within the viewport as well as 25% of the elements width. Useful for horizontal scrolling pages.

If you have an element that scrolls with children that need to animate, it would be good if an element could be passed as the container instead of the document.

Hi,

thank you for this nice "plugin" - finally I found the one that works without jQuery (and works just as good).

I have my own asset loader and it dynamically loads JS and CSS. The problem is that DOMContentLoaded fires before Animate steps in so the setting "onLoad" is not working. Items are loading on scroll but items which are in viewport by default are not.

Is there a way to fix this? I modified animate.js to render() on window.load instead document.DOMContentLoaded so it is working fine now. Perhaps adding a new setting "onWindowLoad"?

For example:

const animate = new Animate('[data-animate'],{
    disableFilter: () => {
        if(isMobile) {
            return false;
        } else {
            return true;
        }
    }
});

I would like to run a function when element is in view port but the callbackOnAnimate only works if an animation has taken place. This would prevent me having to have further scroll events.

Animation not replaying if element have position absolute
Video

this._getElemOffset(el) returns undefined when data-animation-offset attribute is not added to the element

So when a container is in view for example, animations will trigger on each child with the correct target class/attribute.

animate.js would appear to be AMD compliant based on the code at the start of the file, however it doesn't seem to play nice with require.js

i've tried adding a shim to export "Animate" but that doesn't work

any clues?

Hi Josh,

Thanks for the require.js UMD wrapper fix. We're not out of the woods yet though. I've updated the test case:
Archive.zip

Cheers, Cam

I'm having problems with replaying the animation on element re-entry. Tried both the data-attribute way and the js-param way. Any leads on what I'm doing wrong?