Rebuild - Init

Author: tomasmrazek92

src/about.js

@@ -1,55 +1,39 @@
-const swiper = new Swiper('.about-team_slider', {
-  // Optional parameters
-  slidesPerView: 'auto',
-  spaceBetween: 20,
-  // Navigation arrows
-  navigation: {
-    nextEl: '.swiper-arrow.next',
-    prevEl: '.swiper-arrow.prev',
-  },
-});
-
-const swiperModal = new Swiper('.about-team_modal-slider .max-width-full', {
-  // Optional parameters
-  slidesPerView: 1,
-  noSwiping: false,
-  navigation: {
-    prevEl: '.about-team-modal-arrow.prev',
-    nextEl: '.about-team-modal-arrow.next',
-  },
-  breakpoints: {
-    0: {
-      direction: 'horizontal',
-      spaceBetween: 8,
-      autoHeight: true,
-    },
-    992: {
-      direction: 'vertical',
-      spaceBetween: 20,
-      autoHeight: false,
-    },
-  },
-});
+gsap.registerPlugin(ScrollTrigger, SplitText);
 
-$('.about-team_card').on('click', function () {
-  revealModal($(this).closest('.w-dyn-item').index());
-});
+function initHighlightText() {
+  let splitHeadingTargets = document.querySelectorAll('[data-highlight-text]');
+  splitHeadingTargets.forEach((heading) => {
+    const scrollStart = heading.getAttribute('data-highlight-scroll-start') || 'top 70%';
+    const scrollEnd = heading.getAttribute('data-highlight-scroll-end') || 'center 40%';
+    const fadedValue = heading.getAttribute('data-highlight-fade') || 0.2; // Opacity of letter
+    const staggerValue = heading.getAttribute('data-highlight-stagger') || 0.1; // Smoother reveal
 
-$('.blog-detail_hero-list-item')
-  .not('[fs-cmsstatic-element]')
-  .on('click', function () {
-    revealModal($(this).closest('.w-dyn-item').index());
+    new SplitText(heading, {
+      type: 'words, chars',
+      autoSplit: true,
+      onSplit(self) {
+        let ctx = gsap.context(() => {
+          let tl = gsap.timeline({
+            scrollTrigger: {
+              scrub: true,
+              trigger: heading,
+              start: scrollStart,
+              end: scrollEnd,
+            },
+          });
+          tl.from(self.chars, {
+            autoAlpha: fadedValue,
+            stagger: staggerValue,
+            ease: 'linear',
+          });
+        });
+        return ctx; // return our animations so GSAP can clean them up when onSplit fires
+      },
+    });
   });
-
-$('[data-modal="hide"]').on('click', hideModal);
-
-function revealModal(index) {
-  swiperModal.slideTo(index);
-  $('.about-team_modal').fadeIn();
-  $('html, body').addClass('overflow-hidden');
 }
 
-function hideModal() {
-  $('.about-team_modal').fadeOut();
-  $('html, body').removeClass('overflow-hidden');
-}
+// Initialize Highlight Text on Scroll
+document.addEventListener('DOMContentLoaded', () => {
+  initHighlightText();
+});

src/anchor-tags.js

@@ -0,0 +1,29 @@
+export function installAndScrollAnchorTags() {
+  // Automatically adds IDs to every heading so we can anchor link automatically.
+  document.querySelectorAll('h1,h2,h3').forEach((el) => {
+    const id = el.innerText
+      .toLowerCase()
+      .split(' ')
+      .map((a) => a.replace(/\W/g, ''))
+      .join('-');
+    el.style.position = 'relative';
+    const anchorEl = document.createElement('div');
+
+    anchorEl.style.position = 'absolute';
+    anchorEl.style.top = '-90px';
+    anchorEl.style.left = '0';
+
+    anchorEl.id = id;
+    el.appendChild(anchorEl);
+
+    // If the hash is set, make sure to scroll to it.
+    requestAnimationFrame(() => {
+      if (window.location.hash) {
+        const hashEl = document.getElementById(window.location.hash.replace('#', ''));
+        window.scrollTo({
+          top: hashEl.getBoundingClientRect().top + window.scrollY,
+        });
+      }
+    }, 1);
+  });
+}

src/animations.js

@@ -0,0 +1,33 @@
+function animateLines() {
+  $('[data-line-dividers]').each(function () {
+    let wrap = $(this);
+    let lines = wrap.find('.line-divider');
+
+    lines.each(function (index) {
+      let scaleStart = $(this).attr('data-start-scale') || 0;
+      let scaleEnd = $(this).attr('data-end-scale') || 0.2;
+
+      gsap.set($(this), {
+        scaleY: scaleStart,
+        transformOrigin: 'bottom',
+      });
+
+      gsap.to($(this), {
+        scaleY: scaleEnd,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: wrap,
+          start: 'top bottom',
+          end: 'bottom top',
+          scrub: 1,
+        },
+      });
+    });
+  });
+}
+
+animateLines();
+
+export function initAnims() {
+  animateLines();
+}