Improve the README.md

[vaibhav111tandon]

Add the usage of classes through JavaScript and jQuery

[akhilkh2000]

Can you explain this issue in detail?

[vaibhav111tandon]

You can give a short jquery or javascript snippet to use these animation classes. A short demo type...

[gurman8571]

still open???

[chimok]

Hello @vaibhav111tandon,

i could add my snippet from #34 which is a frequently use for such animations

[chimok]

@vaibhav111tandon This is my javascript how i add css classes when the element is in viewport

/**
 * Add a css class when the element appears in viewport
 *
 * @param {IntersectionObserverEntry[]} entries
 */
function func2(entries) {
    entries.forEach(entry => {
        const elem = entry.target;
        if (entry.isIntersecting) {
            elem.classList.add('in-viewport');
            observer.unobserve(elem);
        }
    })
}

const observer = new IntersectionObserver(func2, {
    root: null,
    rootMargin: '0px',
    threshold: .5
});

/**
 * Set or remove a css class when the element is in viewport
 *
 * @param {string} selector
 */
export function inViewport(selector = '.if-viewport') {
    document.querySelectorAll(selector).forEach(elem => {
        observer.observe(elem);
    });
}

The HTML looks like:

<div class="if-viewport vov fade-in-up">
  This is some content with a fade-in-up animation when if appears in viewport
</div>

The javascript adds the in-viewport css class if element is in viewport.

The issue I have, the initial state before it is visible in the viewport should be opacity:0 and placed with a bottom offset. Are there CSS classes for it already?