JS Helper for InViewport & Tailwind animations

inviewtailwind.js

import inViewport from 'in-viewport';

/**
 * Use like this:
 * 
 * <div class="transition duration-500" data-inview-before="opacity-0" data-inview-after="opacity-100">Fade me in</div>
 */
document.addEventListener('DOMContentLoaded', () => {
    var inviewEls = document.querySelectorAll('[data-inview');
    
    if (!inviewEls || inviewEls.length === 0) {
      return false;
    }

    for (const el of inviewEls) {
        let beforeClasses = el.getAttribute('data-inview-before') ? el.getAttribute('data-inview-before').split(' ') : [];
        let afterClasses = el.getAttribute('data-inview-after') ? el.getAttribute('data-inview-after').split(' ') : [];

        el.classList.add(...beforeClasses);

        inViewport(el, () => {
            el.classList.remove(...beforeClasses)
            el.classList.add(...afterClasses);
        });
    }
});