From 2d501df3780fb40fa17a56d94a683cc60417fd00 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Wed, 13 May 2026 18:01:11 +0200
Subject: [PATCH] FEATURE Introducing animations

---
 resources/js/animation/animations.js | 38 ++++++++++++++++++++++++++++
 resources/js/app.ts                  |  8 ++++++
 resources/js/titles.js               | 15 +++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 resources/js/animation/animations.js
 create mode 100644 resources/js/titles.js

diff --git a/resources/js/animation/animations.js b/resources/js/animation/animations.js
new file mode 100644
index 0000000..f8b0758
--- /dev/null
+++ b/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 };
diff --git a/resources/js/app.ts b/resources/js/app.ts
index b6cf640..53c5d15 100644
--- a/resources/js/app.ts
+++ b/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();
 });
diff --git a/resources/js/titles.js b/resources/js/titles.js
new file mode 100644
index 0000000..cfc9612
--- /dev/null
+++ b/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',
+  });
+}