https://gamalogic.com/wp-content/themes/gamalogic/assets/js/animations/webhook-api.js

1/* Animation Module: webhook-api */
2export function init(container) {
3  if (!container) return;
4(function(){
5  'use strict';
6  var whaEntered = false;
7
8  var PATHS_DESKTOP = {
9    fwd1: { pts: [[10,110],[140,110]], color: '#062617' },
10    rev1: { pts: [[140,130],[10,130]], color: '#4CAF50' },
11    fwd2: { pts: [[160,110],[290,110]], color: '#062617' },
12    rev2: { pts: [[290,130],[160,130]], color: '#4CAF50' },
13  };
14  var PATHS_MOBILE = {
15    fwd1: { pts: [[110,10],[110,110]], color: '#062617' },
16    rev1: { pts: [[130,10],[130,110]], color: '#4CAF50' },
17    fwd2: { pts: [[110,130],[110,230]], color: '#062617' },
18    rev2: { pts: [[130,230],[130,130]], color: '#4CAF50' },
19  };
20  function getPATHS(){ return window.innerWidth <= 480 ? PATHS_MOBILE : PATHS_DESKTOP; }
21  var PATHS = getPATHS();
22  var DUR = 700;
23
24  function lerp(a,b,t){ return a+(b-a)*t; }
25  function ease(t){ return t<0.5?2*t*t:-1+(4-2*t)*t; }
26  function getPt(pts,t){ return [lerp(pts[0][0],pts[1][0],t), lerp(pts[0][1],pts[1][1],t)]; }
27
28  function spawnDot(pd, delay){
29    setTimeout(function(){
30      var g = document.getElementById('whaDots'); if(!g) return;
31      function mk(r,op){
32        var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
33        c.setAttribute('r',r); c.setAttribute('fill',pd.color);
34        c.setAttribute('opacity',op); g.appendChild(c); return c;
35      }
36      var d=mk(4,1), t1=mk(2.5,0.35);
37      var start=null;
38      requestAnimationFrame(function frame(ts){
39        if(!start) start=ts;
40        var raw=Math.min((ts-start)/DUR,1), e=ease(raw);
41        var pos=getPt(pd.pts,e);
42        d.setAttribute('cx',pos[0]); d.setAttribute('cy',pos[1]);
43        var pt=getPt(pd.pts,Math.max(0,e-0.1));
44        t1.setAttribute('cx',pt[0]); t1.setAttribute('cy',pt[1]);
45        if(raw<1){ requestAnimationFrame(frame); }
46        else { d.remove(); t1.remove(); }
47      });
48    }, delay);
49  }
50
51  function runCycle(){
52    var p = getPATHS();
53    spawnDot(p.fwd1, 0);
54    spawnDot(p.rev1, 0);
55    spawnDot(p.fwd2, 80);
56    spawnDot(p.rev2, 80);
57    setTimeout(runCycle, 1800);
58  }
59
60  function initAnimate(){
61    var isMobile = window.innerWidth <= 480;
62    document.getElementById('whaHeader').classList.add('wha-in');
63    /* update SVG paths for mobile vertical layout */
64    if(isMobile){
65      var svg = document.getElementById('whaSvg');
66      if(svg){
67        svg.setAttribute('viewBox','0 0 240 240');
68        svg.style.display = 'block';
69      }
70      var pm = PATHS_MOBILE;
71      var pathEls = [
72        {id:'whaP0', d:'M110,10 L110,110'},
73        {id:'whaP1', d:'M130,10 L130,110'},
74        {id:'whaP2', d:'M110,130 L110,230'},
75        {id:'whaP3', d:'M130,130 L130,230'},
76      ];
77      pathEls.forEach(function(p){ var el=document.getElementById(p.id); if(el) el.setAttribute('d',p.d); });
78    }
79    ['whaP0','whaP1','whaP2','whaP3'].forEach(function(id,i){
80      setTimeout(function(){ document.getElementById(id).classList.add('wha-path-in'); }, 300+i*80);
81    });
82    setTimeout(function(){ document.getElementById('whaWebhook').classList.add('wha-in'); }, 500);
83    setTimeout(function(){ document.getElementById('whaGama').classList.add('wha-in'); }, 650);
84    setTimeout(function(){ document.getElementById('whaStatus').classList.add('wha-in'); }, 800);
85    setTimeout(runCycle, 1000);
86  }
87
88  var obs = new IntersectionObserver(function(entries){
89    if(entries[0].isIntersecting && !whaEntered){
90      whaEntered = true;
91      initAnimate();
92    }
93  }, {threshold: 0.2});
94
95  var wrap = document.querySelector('.wha-wrap');
96  if(wrap) obs.observe(wrap);
97})();
98}