Gsap slider с управлением по клику

Рейтинг: 0Ответов: 1Опубликовано: 08.05.2023

Делаю ScrollTriggered слайдер на GSAP. Необходимо управлять слайдером помамо скролла точками(тамбнейлами) при управлении от меньшего к большему - работает без проблем, а в обратную сторону пропускает слайд. Энерцию отключила, но все равно слайд проскакивает. При переключении от большего к меньшему проблем нет. Демо с полным кодом https://codepen.io/Maria2/pen/KKGQxYY

 // передаем индекс строкой или числом
 const scrollIntoView = (index) => {
   const targetElem = section.querySelector(`[data-element="${index}"]`);
   const containerOffset = section.parentElement.offsetTop + 
   + targetElem.offsetLeft
   // - section.getBoundingClientRect().height
   // + panelsContainer.getBoundingClientRect().height
   ;

   gsap.to(window, {
     scrollTo: {
       y: containerOffset,
       autoKill: false
     },
     duration: 1
   });
 };```
javascript slider прокрутка gsap thumbnails
Источник: Stack Overflow на русском

Ответы

▲ 0

Я пыталась вручную вычислить отступ от края экрана закрепленного контейнера. Как выяснилось, нужно использовать instance gsap, так как библиотека добавляет отступы

const scrollIntoView = (index) => {
    handleSlideChange(index + 1);
    // handleArrsVisibility(index);
    const totalLinks = navLinks.length - 1;
    if (index === 0) {
      return gsap.to(window, {
        scrollTo: {
          y: tween.scrollTrigger.start,
        }
      });
    }
    if (index === totalLinks) {
      return gsap.to(window, {
        scrollTo: {
          y: tween.scrollTrigger.end
        }
      });
    }
    gsap.to(window, {
      scrollTo: {
        y:
        tween.scrollTrigger.start +
        (tween.scrollTrigger.end - tween.scrollTrigger.start) *
        (index / totalLinks)
      }
    });
  };