diff --git a/css/editor-style.css b/css/editor-style.css
index bfc8da2..bbe9a35 100644
--- a/css/editor-style.css
+++ b/css/editor-style.css
@@ -342,6 +342,10 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+}
+
 .alignfull {
   margin: 2rem calc(50% - 50vw) !important;
   max-width: 100vw !important;
diff --git a/js/app.js b/js/app.js
index 69df542..b327c99 100644
--- a/js/app.js
+++ b/js/app.js
@@ -37,5 +37,53 @@
   // resources/js/app.js
   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"
+    });
   });
 })();