https://www.acl.at/wp-content/themes/enfold-child/shortcodes/acl_p…/products-lifecycle.js?ver=8.1

1/**
2 * ACL Products Lifecycle - Desktop entrance animation + mobile animated dots
3 */
4(function() {
5    'use strict';
6
7    function initLifecycleReveal() {
8        const containers = document.querySelectorAll('.acl-lifecycle');
9        if (!containers.length) return;
10
11        if (!('IntersectionObserver' in window)) {
12            containers.forEach(el => el.classList.add('acl-lifecycle--in-view'));
13            return;
14        }
15
16        const observer = new IntersectionObserver((entries, obs) => {
17            entries.forEach(entry => {
18                if (entry.isIntersecting) {
19                    entry.target.classList.add('acl-lifecycle--in-view');
20                    obs.unobserve(entry.target);
21                }
22            });
23        }, { threshold: 0.2 });
24
25        containers.forEach(el => observer.observe(el));
26    }
27
28    function initLifecycleAnimation() {
29        // Only run on mobile
30        if (window.innerWidth > 767) return;
31
32        const badges = document.querySelectorAll('.acl-lifecycle__mobile-badge');
33        if (!badges.length) return;
34
35        const observer = new IntersectionObserver((entries) => {
36            entries.forEach(entry => {
37                if (entry.isIntersecting) {
38                    const badge = entry.target;
39                    const dot = badge.querySelector('.acl-lifecycle__dot');
40
41                    if (dot) {
42                        dot.classList.add('acl-dot-animate');
43
44                        // Add glow when dot reaches badge
45                        setTimeout(() => {
46                            badge.classList.add('acl-badge-glow');
47                        }, 700);
48
49                        // Remove glow after animation
50                        setTimeout(() => {
51                            badge.classList.remove('acl-badge-glow');
52                        }, 1200);
53                    }
54                }
55            });
56        }, { threshold: 0.5 });
57
58        badges.forEach(badge => observer.observe(badge));
59    }
60
61    // Initialize on DOM ready
62    if (document.readyState === 'loading') {
63        document.addEventListener('DOMContentLoaded', () => {
64            initLifecycleReveal();
65            initLifecycleAnimation();
66        });
67    } else {
68        initLifecycleReveal();
69        initLifecycleAnimation();
70    }
71
72    // Re-initialize mobile animation on window resize (in case switching to mobile view)
73    let resizeTimeout;
74    window.addEventListener('resize', function() {
75        clearTimeout(resizeTimeout);
76        resizeTimeout = setTimeout(initLifecycleAnimation, 250);
77    });
78})();