<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;
}
}
View Compiled
// 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 ) );
}
});