How to fix the problem with generated <div> from scrollmagic with grid?

Question

I saw a tutorial on how to make a nice sticky scroll effect with CSS flex. So I wanted to give it a shot and tried this with CSS grid. but it won't work properly. I already fixed some major problems but I'm not very happy with the fixes. and there is still a major problem with the grid columns. there are 2 columns. the left is only one div and the right are a couple of divs. left should stick so that the right column is scrolling. but as soon as the scroll function triggers the right column changes the width. I can't find a solution here. the rest works but I'm sure there is a more elegant way to achieve what I want. I appreciate any help a lot! thanks!Here also a CodePen Link: https://codepen.io/roottjk/pen/QWLPwxZ

already tried to fix the width problem with some CSS width properties but that didn't work out at all.

HTML

    <div class="product-title">
        <h3>TEST</h3>
    </div>
  </div>
      <div class="sugar">

      </div>  
      <div class="private-label">


    </div>
      <div class="adventkalender">


    </div>
      <div class="sweets">

        </div>  

      <div class="ads">

        </div>

</section>

CSS

section.products {  
    display: grid;
    grid-template-areas:
    'title sugar'
    'title private-label'
    'title adventkalender'
    'title sweets'
    'title ads';
    margin-bottom: 100vh !important; 
}

.gridhuelle {
    display: grid;
    grid-area: title;
    background-color: transparent !important;
    z-index: -1;
    width: 100% !important;
}

.gridhuelle h3 {
    color: white;
    z-index: 10;
}

.product-title {  
    background-color: black !important;
    z-index: 1;
    height: 300vh;
    padding-top: 10.1875px !important;
}

.sugar {
    display: grid;
    grid-area: sugar;
    background-color: red;
    z-index: 5;
    padding: 1em;
    margin: 0 !important;   
}

.private-label {
    display: grid;
    grid-area: private-label;
    background-color: green;
    padding: 1em;
}

.adventkalender {
    display: grid;
    grid-area: adventkalender;
    background-color: blue;
    padding: 1em;
}

.sweets {
    display: grid;
    grid-area: sweets;
    background-color: yellow;
    padding: 1em;
}

.ads {
    display: grid;
    grid-area: ads;
    background-color: orange;
    padding: 1em;
}

JS

function splitScroll() {
   const controller = new ScrollMagic.Controller();
   new ScrollMagic.Scene({
       duration: '200%',
       triggerElement: '.product-title',
       triggerHook: 0
   })
   .setPin('.product-title')
   .addIndicators()
   .addTo(controller);
}
splitScroll();

Answer 1

This is because of scroll. it's adding inline css and overriding position that's why it's moving:

I have added width: 100% and position: sticky to class .product-title .product-title { width: 100%!important; position: sticky!important; }

/* Parallax Products */
function splitScroll() {
  const controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({
      duration: '200%',
      triggerElement: '.product-title',
      triggerHook: 0
    })
    .setPin('.product-title')
    .addIndicators()
    .addTo(controller);
}

splitScroll();

/* PRODUCTS */

section.products {
  display: grid;
  grid-template-areas: 'title sugar' 'title private-label' 'title adventkalender' 'title sweets' 'title ads';
  margin-bottom: 100vh !important;
}

.gridhuelle {
  display: grid;
  grid-area: title;
  background-color: transparent !important;
  z-index: -1;
  width: 100% !important;
}

.gridhuelle h3 {
  color: white;
  z-index: 10;
}

.product-title {
  background-color: black !important;
  z-index: 1;
  height: 300vh;
  padding-top: 10.1875px !important;
  width: 100%!important;
  position: sticky!important;
}

.sugar {
  display: grid;
  grid-area: sugar;
  background-color: red;
  z-index: 5;
  padding: 1em;
  margin: 0 !important;
}

.private-label {
  display: grid;
  grid-area: private-label;
  background-color: green;
  padding: 1em;
}

.adventkalender {
  display: grid;
  grid-area: adventkalender;
  background-color: blue;
  padding: 1em;
}

.sweets {
  display: grid;
  grid-area: sweets;
  background-color: yellow;
  padding: 1em;
}

.ads {
  display: grid;
  grid-area: ads;
  background-color: orange;
  padding: 1em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Products Test Page</title>
  <link rel="stylesheet" href="products.css" class="ref">
</head>

<body>


  <!-- PRODUCTS START-->
  <header class="productsite">
    <h2>Products</h2>
  </header>


  <!-- START Grid Section -->
  <section class="products">
    <div class="gridhuelle">

      <div class="product-title">
        <h3>TEST</h3>
      </div>
    </div>
    <div class="sugar">

    </div>
    <div class="private-label">


    </div>
    <div class="adventkalender">


    </div>
    <div class="sweets">

    </div>

    <div class="ads">

    </div>

  </section>
  <!-- END GRID SECTION -->
  <!-- PRODUCTS END-->

  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
  <script src="main.js"></script>
</body>

</html>