Как заставить gsap адекватно перемещаться по ярлыкам?

Question

[DaBags]

Есть сайт с анимацией на gsap. При прокрутке используется плагин ScrollTrigger и пока скроллишь на протяжении всего времени проиходит анимация.

Необходимо установить ярлыки на временной шкале, чтоб как только человек начнет скроллить срабатывал триггер и автоматически докручивал до следующего ярлыка. В документации нашел параметр snap со значением labelsDirectional. То что нужно, но не совсем.

На каждый блок создается по 1-5 функций которые анимируют страницу (внутри ф-ции своя временная линия), после чего все это собирается через метод .add() в основную временную линию. Самый простой из примеров (во многих блоках анимация более сложная):

const master = gsap.timeline();

  function animation1() {
    const slide = document.querySelector('.block1');
    const tl = gsap.timeline();

    ScrollTrigger.create({
      animation: tl,
      trigger: slide,
      start: 'top top',
      end: 'bottom+=80% top',
      scrub: 1,
      pin: true,
      pinSpacing: false
    });

    tl.to(slide, { opacity: 1 })

    return tl;
  }

  master.add(animation1())
    .add(animation2(), '+=25%')
    .add(animation3(), '+=25%')
    .add(animation4(), '+=25%')

Всего на сайте около 10 блоков и таких ярлыков на каждом из блоков по 3-4 штуки (на выходе должны получить что-то вроде слайдов). Навешиваю ярлыки на первый блок и все работает как и нужно, но как только я добавляю их к ещё одному блоку - начинают появляться пустые белые пространства между блоками, анимация при прокрутке до второго блока начинает хаотично прыгать.

Так же master не видит ярлыки на дочерних временных линиях, но перемещается по ним (из-за scrolltriggera внутри дочерних линий). Единственное возникают косяки на стыках слайдов, т.к. приходится выставлять для каждого из них начальный ярлык и конечный - как итог на стыке слайдов имеем две метки (вместо одной).

Есть кто сталкивался с подобными проблемами? Как такое можно решить?