http://kafconsultant.com/assets/js/animations.js

1(function () {
2  var scrollDir = 'down';
3  var lastScrollY = window.pageYOffset;
4
5  window.addEventListener('scroll', function () {
6    var y = window.pageYOffset;
7    scrollDir = y > lastScrollY ? 'down' : 'up';
8    lastScrollY = y;
9  }, { passive: true });
10
11  function makeObs(threshold, onEnter, onLeave) {
12    return new IntersectionObserver(function (entries) {
13      entries.forEach(function (e) {
14        if (e.isIntersecting && scrollDir === 'down') {
15          onEnter(e);
16        } else if (!e.isIntersecting && scrollDir === 'up' && onLeave) {
17          onLeave(e);
18        }
19      });
20    }, { threshold: threshold });
21  }
22
23  // Section box slide — enter on any direction (mobile-safe), reset only on scroll-up
24  var obsBox = new IntersectionObserver(function (entries) {
25    entries.forEach(function (e) {
26      if (e.isIntersecting) {
27        e.target.classList.add('box-in');
28      } else if (scrollDir === 'up') {
29        e.target.classList.remove('box-in');
30      }
31    });
32  }, { threshold: 0.1 });
33  document.querySelectorAll('.section-box:not(#whoWeAreBand):not(#fieldsSection)').forEach(function (el) { obsBox.observe(el); });
34
35  // Who We Are elements
36  var obsWB = makeObs(0.2,
37    function (e) { e.target.classList.add('visible'); },
38    function (e) { e.target.classList.remove('visible'); }
39  );
40  ['wb-eyebrow', 'wb-heading', 'wb-accent', 'wb-body'].forEach(function (id) {
41    var el = document.getElementById(id);
42    if (el) obsWB.observe(el);
43  });
44
45  var obsStats = makeObs(0.2,
46    function (e) {
47      var idx = ['wb-stat1', 'wb-stat2', 'wb-stat3'].indexOf(e.target.id);
48      setTimeout(function () { e.target.classList.add('visible'); }, idx * 130);
49    },
50    function (e) { e.target.classList.remove('visible'); }
51  );
52  ['wb-stat1', 'wb-stat2', 'wb-stat3'].forEach(function (id) {
53    var el = document.getElementById(id);
54    if (el) obsStats.observe(el);
55  });
56
57  // Founders
58  var obsF = makeObs(0.2,
59    function (e) { e.target.classList.add('visible'); },
60    function (e) { e.target.classList.remove('visible'); }
61  );
62  ['foundersPhoto', 'founderCard1', 'founderCard2', 'keyPersonnelPhoto'].forEach(function (id) {
63    var el = document.getElementById(id);
64    if (el) obsF.observe(el);
65  });
66  document.querySelectorAll('.founders-eyebrow,.founders-heading,.founders-ornament').forEach(function (el) { obsF.observe(el); });
67
68  // Service pills (stagger)
69  var obsSvc = makeObs(0.2,
70    function (e) {
71      var delay = parseInt(e.target.getAttribute('data-si') || 0) * 65;
72      setTimeout(function () { e.target.classList.add('visible'); }, delay);
73    },
74    function (e) { e.target.classList.remove('visible'); }
75  );
76  document.querySelectorAll('.service-pill').forEach(function (el) { obsSvc.observe(el); });
77
78  // Collaborator logos (stagger) — fire on any scroll direction so mobile always sees them
79  var collabGrid = document.querySelector('.collab-grid');
80  if (collabGrid) {
81    var collabShown = false;
82    new IntersectionObserver(function (entries) {
83      entries.forEach(function (e) {
84        if (e.isIntersecting && !collabShown) {
85          collabShown = true;
86          e.target.querySelectorAll('.collab-logo').forEach(function (logo, i) {
87            setTimeout(function () { logo.classList.add('visible'); }, i * 55);
88          });
89        }
90      });
91    }, { threshold: 0.05 }).observe(collabGrid);
92  }
93
94  // Footer slide-up
95  var footerInner = document.querySelector('.kaf-footer-inner');
96  if (footerInner) {
97    makeObs(0.2,
98      function () {
99        var els = document.querySelectorAll('.kaf-footer-brand, .kaf-footer-vdivider, .kaf-footer-col, .kaf-footer-bottom');
100        els.forEach(function (el, i) {
101          el.style.transitionDelay = (i * 0.08) + 's';
102          el.classList.add('footer-in');
103        });
104      },
105      function () {
106        var els = document.querySelectorAll('.kaf-footer-brand, .kaf-footer-vdivider, .kaf-footer-col, .kaf-footer-bottom');
107        els.forEach(function (el) {
108          el.style.transitionDelay = '0s';
109          el.classList.remove('footer-in');
110        });
111      }
112    ).observe(footerInner);
113  }
114
115  // Proximity glow: stats + footer social + footer links
116  document.addEventListener('mousemove', function (ev) {
117    document.querySelectorAll('.who-stat.visible').forEach(function (stat) {
118      var r = stat.getBoundingClientRect();
119      var dist = Math.hypot(ev.clientX - (r.left + r.width / 2), ev.clientY - (r.top + r.height / 2));
120      stat.classList.toggle('stat-near', dist < 130);
121    });
122    document.querySelectorAll('.kaf-footer-soc-btn').forEach(function (btn) {
123      var r = btn.getBoundingClientRect();
124      var dist = Math.hypot(ev.clientX - (r.left + r.width / 2), ev.clientY - (r.top + r.height / 2));
125      btn.classList.toggle('btn-near', dist < 28);
126    });
127    document.querySelectorAll('.kaf-footer-links a').forEach(function (link) {
128      var r = link.getBoundingClientRect();
129      var dist = Math.hypot(ev.clientX - (r.left + r.width / 2), ev.clientY - (r.top + r.height / 2));
130      link.classList.toggle('link-near', dist < 28);
131    });
132  });
133}());