Блог

У меня есть страница, используемая gsap для анимации прокрутки.

Для навигации меню настраивается с помощью простого подхода «прокрутка до идентификатора», который перехватывается gsap для прокрутки.

Это работает так, как и ожидалось, для прокрутки страницы вниз, но не вверх по странице. Однако, если вы прокрутили страницу вниз, выбор элемента выше в меню не будет прокручиваться вверх. Но, выбрав элемент 2 выше текущего, затем прокручивает вверх 1 элемент.

Пример кода;

   <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
    </ul>
  </nav>

  <section id="section1" class="panel">
  </section>
 

 gsap.utils.toArray("nav a").forEach(function(a) {
    a.addEventListener("click", function(e) {
        e.preventDefault();
        gsap.to(window, {duration: 1, scrollTo: e.target.getAttribute("href")});
    });
});
 

Демо — версия находится здесь, в codepen

Это логичный вопрос. Как только вы прокрутили раздел, элемент был перемещен вниз на 100 вч. Поэтому, когда вы переходите к его смещению по оси y, оно на 100 Вч ниже того места, где оно было в начале.

Есть разные способы это исправить. Самым простым может быть сохранить массив значений исходного смещения и вместо этого прокрутить эти значения. ДЕМОНСТРАЦИЯ.

Примечания сторон:

• Вы можете просто использовать строки селектора в качестве целей в GSAP, когда вам не нужно, чтобы он расширялся.
• Вы должны использовать двойное двоеточие ( :: ) для псевдоэлементов в CSS.
• Если вы собираетесь использовать функции ES6, как const в некоторых местах, вы также можете использовать их во всем своем коде.
• У вас больше шансов получить помощь еще быстрее на форумах Гринсока.