HTMLify

document.addEventListener('DOMContentLoaded', () => {
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1 // Trigger when 10% of the element is visible
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            const element = entry.target;
            if (entry.isIntersecting) {
                // Add the 'visible' class to trigger the CSS transition
                element.classList.add('visible');
                // Stop observing once visible
                observer.unobserve(element);
            }
        });
    }, observerOptions);

    // Select all elements intended to be animated on scroll
    document.querySelectorAll('.fade-in-element').forEach(el => {
        observer.observe(el);
    });
});