GSAP scroll trigger example - 5

GSAP Morph on Scroll
        
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>GSAP Morph on Scroll</title>
  <style>
    .main {height:200vh; margin:0; display:flex; align-items:center; justify-content:center;}
    .stage {width:400px;}

    .container {
      position: relative;
      width: 90vw;
      height: 90vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      border-radius: 9px;
    }

    #svg-stage {
      width:60%;
      max-height:60vh;
      max-width:500px;
      overflow:visible;
    }

    #gradient {
      height: 0;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="stage">
      <svg id="svg-stage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 240" fill="none">
        <path id="diamond" fill="url(#grad)" d="M80 140
           C40 140, 28 108, 44 86
           C36 64, 58 46, 80 54
           C92 36, 122 28, 146 44
           C170 26, 210 34, 226 60
           C254 60, 278 82, 272 108
           C308 112, 328 140, 300 150
           L96 150
           C96 132, 110 140, 80 140 Z" />
        <path id="lightning" fill="transparent" d="M200 140
           L170 140
           L190 116
           L158 116
           L204 64
           L180 96
           L210 96
           L186 140
           L200 140 Z" />
      </svg>
      <svg id="gradient" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
        <defs>
        <linearGradient id="grad" x1="0" y1="0" x2="99" y2="99" gradientUnits="userSpaceOnUse">
        <stop offset="0.2" stop-color="rgb(255, 135, 9)" />
        <stop offset="0.7" stop-color="rgb(247, 189, 248)" />
        </linearGradient>
        </defs>
      </svg>
    </div>
  </div>

  <!-- GSAP & plugins -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <!-- MorphSVGPlugin is a Club GreenSock plugin; if you have the file, load it here.
       For demo purposes you can use the public trial file or your registered copy. -->
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>

  <script>
    gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

    // target path to morph
    const target = document.querySelector('#diamond');
    const dest = document.querySelector('#lightning');

    // create tween controlled by scroll
    gsap.to(target, {
      duration: 1,
      morphSVG: dest,
      ease: "none",
      scrollTrigger: {
        trigger: ".stage",
        start: "top center",   // when stage top reaches center of viewport
        end: "bottom center",     // when stage bottom reaches top
        scrub: true,           // ties progress to scroll
        markers: true          // remove in production
      }
    });
  </script>
</body>
</html>