<section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 520">
	<polygon points="0,0 0,520 1120,520 1120,420" id= "morph" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 520" preserveAspectRatio="none">
	<polygon fill="#fff" points="0,520 0,520 1120,520 1120,520" id="triangle" />
</svg>
</section>
<section>
  <div class="container">
    <h2><b>Content-driven digital marketing</b> that connects smart companies with their ideal customers.</h2>
  </div>
</section>

body {
  background: #fff;
  height: 200vh;
  margin: 0;
}

svg {
  position: absolute;
  bottom: -1px;
}

#morph {
  visibility: hidden;
}

section:first-child {
  position: relative;
  background: url('https://images.unsplash.com/photo-1581790061118-2cd9a40164b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

.container {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

h2 {
  font-weight: normal;
  font-family: "sofia-pro",sans-serif;
  font-size: 50px;
  line-height: 60px;
  margin-top: 150px;
  letter-spacing: -0.01em;
  color: #222222;
  max-width: 1150px;
  position: relative;
  
  b {
    font-weight: bold;
  }
}

// Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle> or <rect> or <ellipse> or <line>:

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");


// the morph animation - paused
action = new TimelineMax({paused:true})
  .to('#triangle',3,{morphSVG: '#morph', ease: Power0.easeNone, repeat:false, yoyo:false})
  .to('h2',3, {top: -250 }, '-=3');

// The height of the pseudoWindow (= scroll distance) defines the duration / speed of the animation - just test alternatives

TweenLite.set('svg', {transformOrigin: 'bottom'});


// Tween the progress of the paused timeline ACTION with the scroll progress

$(window).scroll( function(){
  var scrollTop = $(window).scrollTop();
  var docHeight = $(document).height();
  var winHeight = $(window).height();
  if( scrollTop >= 0){
    action.progress( scrollTop / ( docHeight - winHeight ) );
  }
});