Feat: Storyboard

assets/scss/_styles_project.scss

@@ -19,6 +19,7 @@
 @import "feedback";
 @import "section-transitions";
 @import "scroll-cube";
+@import "horizontal-scroling";
 
 body {
   background-color: $dark;

assets/scss/horizontal-scroling.scss

@@ -0,0 +1,103 @@
+.scroll-container {
+  display: flex;
+
+  .horizontal {
+    margin-top: 2rem;
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+  }
+}
+
+/* Base style for all screens */
+#Screen1, #Screen2, #Screen3, #Screen4 {
+  display: flex;
+  align-items: center; 
+  justify-content: center;
+}
+
+/* Caption Styling */
+.image-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0; /* Reset default figure margins */
+
+  figcaption {
+    font-weight: 500;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;        /* Optional: Makes uppercase more readable */
+    font-size: 0.6rem;
+  }
+}
+
+.image-group:has(#Relationship) {
+  margin-left: 18rem; /* Moves BOTH the tag and the image together */
+}
+
+/* SCREEN 1 POSITIONS */
+#DragDropGif { width: 500px; height: auto; }
+#Relationship { height: 400px; margin-left: 0; }
+
+/* SCREEN 2 POSITIONS */
+.image-group:has(#comment-dock) {
+  margin-left: -35rem;
+  margin-right: 2rem;
+  margin-bottom: -35rem;
+}
+#comment-dock { width: 500px; height: auto; }
+
+.image-group:has(#comment-section) {
+  margin-bottom: 10rem;
+}
+#comment-section { height: 400px; width: auto; }
+
+/* SCREEN 3 POSITIONS */
+.image-group:has(#deployment-pipeline) {
+  margin-left: -45rem;
+  margin-bottom: -30rem;
+}
+#deployment-pipeline { width: 500px; }
+
+.image-group:has(#validate) {
+  margin-left: 5rem;
+  margin-bottom: 20rem;
+}
+#validate { width: 600px; height: auto; }
+
+.image-group:has(#Deploy) {
+  margin-left: 15rem;
+  margin-bottom: -10rem;
+}
+#Deploy { width: 500px; height: auto; }
+
+/* SCREEN 4 POSITIONS */
+.image-group:has(#undeploy) {
+  margin-bottom: -10rem;
+}
+#undeploy { width: 500px; height: auto; }
+
+.image-group:has(#clonning) {
+  margin-left: 10rem;
+  margin-bottom: 10rem;
+}
+#clonning { width: 600px; height: auto; }
+
+.scroll-arrow {
+  position: absolute;
+  top: 50%;
+  left: 10%;   /* Adjust so it starts at your first image */
+  width: 80%;  /* Adjust so it reaches the second image */
+  height: 150px;
+  overflow: visible; /* Crucial so markers don't disappear */
+  z-index: 10;
+  pointer-events: none;
+}
+
+#arrow-path {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000; /* Hidden by default */
+}

layouts/index.html

@@ -2,6 +2,7 @@
 {{ partial "section/hero-glass.html" . }}
 {{ partial "section/customers.html" . }}
 {{ partial "section/hero.html" . }}
+{{ partial "section/horizonatal-aninamtion.html" . }}
 <!-- {{ partial "section/mode.html" . }} -->
 {{ partial "section/demo.html" . }}
 {{ partial "section/transform-workflows.html" . }}

layouts/partials/section/horizonatal-aninamtion.html

