Scroll Effect Nope

by pphheerroonn

HTML

<div class="header">
  <div class="titleContainer">
    <h1>Main Title</h1>
    <div class="backgroundImage"></div>
  </div>
</div>
<div class="content">
  <h2>Section 2 Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel interdum orci. Vestibulum porta mi urna, sit amet finibus velit tempor a. Integer eu orci ut odio dapibus rutrum. Integer nec aliquam libero. Quisque orci eros, tempus quis ligula eu, mollis interdum erat. Praesent pretium diam et nunc porta, eu commodo sapien pellentesque. In hac habitasse platea dictumst. </p>
</div>

CSS

.header {
  height: 100vh;
  width: 100vw;
}

.titleContainer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: white;
  font-size: 66px;
  font-weight: bold;
  opacity: var(--opacity);
  transform: scale(var(--scale));
  transition: transform 0.1s linear, opacity 0.1s inear;
  will-change: transform, opacity;
}

.backgroundImage {
  position: absolute;
  width: 100vw;
  height: 100vh;
  
  background-image: url("https://images.unsplash.com/photo-1554967769-1f961137e9c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=934&q=80");
  background-image: url("https://www.compub.com/media/wysiwyg/Productpages/urbanista_epp.jpg");
  background-size: cover;
  background-position: center 50%; 
  
  -webkit-filter: blur(var(--blur));
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  filter: blur(var(--blur));
  z-index: -1;
  transform: scale(var(--scale));
  will-change: filter, transform;
}

.hidden {
  visibility: hidden;
}

.content {
  height: 80vh;
  width: 100vw;
  position: relative;
}

h2 {
  color: white;
  text-align: center;
  font-size: 56px;
  font-weight: bold;
  opacity: var(--opacity2);
  transform: scale(var(--scale2));
  will-change: opacity, transform;
  margin-bottom: 5px;
  transition: transform .1s linear, opacity .1s inear;
}

p {
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  font-size: 24px;
  opacity: var(--opacity3);
  will-change: opacity;
}

@media only screen and (max-width: 450px) {
  h1 {
    font-size: 40px;
    padding-left: 20px;
    padding-right: 20px;
  } 
  
  h2 {
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  p {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

JavaScript

var headerHeight = $(".header").height();
var marginTop = headerHeight.toString() + "px";
var startPoint = headerHeight / 2;
startPoint = startPoint.toString() + "px";
$(".content").css("margin-top", marginTop);

const titleScaleDown = basicScroll.create({
   elem: document.querySelector('h1'),
   from: '0',
   to: marginTop,
   direct: true,
   props: {
      '--scale': {
         from: '1',
         to: '0.9'
      }
   }
});

const titleFadeOut = basicScroll.create({
   elem: document.querySelector('h1'),
   from: startPoint,
   to: marginTop,
   direct: true,
   props: {
      '--opacity': {
         from: '1',
         to: '0'
      }
   }
});

const backgroundFadeOut = basicScroll.create({
   elem: document.querySelector('.backgroundImage'),
   from: '0',
   to: marginTop,
   direct: true,
   props: {
      '--blur': {
         from: '10px',
         to: '40px'
      },
      '--scale': {
         from: '1.2',
         to: '1.5'
      }
   }
});

const fadeIn = basicScroll.create({
   elem: document.querySelector('h2'),
   from: 'top-bottom',
   to: 'middle-middle',
   direct: true,
   props: {
      '--opacity2': {
         from: '0',
         to: '1'
      },
     '--scale2': {
       from: '0.95',
       to: '1'
     }
   }
});

const fadeInText = basicScroll.create({
   elem: document.querySelector('p'),
   from: 'top-bottom',
   to: 'middle-middle',
   direct: true,
   props: {
      '--opacity3': {
         from: '0',
         to: '1',
         timing: 'quartIn'
      }
   }
});

fadeInText.start();
fadeIn.start();
titleScaleDown.start();
titleFadeOut.start();
backgroundFadeOut.start();

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  if (scroll > headerHeight) {
    $("h1").addClass("hidden");
  } else if (scroll < headerHeight) {
    $("h1").removeClass("hidden");
  }
});