23s2s

✏️ Editing: animations-interactivity.js

(function() {
    'use strict';

// Prevent execution if config is missing
    if (!window.ExtendableAnimations) {
        return;
    }

const speeds = Object.freeze({
        slow: 1,
        medium: 0.6,
        fast: 0.45
    });
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    let currentSpeed = config.speed || 'medium';
    let currentType = config.type || 'none';
    let currentMap = config.map || {};
    const initialType = config.type || 'none'; // Track if PHP added FOUC CSS

if (observer) {
            observer.disconnect();
        }

observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const element = entry.target;
                    const animationType = element.dataset.extAnimate;
                    
                    if (animationType) {
                        element.classList.add(`ext-animated-${animationType}`);
                    }
                }
            });
        }, {
            threshold: 0.01,
            rootMargin: '0px'
        });

trackedElements = [];
        
        Object.keys(currentMap).forEach(selector => {
            try {
                const elements = document.querySelectorAll(selector);
                const animationType = currentMap[selector];
                
                // Group elements by parent for proper stagger
                const elementsByParent = new Map();
                elements.forEach(element => {
                    if (element.classList.contains('ext-animate--off')) {
                        return;
                    }
                    const parent = element.parentElement;
                    if (!elementsByParent.has(parent)) {
                        elementsByParent.set(parent, []);
                    }
                    elementsByParent.get(parent).push(element);
                });
                
                // Apply stagger within each parent group
                elementsByParent.forEach(siblingElements => {
                    siblingElements.forEach((element, index) => {
                        element.classList.add('ext-animate');
                        element.dataset.extAnimate = animationType;
                        
                        const delay = Math.min(index * staggerDelay, maxStagger);
                        const duration = speeds[currentSpeed];
                        
                        element.style.animationDuration = `${duration}s`;
                        element.style.animationDelay = `${delay}s`;
                        
                        // Clear stacking context after animation completes
                        element.addEventListener('animationend', () => {
                            element.dataset.extAnimated = 'true';
                        }, { once: true });
                        
                        // Elements already in viewport (like headers) - trigger immediately
                        const rect = element.getBoundingClientRect();
                        if (rect.top < window.innerHeight && rect.bottom > 0) {
                            requestAnimationFrame(() => {
                                element.classList.add(`ext-animated-${animationType}`);
                            });
                        }
                        
                        observer.observe(element);
                        trackedElements.push(element);
                    });
                });
            } catch (e) {}
        });
    }

window.ExtendableAnimations = window.ExtendableAnimations || {};
    window.ExtendableAnimations.reset = resetAnimations;
    window.ExtendableAnimations.setSpeed = setSpeed;
    window.ExtendableAnimations.setType = setType;

if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initAnimations);
    } else {
        initAnimations();
    }
})();

Sid Gifari From Gifari Industries - BD Cyber Security Team