Как сделать замедление при скролле только для карточек (gsap)?

Question

[kryamk]

При скролле карточки фиксируются.
Как сделать плавный скролл (с замедлением) только для этих карточек, а вся остальная страница как обычно скроллилась?
Желательно бы средствами ScrollTrigger.
Пробовал использовать ScrollSmoother, но ломается верстка из-за position: fixed у #smooth-wrapper.
Я же правильно понимаю, что если использовать ScrollTrigger, то нужно весь сайт тогда заворачивать в #smooth-wrapper id="smooth-content" ?
Или может есть какая-та другая библиотека для реализации замедленного скролла?
И, кстати, ещё последняя карточка не доскролливает. Видимо нужно свойство end в ScrollTrigger.create как-то рассчитать?

Answer 1

[Vlad_Web_net]

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".box").forEach((box, i) => {
  if (i !== 2) {
  ScrollTrigger.create({
  trigger: box,
    start: "top top",
    end: "bottom top",
      pin: true,
      pinSpacing: false,
    markers: true
    
});
  }else{
    ScrollTrigger.create({
      trigger: box,
      start: "top top",
      end: "top top", // Устанавливаем конечную точку анимации в верхнюю границу третьего элемента
      pin: true,
      pinSpacing: false,
      markers: true
    });
  }
});