https://www.gaygrit.com/assets/js/global.js?v=Xjiz4FeSloSRm0iR

1let targetX = window.innerWidth / 2;
2let targetY = window.innerHeight / 2;
3
4window.addEventListener('mousemove', (event) => {
5  targetX = event.clientX;
6  targetY = event.clientY;
7});
8
9gsap.registerPlugin(ScrollTrigger);
10
11function resetScrollTriggers(){
12  ScrollTrigger.refresh();
13}
14
15function getParameterByName(name, url) {
16    if (!url) url = window.location.href;
17    name = name.replace(/[\[\]]/g, "\\$&");
18    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
19        results = regex.exec(url);
20    if (!results) return null;
21    if (!results[2]) return '';
22    return decodeURIComponent(results[2].replace(/\+/g, " "));
23}
24
25function debounce(fn, delay) {
26    let timerId;
27    return function(...args) {
28      if (timerId) {
29        clearTimeout(timerId);
30      }
31      timerId = setTimeout(() => {
32        fn(...args);
33        timerId = null;
34      }, delay);
35    };
36}
37
38function setToggle() {
39  const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading");
40
41  const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
42  svgElement.setAttribute("viewBox", "0 0 18 10");
43  svgElement.setAttribute("fill", "none");
44  svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
45
46  const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
47  pathElement.setAttribute("d", "M16.2277 0.269316L17.641 1.68398L9.93832 9.38932C9.8149 9.51352 9.66813 9.61209 9.50646 9.67936C9.3448 9.74662 9.17142 9.78125 8.99632 9.78125C8.82122 9.78125 8.64785 9.74662 8.48618 9.67936C8.32451 9.61209 8.17775 9.51352 8.05432 9.38932L0.347657 1.68398L1.76099 0.270649L8.99432 7.50265L16.2277 0.269316Z");
48
49  svgElement.appendChild(pathElement);
50
51  document.querySelectorAll('.kg-toggle-card').forEach(card => {
52      card.querySelector('.kg-toggle-heading svg').remove();
53
54      const container = card.querySelector(".kg-toggle-card-icon");
55      const clonedSvg = svgElement.cloneNode(true);
56
57      container.appendChild(clonedSvg);
58  })
59  
60  const toggleFn = function(event) {
61      
62      const targetElement = event.target;
63      const parentElement = targetElement.closest('.kg-toggle-card');
64      var toggleState = parentElement.getAttribute("data-kg-toggle-state");
65      if (toggleState === 'close') {
66          parentElement.setAttribute('data-kg-toggle-state', 'open');
67      } else {
68          parentElement.setAttribute('data-kg-toggle-state', 'close');
69      }
70  };
71
72  for (let i = 0; i < toggleHeadingElements.length; i++) {
73      toggleHeadingElements[i].addEventListener('click', toggleFn, false);
74  }
75}
76
77function hexToRgba() {
78  let hex = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim();
79  hex = hex.replace('#', '');
80
81  const r = parseInt(hex.substring(0, 2), 16);
82  const g = parseInt(hex.substring(2, 4), 16);
83  const b = parseInt(hex.substring(4, 6), 16);
84
85  let opac_70 =  `rgba(${r}, ${g}, ${b}, 0.7)`;
86  let opac_40 =  `rgba(${r}, ${g}, ${b}, 0.4)`;
87
88  document.documentElement.style.setProperty('--text-color-70', opac_70);
89  document.documentElement.style.setProperty('--text-color-40', opac_40);
90}
91
92window.addEventListener('resize', debounce(() => {
93  ScrollTrigger.refresh();
94}, 800));
95
96function loadColors(colors, doc = document){
97    const data = colors;
98    if(!data) return;
99    const root = doc.documentElement;
100   
101    let splitArray = data.toString().replace(/,\s*/g, ',').split(',');
102    let colorVariables = ['text-color', 'background-color', 'overlay-text-color', 'overlay-button-text-color']
103
104    for(let i = 0; i < splitArray.length; i++){
105       if(i == 4) break;
106
107       root.style.setProperty(`--${colorVariables[i]}`, `${splitArray[i]}`);
108    }
109}
110
111function loadFonts(fonts, doc = document){
112    const data = fonts;
113    if(!data) return;
114
115    const ghostFonts = document.querySelector('link[href*="fonts.bunny.net/css"]');
116
117    if(ghostFonts) return;
118    
119    const root = document.documentElement;
120   
121    let splitArray = data.toString().replace(/,\s*/g, ',').split(',');
122
123    let googleFontsURL = `https://fonts.googleapis.com/css2?`;
124
125    for(let i = 0; i < splitArray.length; i++){
126       if(i == 2) break;
127
128       if(splitArray[i].toString() == 'Thunder'){
129        root.setAttribute('data-primary-font', `${splitArray[i].toString()}`);
130       }
131
132       root.style.setProperty(`--font${i+1}`, `'${splitArray[i].toString()}'`);
133
134       splitArray[i] = splitArray[i].replace(' ', '+');
135       googleFontsURL += `family=${splitArray[i]}:wght@300;400;500;600&`  
136    }
137
138    googleFontsURL += 'display=swap'
139
140    const linkElement = doc.createElement('link');
141    linkElement.rel = 'stylesheet';
142    linkElement.href = googleFontsURL;
143
144    doc.head.appendChild(linkElement);
145}
146
147function setLightense(){
148  window.addEventListener('DOMContentLoaded', function () {
149      const imagesInAnchors = document.querySelectorAll('.post-content a img, .post-content .kg-product-card img, .kg-signup-card img, .kg-header-card img');
150  

151      imagesInAnchors.forEach((img) => {
152          img.classList.add('no-lightense');  
153      });
154  
155      Lightense('.post-content img:not(.no-lightense)', {
156          background: 'var(--background-color)'
157      });
158  }, false);
159}
160
161function copyUrlToClipboard(parentElement){
162  let parent = document.querySelector(`.${parentElement}`)
163  let alert = parent.querySelector('.clipboard-alert');
164
165  parent.querySelector('.clipboard-link').addEventListener('click', () => {
166      navigator.clipboard.writeText(window.location.href);
167      alert.style.display = "block";
168
169      setTimeout(function () {
170          alert.style.display = "none";
171      }, 3000);
172  })
173}
174
175function scaleFontSizes(factor = 0.8) {
176  const textElements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a, li, button');
177  
178  textElements.forEach((el) => {
179    const fontSize = parseFloat(window.getComputedStyle(el).fontSize);
180  });
181}
182
183function setH2position() {
184  if(window.innerWidth <= 1080) return;
185
186  const navbar = document.querySelector('.navbar .wide-container');
187  const width = window.getComputedStyle(navbar).width;
188  document.documentElement.style.setProperty('--post-container-width', width);
189}
190
191function setVideo(){
192  let featuredImageWrapper = document.querySelector('.post-main-image-wrapper')
193  if(!featuredImageWrapper){
194    featuredImageWrapper = document.querySelector('.background-image');
195  }
196
197  const video = document.querySelector('.post-content .kg-video-card')
198
199  if(!video || !featuredImageWrapper) return;
200
201  featuredImageWrapper.querySelector('figure').remove();
202
203  let videoEl = video.querySelector('video');
204  videoEl.removeAttribute("controls");
205
206  videoEl.muted = true;
207
208  if(!videoEl.loop){
209    videoEl.play().catch(error => console.log('Autoplay prevented:', error));
210  }
211  
212  featuredImageWrapper.appendChild(videoEl);
213
214  video.remove();
215
216  const otherVideos = document.querySelectorAll(".post-content-inner-wrapper video");
217  otherVideos.forEach(video => {
218    video.style.display = "block";
219  })
220}
221
222function setVideoOnMediaBackground(){
223  document.querySelectorAll('.background-media').forEach(media => {
224    let slug = media.getAttribute('data-slug');
225    if(!slug) return;
226
227    let startUrl = window.location.origin + "/";
228    
229    let url = startUrl + `${slug}/`;
230
231    // Make the AJAX request
232    fetch(url)
233        .then(response => response.text())
234        .then(data => {
235            let parser = new DOMParser();
236            let html = parser.parseFromString(data, "text/html");
237            let hasVideo = html.querySelector("article").getAttribute('data-has-video');
238
239            if(hasVideo == "true"){
240              let featuredImageWrapper = media.querySelector('.background-image');
241
242              let video = html.querySelector('.post-content .kg-video-card');
243
244              if(!video || !featuredImageWrapper) return;
245
246              let videoEl = video.querySelector('video');
247
248              videoEl.muted = true;
249              if(!videoEl.loop){
250                videoEl.play().catch(error => console.log('Autoplay prevented:', error));
251              }
252              featuredImageWrapper.appendChild(videoEl);
253              video.remove();
254            }
255        })
256        .catch(error => {
257            console.error("Error loading more posts:", error);
258        });
259  })
260}
261
262let scrollPosition = 0;
263 
264function disableScrolling() {
265  scrollPosition = window.pageYOffset;
266  document.body.style.overflow = 'hidden';
267  document.body.style.position = 'fixed';
268  document.body.style.top = `-${scrollPosition}px`;
269  document.body.style.width = '100%';
270  /* document.documentElement.style.scrollBehavior = 'auto'; */
271   
272}
273   
274function enableScrolling(scrollToPosition = true) {
275  document.body.style.removeProperty('overflow');
276  document.body.style.removeProperty('position');
277  document.body.style.removeProperty('top');
278  document.body.style.removeProperty('width');
279  if(scrollToPosition){
280    window.scrollTo(0, scrollPosition);
281  }
282  /* document.documentElement.style.scrollBehavior = 'smooth'; */
283}
284
285function killScrollTrigger(selector) {

286  ScrollTrigger.getAll().forEach(trigger => {
287    if (trigger.trigger && trigger.trigger.matches(selector)) {
288      trigger.kill();
289    }
290  });
291}
292
293function creativeLatestPostsTrigger(){
294  let selector = '.creative-post-card, .all-posts-link';
295
296  gsap.registerPlugin(ScrollTrigger);
297
298  killScrollTrigger(selector);
299
300  document.querySelectorAll(selector).forEach(heading => {
301    let img = heading.querySelector('.creative-post-card-image-wrapper');
302    let headingInner = heading.querySelector('.creative-post-card-title');
303    let arrow = heading.querySelector('.arrow-link-button');
304
305    ScrollTrigger.matchMedia({
306      "(max-width: 1080px)": function () {
307        gsap.to(headingInner, {
308          scrollTrigger: {
309            trigger: heading,
310            start: "top center",
311            end: "bottom+=1 center",
312            toggleActions: "play reverse play reverse",
313            onEnter: () => {
314              onEnterAnimation();
315            },
316            onLeave: () => {
317              onLeaveAnimation();
318            },
319            onEnterBack: () => {
320              onEnterAnimation();
321            },
322            onLeaveBack: () => {
323              onLeaveAnimation();
324            }
325          }
326        });
327      },
328      "(min-width: 1081px)": function () {
329         removeStyles(); 
330      }
331    });
332
333    function removeStyles(){
334      gsap.set(headingInner, {
335        clearProps: "all"
336      });
337      if(img){
338        gsap.set(img, {
339          clearProps: "all"
340        });
341      }else{
342        gsap.set(arrow, {
343          clearProps: "all"
344        });
345      } 
346    }
347
348    function onEnterAnimation(){
349      headingInner.style.opacity = 1;
350      if(img){
351        img.style.opacity = 1;
352      }else{
353        arrow.style.transform = 'translateX(120%) scale(1)';
354      }   
355    }
356
357    function onLeaveAnimation(){
358      headingInner.style.opacity = 0.2;
359      if(img){
360        img.style.opacity = 0;
361      }else{
362        arrow.style.transform = 'translateX(120%) scale(0)';
363      }   
364    }
365  });
366}
367
368function setCreativePostImages() {
369  let selector = '.creative-post-card, .all-posts-link';
370
371  let getSelectors = document.querySelectorAll(selector);
372  if(getSelectors.length == 0) return;
373  
374  let currentX = targetX;
375  let currentY = targetY;
376  const ease = 0.11;
377
378  creativeLatestPostsTrigger();
379
380  const animate = () => {
381    currentX += (targetX - currentX) * ease;
382    currentY += (targetY - currentY) * ease;
383
384    document.querySelectorAll('.creative-post-card-image-container').forEach(img => {
385      img.style.transform = `translate(${currentX}px, ${currentY}px)`;
386    });
387
388    requestAnimationFrame(animate);
389  };
390
391  animate();
392}
393
394function setImageParallax() {
395  killScrollTrigger('.parallax-image');
396
397  document.querySelectorAll('.parallax-image img').forEach((image) => {
398    const container = image.closest('.parallax-image');
399
400    if(container.classList.contains('parallax-image-mobile') && window.innerWidth > 1080){
401      image.style.transform = 'translateX(0%)';
402      return;
403    }else if(container.classList.contains('parallax-image-desktop') && window.innerWidth <= 1080){
404      image.style.transform = 'translateX(0%)';
405      return;
406    }
407
408    gsap.fromTo(
409      image,
410      { yPercent: -5 },
411      {
412        yPercent: 5,
413        ease: 'none',
414        scrollTrigger: {
415          trigger: container,
416          start: 'top bottom',
417          end: 'bottom top',
418          scrub: true
419        },
420      }
421    );
422  });
423}
424
425function pageLoadAnimations() {
426  let easeInAnimations = document.querySelectorAll('.ease-in-animation');
427  let easeInAnimationsNoStagger = document.querySelectorAll('.ease-in-animation-no-stagger');
428  let opacityAnimations = document.querySelectorAll('.opacity-animation');
429  let imageAnimations = document.querySelector('.image-animation');
430
431  if(easeInAnimations.length > 0){
432    gsap.to(easeInAnimations, {
433      opacity: 1,
434      y: 0,
435      duration: 1.2,
436      delay: 0.25,
437      stagger: 0.03,

438      ease: 'expo.out',
439    });
440  }
441
442  if(easeInAnimationsNoStagger.length > 0){
443    
444    gsap.to(easeInAnimationsNoStagger, {
445      opacity: 1,
446      y: 0,
447      duration: 1.2,
448      delay: 0.2,
449      ease: 'expo.out',
450    });
451  }
452
453  if(opacityAnimations.length > 0){
454    gsap.to(opacityAnimations, {
455      opacity: 1,
456      duration: 1.2,
457      delay: 0.25,
458      stagger: 0.1,
459      ease: 'expo.out',
460    });
461  }
462
463  if(imageAnimations){
464    gsap.fromTo(
465      imageAnimations,
466      {
467          opacity: 0
468      },
469      {
470          opacity: 1,
471          duration: 0,
472          ease: 'power2.out',
473      }
474    );
475  }
476
477  //Adding a class here instead of animation because there was a problem with Lightense & this animation
478  let postContent = document.querySelector('.post-content');
479  if(postContent){
480      postContent.classList.add('visible-content')
481  }  
482}
483
484let lenis;
485
486function setSmoothScroll() {
487  if(window.safari !== undefined) return;
488
489  if (lenis) {
490    lenis.destroy();
491  }
492
493  let speed = 0.6;
494
495  lenis = new Lenis({
496    duration: speed,
497    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
498    direction: 'vertical',
499    gestureDirection: 'vertical',
500    smooth: true,
501    smoothTouch: false,
502    touchMultiplier: 2,
503    infinite: false
504  })
505
506  function raf(time) {
507      lenis.raf(time)
508      requestAnimationFrame(raf)
509  }
510
511  requestAnimationFrame(raf);
512}