.panel.panel1
 .inner
 %h1 <span>maybe</span><span>you should</span><span>consider</span><span>scrolling</span>
.panel.panel2
 .inner
 %h1 <span>powered by</span><span>svg filters</span><span>& gsap</span><span>& tornis</span>

%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
 %defs
  %filter#wave1
   %feturbulence#turbulence{:basefrequency => "0.003 0.004", :numoctaves => "1", :result => "noise", :seed => "13"}
   %fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "0"}
   
%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
 %defs
  %filter#wave2
   %feturbulence#turbulence{:basefrequency => "0.004 0.004", :numoctaves => "1", :result => "noise", :seed => "13"}
   %fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "0"}
View Compiled

body{
  background:#222;
  svg{
    position:absolute;
    width:0;
    height:0;
  }
  .panel{
    display:flex;
    position:relative;
    justify-content:center;
    align-items:center;
    height:100vh;
    width:100vw;
    margin:0px;
    overflow:hidden;
    background:#222;
    .inner{
      position:absolute;
      width:100%;
      height:100%;
      background:radial-gradient(circle at center, transparent, transparent 250px, #222 250px, #222 260px, #E4CB07 260px);
      z-index:9;
    }
    h1{
      filter:url(#wave1);
      margin:0;
      transform-origin:bottom;
      text-align:center;
      line-height:0.85;
      padding:200px;
      color:#fff;
      font-family:"Shrikhand";
      position:absolute;
      font-weight:100;
      span{
        display:inline-block;
        clear:both;
        width:100%;
        font-size:5.5vmin;
        transform:translateX(1.5vmin);
        margin-top:-0.5vmin;
        margin-bottom:0.5vmin;
        &:nth-of-type(even){
          font-size:6.5vmin;
          transform:translateX(-1.5vmin);
        }
      }
    }
    &.panel2{
      background:#fff;
      .inner{
        background:radial-gradient(circle at center, transparent, transparent 250px, #FFF 250px, #FFF 260px, #E4CB07 260px);
      }
      h1{
        filter:url(#wave2);
        transform-origin:top;
        color:#222;
      }
    }
  }
}
View Compiled
const { watchViewport } = tornis;
$text2 = ('.panel2 h1');
$text1 = ('.panel1 h1');
$inner1 = ('.panel1 .inner');
$inner2 = ('.panel2 .inner');
$filter1 = $("#wave1 #displacement");
$filter2 = $("#wave2 #displacement");
$distance = $('.panel2 h1').offset().top,
$window = $(window);
$elHeight = ($('.panel2 h1').height() * 2);



const updateValues = ({ scroll }) => {

  if (scroll.changed) {
    $scaleOffset = (scroll.top / 3);
    $scaleOffset2 = (($scaleOffset/100) + 1);
    $scaleOffset3 = (((window.innerHeight + 0) - scroll.top) / 3);
    $scaleOffset4 = (($scaleOffset3/100) + 1);
    TweenMax.to($filter1, 0, { ease: Expo.easeOut, attr: { scale: $scaleOffset } });
    TweenMax.to($inner1, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "scale("+$scaleOffset2+") translateY(" + ($scaleOffset * -0.75) + "px)" } })
    TweenMax.to($text1, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "translateX(" + ($scaleOffset / -2) + "px) translateY(" + ($scaleOffset * 0.75) + "px) scaleY("+$scaleOffset2+")" } });
    if ( $window.scrollTop() < ($distance - ((window.innerHeight/2) - $elHeight)) ) {
      TweenMax.to($filter2, 0, { ease: Expo.easeOut, attr: { scale: $scaleOffset3 } });
      TweenMax.to($inner2, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "scale("+$scaleOffset4+") translateY(" + ($scaleOffset3 * 0.75) + "px)" } })
      TweenMax.to($text2, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "translateX(" + ($scaleOffset3 / -2) + "px) translateY(" + ($scaleOffset3 * 0.75) + "px) scaleY("+$scaleOffset4+")" } });
    }else{
      TweenMax.to($filter2, 2, { ease: Elastic.easeOut.config(1, 0.3), attr: { scale: 0 } });
      TweenMax.to($text2, 2, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "translateX(0) translateY(0) scaleY(1)" } });
    }
  }
};

watchViewport(updateValues);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://unpkg.com/tornis@0.1.3/dist/tornis.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js