FEATURE Introducing animations

resources/js/animation/animations.js

@@ -0,0 +1,38 @@
+const tl = gsap.timeline({
+  defaults: {
+    duration: 1,
+    y: -14,
+    opacity: 0,
+    ease: 'power4.out',
+  },
+});
+
+function pageHeaderAnimationInit() {
+  const contentElements = document.querySelectorAll(
+    '.page-header .page-header__content *',
+  );
+  const cover = document.querySelector('.page-header__image');
+
+  if (contentElements.length > 0) {
+    tl.from(contentElements, {}, '<');
+  }
+  if (cover) {
+    tl.from(cover, { delay: 0.2 }, '<');
+  }
+}
+
+function chapterSectionAnimationInit() {
+  const contentElements = document.querySelectorAll(
+    '.wp-block-carhop-blocks-chapter-section .chapter-section__content *',
+  );
+  const cover = document.querySelector('.chapter-section__cover');
+
+  if (contentElements.length > 0) {
+    tl.from(contentElements, {}, '<');
+  }
+  if (cover) {
+    tl.from(cover, { delay: 0.2 }, '<');
+  }
+}
+
+export { pageHeaderAnimationInit, chapterSectionAnimationInit };

resources/js/app.ts

@@ -7,6 +7,11 @@ import { searchBarInit } from './search-bar';
 import singlesInit from './singles/singles';
 import archivesInit from './archives/archives';
 import handleCiteButton from './singles/cite-button';
+import titlesInit from './titles';
+import {
+  pageHeaderAnimationInit,
+  chapterSectionAnimationInit,
+} from './animation/animations';
 
 window.addEventListener('load', function () {
   menuInit();
@@ -18,4 +23,7 @@ window.addEventListener('load', function () {
   singlesInit();
   archivesInit();
   handleCiteButton();
+  titlesInit();
+  pageHeaderAnimationInit();
+  chapterSectionAnimationInit();
 });

resources/js/titles.js

@@ -0,0 +1,15 @@
+// GSAP Text Animations
+
+export default function titlesInit() {
+  const homeTitle = document.querySelector('body.home h1');
+  let split = SplitText.create(homeTitle, { type: 'words, lines' });
+
+  // now animate the characters in a staggered fashion
+  gsap.from(split.lines, {
+    duration: 2,
+    y: 40, // animate from 100px below
+    autoAlpha: 0, // fade in from opacity: 0 and visibility: hidden
+    stagger: 0.2, // 0.05 seconds between each
+    ease: 'power4.out',
+  });
+}