Scroll-Driven Line & Text Reveal

JS

<!-- GSAP 3.15.0 & ScrollTrigger CDN -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  
  <script>
    // Responsive Stage Scaler: Perfect desktop landscape fit by default, portrait adjustment on mobile
    function resizeStage() {
      const stage = document.getElementById('main-stage');
      const vector1 = document.querySelector('#Vector_1');
      const scaleX = window.innerWidth / 1440;
      const scaleY = window.innerHeight / 1024;
      const isPortrait = window.innerHeight > window.innerWidth;

      if (isPortrait) {
        // Mobile / Portrait orientation mode
        const scale = Math.min(scaleX, scaleY);
        stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
        if (vector1) vector1.setAttribute('stroke-width', '1200');
      } else {
        // Desktop / Landscape orientation mode (Original Perfect Fit)
        const scale = Math.max(scaleX, scaleY);
        stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
        if (vector1) vector1.setAttribute('stroke-width', '400');
      }
    }
    window.addEventListener('resize', resizeStage);
    resizeStage();

    window.addEventListener("load", () => {
      gsap.registerPlugin(ScrollTrigger);

      const vector1 = document.querySelector("#Vector_1");
      const followLine = document.querySelector("#follow_line");

      const len1 = vector1.getTotalLength();
      const len2 = followLine.getTotalLength();

      const isPortrait = window.innerHeight > window.innerWidth;
      const scaleX = window.innerWidth / 1440;
      const scaleY = window.innerHeight / 1024;
      const stageScale = isPortrait ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);

      // Camera Start Offsets (Calculated so blue line start touches 15px from top edge on mobile screen)
      const initialScale = isPortrait ? 1.8 : 1.0;
      const startX = isPortrait ? 301 : 0;
      const startY = isPortrait ? (497 + (15 - window.innerHeight / 2) / stageScale) : 0;

      // Initial Stroke Setup
      gsap.set(vector1, {
        strokeDasharray: len1,
        strokeDashoffset: len1,
        opacity: 0,
        visibility: "visible"
      });

      gsap.set(followLine, {
        strokeDasharray: len2,
        strokeDashoffset: len2,
        visibility: "visible"
      });

      // Camera Pivot Setup
      gsap.set("#zoom_and_rotate", {
        svgOrigin: "527.748 532.174",
        x: 66.577,
        y: 15,
        scale: initialScale
      });

      gsap.set("#position", { x: startX, y: startY });

      // Text Group 2 Setup
      gsap.set("#that_elevates_or_buries", { x: 3, y: -50, opacity: 0 });
      gsap.set("#the_message_", { y: -130, opacity: 0 });

      const followProgress = { value: 0 };

      // Master Timeline
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: "#scroll-wrapper",
          start: "top top",
          end: "+=3500", // Responsive scroll length
          scrub: 0.8,    // Quick scrubbing response
          pin: true,
          anticipatePin: 1
        }
      });

      // 1. Black Line Wipe (Starts immediately on scroll at t = 0.05s)
      tl.to(vector1, { opacity: 1, duration: 0.05 }, 0.05)
        .to(vector1, {
          strokeDashoffset: 0,
          duration: 1.8,
          ease: "cubic-bezier(0.877, 0.071, 0.509, 1.001)"
        }, 0.05)
        .to(".viewport-wrapper", {
          backgroundColor: "#1E1E1E",
          duration: 1.2,
          ease: "power1.inOut"
        }, 0.05);

      // 2. Blue Line Draw WITH Camera Tip-Tracking
      tl.to(followProgress, {
        value: 1,
        duration: 3.0,
        ease: "cubic-bezier(0.5, 0, 0.5, 1)",
        onUpdate: () => {
          const p = followProgress.value;
          const currentLen = p * len2;

          // Trim/draw stroke
          gsap.set(followLine, { strokeDashoffset: len2 - currentLen });

          // Tip Tracking
          const tip = followLine.getPointAtLength(currentLen);
          const tipX = 527.748 - tip.x;
          const tipY = 532.174 - tip.y;

          const finalX = -0.495;
          const finalY = -637.971;

          if (p < 0.22) {
            // Smooth transition from top border start position into centered tip tracking
            const rawBlend = Math.min(1, Math.max(0, p / 0.22));
            const easeBlend = rawBlend * rawBlend * (3 - 2 * rawBlend); // Smoothstep

            const blendedX = gsap.utils.interpolate(startX, tipX, easeBlend);
            const blendedY = gsap.utils.interpolate(startY, tipY, easeBlend);

            gsap.set("#position", { x: blendedX, y: blendedY });
          } else if (p < 0.82) {
            // Centered tip tracking during main drawing phase
            gsap.set("#position", { x: tipX, y: tipY });
          } else {
            // Smooth lerp blend to final text position
            const rawBlend = Math.min(1, Math.max(0, (p - 0.82) / 0.18));
            const easeBlend = rawBlend * rawBlend * (3 - 2 * rawBlend); // Smoothstep

            const blendedX = gsap.utils.interpolate(tipX, finalX, easeBlend);
            const blendedY = gsap.utils.interpolate(tipY, finalY, easeBlend);

            gsap.set("#position", { x: blendedX, y: blendedY });
          }
        }
      }, 1.8);

      // 3. Zoom Camera Scale
      if (isPortrait) {
        tl.to("#zoom_and_rotate", { scale: 1.8, duration: 0.4 }, 1.8)
          .to("#zoom_and_rotate", { scale: 3.9, duration: 0.8, ease: "power2.inOut" }, 2.2)
          .to("#zoom_and_rotate", { scale: 1.9, duration: 1.6, ease: "power2.inOut" }, 3.0);
      } else {
        tl.to("#zoom_and_rotate", { scale: 1.0, duration: 0.4 }, 1.8)
          .to("#zoom_and_rotate", { scale: 1.9, duration: 0.6, ease: "power2.inOut" }, 2.2)
          .to("#zoom_and_rotate", { scale: 3.9, duration: 0.8, ease: "power2.inOut" }, 2.8)
          .to("#zoom_and_rotate", { scale: 1.9, duration: 1.2, ease: "power2.inOut" }, 3.6);
      }

      // 4. Text Group 2 Reveal
      tl.to("#that_elevates_or_buries", {
        y: 0,
        opacity: 1,
        duration: 0.8,
        ease: "cubic-bezier(0.42, 0, 0.004, 0.993)"
      }, 4.2);

      tl.to("#the_message_", {
        y: 0,
        opacity: 1,
        duration: 0.8,
        ease: "cubic-bezier(0.42, 0, 0.004, 0.993)"
      }, 4.4);

      ScrollTrigger.refresh();
    });
  </script>