<div id="smooth-wrapper">
  <div id="smooth-content">
    <div class="wrapper">
      <div class="content gradient-blue"></div>
    </div>
  </div>
</div>
.wrapper {
  width: 100%;
  height: 100vh;
  background-color: #333;
}

.content {
  width: 100%;
  height: 100vh;
  clip-path: polygon(45% 45%, 55% 45%, 55% 55%, 45% 55%);
}
View Compiled 
console.clear();

gsap.registerPlugin(ScrollSmoother, ScrollTrigger);

ScrollSmoother.create({
  smooth: 1,
  effects: true
});

gsap
  .timeline({
    scrollTrigger: {
      trigger: ".wrapper",
      start: "top top",
      end: "+=100%",
      pin: true,
      scrub: true
    }
  })
  .to(".content", {
    clipPath: "polygon(0% 45%, 100% 45%, 100% 55%, 0% 55%)"
  })
  .to(".content", {
    clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
  });
View Compiled

External CSS

  1. https://codepen.io/GreenSock/pen/xxmzBrw.css

External JavaScript

  1. https://unpkg.com/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
  3. https://assets.codepen.io/16327/ScrollSmoother.min.js