@@ -0,0 +1,78 @@
+<section class="scroll-container">
+  <div class="horizontal">
+    <div id="Screen1">
+      <figure class="image-group">
+        <figcaption>Drag & Drop</figcaption>
+        <img id="DragDropGif" src="/images/Storyboard/drag-drop.gif" />
+      </figure>
+      <svg class="scroll-arrow" viewBox="0 0 800 200" preserveAspectRatio="none">
+        <defs>
+          <marker id="diamond" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
+            <rect x="3" y="3" width="4" height="4" fill="#008778" stroke="white" stroke-width="0.5" transform="rotate(45 5 5)" />
+          </marker>
+
+          <marker id="arrowhead" markerWidth="7" markerHeight="7" refX="7" refY="3.5" orient="auto">
+            <path d="M0,0 L7,3.5 L0,7 Z" fill="#008778" stroke="white" stroke-width="0.5" />
+          </marker>
+        </defs>
+
+        <path 
+          id="arrow-path" 
+          d="M370,110 C450,110 450,40 550,40" 
+          fill="none" 
+          stroke="#008778" 
+          stroke-width="3"
+          marker-start="url(#diamond)" 
+          marker-end="url(#arrowhead)" 
+        />
+      </svg>
+      <figure class="image-group">
+        <figcaption>Relationship</figcaption>
+        <img id="Relationship" src="/images/Storyboard/Relationship.svg" />
+      </figure>
+    </div>
+  </div>
+
+  <div class="horizontal">
+    <div id="Screen2">
+      <figure class="image-group">
+        <figcaption>Dock</figcaption>
+        <img id="comment-dock" src="/images/Storyboard/comment-dock.png" />
+      </figure>
+      <figure class="image-group">
+        <figcaption>team interactions</figcaption>
+        <img id="comment-section" src="/images/Storyboard/kanvas-comment.png" />
+      </figure>
+    </div>
+  </div>
+
+  <div class="horizontal">
+    <div id="Screen3">
+      <figure class="image-group">
+        <figcaption>Deploying Designs</figcaption>
+        <img id="deployment-pipeline" src="/images/Storyboard/deployment_pipeline.png" />
+      </figure>
+      <figure class="image-group">
+        <figcaption>Validating Designs</figcaption>
+        <img id="validate" src="/images/Storyboard/performing-validation.png" />
+      </figure>
+      <figure class="image-group">
+        <figcaption>Deploying Designs</figcaption>
+        <img id="Deploy" src="/images/Storyboard/success-deploy.png" />
+      </figure>
+    </div>
+  </div>
+
+  <div class="horizontal">
+    <div id="Screen4">
+      <figure class="image-group">
+        <figcaption>Undeploying Designs</figcaption>
+        <img id="undeploy" src="/images/Storyboard/undeploy.png" />
+      </figure>
+      <figure class="image-group">
+        <figcaption>Cloning Design</figcaption>
+        <img id="clonning" src="/images/Storyboard/clone-design.gif" />
+      </figure>
+    </div>
+  </div>
+</section>

static/scripts/main.js

@@ -596,4 +596,53 @@ document.addEventListener("scroll", function () {
 document.getElementById("button-scroll-to-up").addEventListener("click", function (e) {
   e.preventDefault();
   window.scrollTo({ top: 0, behavior: "smooth" });
+});
+
+const contents = gsap.utils.toArray(".scroll-container .horizontal");
+gsap.to(contents, {
+    xPercent: -100 * (contents.length -1),
+    scrollTrigger: {
+        trigger: ".scroll-container",
+        pin: true,
+        scrub: 1,
+    },
+});
+
+const video = document.getElementById("DragDropVideo");
+
+document.addEventListener("visibilitychange", () => {
+  if (!document.hidden) {
+    // When user comes back to tab
+    video.currentTime = 0; // reset to start
+    video.play();         // play again
+  } else {
+    // Optional: pause when leaving tab
+    video.pause();
+  }
+});
+
+document.getElementById("button-scroll-to-up").addEventListener("click", function (e) {
+  e.preventDefault();
+  window.scrollTo({ top: 0, behavior: "smooth" });
+});
+
+const path = document.querySelector('#arrow-path');
+const length = path.getTotalLength();
+
+// Hide the path initially
+gsap.set(path, {
+  strokeDasharray: length,
+  strokeDashoffset: length
+});
+
+// Draw the path as you scroll
+gsap.to(path, {
+  strokeDashoffset: 0,
+  ease: "none",
+  scrollTrigger: {
+    trigger: "#Screen1", // Your container ID
+    start: "top 60%",    // Starts when container is 60% down the screen
+    end: "top 20%",      // Finishes as you scroll further
+    scrub: 1             // Smoothly follows the mouse scroll
+  }
 });