I've been scanning the web for a simple solution possibly without using a 3rd party library.

Consider the following section in a web page with other sections above and below it:

    <section class="about">
  <div class="about-title">
    <h1>About Me</h1>
  </div>
  <div class="about-pages">
    <div>
      <h2>Project 1</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
        excepturi assumenda neque ipsum vel vitae, aliquid minima, totam
        inventore provident aspernatur pariatur nulla voluptatibus possimus,
        quas atque quis doloremque! Unde explicabo doloremque autem ipsa
        provident voluptates mollitia tenetur alias natus, iste libero
        dolore dicta minus nostrum nihil! Dicta, vel alias.
      </p>
    </div>
    <div>
      <h2>Project 2</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
        excepturi assumenda neque ipsum vel vitae, aliquid minima, totam
        inventore provident aspernatur pariatur nulla voluptatibus possimus,
        quas atque quis doloremque! Unde explicabo doloremque autem ipsa
        provident voluptates mollitia tenetur alias natus, iste libero
        dolore dicta minus nostrum nihil! Dicta, vel alias.
      </p>
    </div>
    <div>
      <h2>Project 3</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
        excepturi assumenda neque ipsum vel vitae, aliquid minima, totam
        inventore provident aspernatur pariatur nulla voluptatibus possimus,
        quas atque quis doloremque! Unde explicabo doloremque autem ipsa
        provident voluptates mollitia tenetur alias natus, iste libero
        dolore dicta minus nostrum nihil! Dicta, vel alias.
      </p>
    </div>
  </div>
</section>

I would like to scroll the page and once I get to this section, I would like the DIV with class about-pages page to scroll to its end and then the whole page continues to scroll - a parallax effect.

I found this a demo that uses the ScrollMagic library but the trouble is that the example sets pre-defined height for the DIV about-pages. In my real scenario this DIV's height is not known as it can vary overtime.

Is there a pure CSS solution to this? If not, does anybody know how to adapt the ScrollMagic (not my preferred way), to achieve this?

Here is the example I found on YouTube with ScrollMagic but I could not adapt it to cases where the RHS DIV's height is not known.

Thanks for any feed backs.