From 45c065c4a46f1c3b74f124d760c1558b79f1b7d2 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Fri, 23 May 2025 18:03:18 +0200
Subject: [PATCH] FEAT add GSAP animations for shapes on scroll in branding
 section

---
 resources/js/app.js | 52 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/resources/js/app.js b/resources/js/app.js
index 47ede7c..276cf53 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,4 +2,56 @@ import menuInit from './header';
 
 window.addEventListener('load', function () {
   menuInit();
+
+  gsap.to('.shape.square', {
+    scrollTrigger: {
+      trigger: '.branding',
+      start: 'top bottom',
+      end: 'bottom top',
+      markers: true,
+      scrub: 0.2,
+    },
+    y: '300%',
+    duration: 2,
+    ease: 'none',
+  });
+
+  gsap.to('.shape.circle', {
+    scrollTrigger: {
+      trigger: '.branding',
+      start: 'top bottom',
+      end: 'bottom top',
+      markers: true,
+      scrub: 0.4,
+    },
+    y: '175%',
+    duration: 2,
+    ease: 'none',
+  });
+
+  gsap.to('.shape.rectangle-rotated', {
+    scrollTrigger: {
+      trigger: '.branding',
+      start: 'top bottom',
+      end: 'bottom top',
+      markers: true,
+      scrub: 0.6,
+    },
+    y: '340%',
+    duration: 2,
+    ease: 'none',
+  });
+
+  gsap.to('.shape.rectangle-vertical', {
+    scrollTrigger: {
+      trigger: '.branding',
+      start: 'top bottom',
+      end: 'bottom top',
+      markers: true,
+      scrub: 0.3,
+    },
+    y: '150%',
+    duration: 2,
+    ease: 'none',
+  });
 });