Объединить слайд с расщеплением. js

Question

У меня есть слайд с прокруткой текста: https://codepen.io/df4fgg/pen/dyPBOeo

И я хочу объединить его с разделением. js, чтобы получить такой эффект: https://codepen.io/df4fgg/pen/OJPeXbZ

Предложения? Я не заставляю их работать вместе. Это мой код слайда

    function init() {
    const slides = document.querySelectorAll(".slide");
    const pages = document.querySelectorAll(".page");

    //Tracker
    let current = 0;
    let scrollSlide = 0;

    slides.forEach((slide, index) => {
    slide.addEventListener("click", function() {
      changeDots(this);
      nextSlide(index);
      scrollSlide = index;
    });
    });

    function nextSlide(pageNumber) {
    const nextPage = pages[pageNumber];
    const currentPage = pages[current];
    const nextText = nextPage.querySelector(".project-title-span");
    const currentText = currentPage.querySelector(".project-title-span");

    const tl = new TimelineMax({
      onStart: function() {
        slides.forEach(slide => {
          slide.style.pointerEvents = "none";
        });
      },
      onComplete: function() {
        slides.forEach(slide => {
          slide.style.pointerEvents = "all";
        });
      }
    }); 

    tl.fromTo(currentText, 1, {y: 0, opacity:1}, {y: 100, opacity:0})


      .fromTo(
        currentPage,
        .1,
        { opacity: 1, pointerEvents: "all" },
        { opacity: 0, pointerEvents: "none" }
      )

      .fromTo(
        nextPage,
        .1,
        { opacity: 0, pointerEvents: "none" },
        { opacity: 1, pointerEvents: "all" },
        "-=0.4"

      )
      .fromTo(nextText, .7, { y: 100, opacity: 0}, { y: 0, opacity:1}, "-=.7");
    current = pageNumber;
    }