Как устранить ошибку barba.js и locomotive-scroll?

Question

sofer233 @sofer233

JavaScript

Как устранить ошибку barba.js и locomotive-scroll?

Доброго времени суток, работаю со сборкой (Wp + Barba + Locomotive-scroll) при переходе на следующую страницу, появляется ошибка

не понимаю, как её решить может кто-то знает, как это исправить ?

Вопрос задан более двух лет назад
64 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

sofer233 @sofer233 Автор вопроса

Уже, не помогло, вот мой код, может я где-то ошибку допустил ?

import barba from '@barba/core';
import LocomotiveScroll from 'locomotive-scroll';
import gsap from 'gsap';

document.addEventListener('DOMContentLoaded', () => {
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    smoothMobile: true,
    offset: ['3%', 100],
    lerp: 0.09,
    smartphone: {
      smooth: true
    }
  });


  function pageIn() {
    gsap.to('#content', {});
  }

  function pageOut() {
    gsap.to('#content', {});
  }

  function pageDelay(num) {
    return new Promise((resolve) => {
      setTimeout(resolve, num);
});
  }



  

  barba.init({
    transitions: [{
      name: 'transition',
      async leave(data) {
        pageIn();
        await pageDelay(1500);
      },

      enter(data) {
        pageOut();
        // Set <body> classes for 'next' page
        const nextHtml = data.next.html;
        const response = nextHtml.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', nextHtml);
        const bodyClasses = $(response).filter('notbody').attr('class');
        $('body').attr('class', bodyClasses);
      },

      async once(data) {
        pageIn();
        await pageDelay(1000);
        pageOut();
      }

    }]
  });



 console.log(scroll);
 

  barba.hooks.beforeLeave(() => {
    scroll.scrollTo('top');
  });

  gsap.set('.cursor', {
    force3D: true
  });

  document.addEventListener('mousemove', (e) => {
    const x = e.clientX;
    const y = e.clientY;

    gsap.to('.cursor', {
      x: x - 16,
      y: y - 16,
      ease: 'power3'
    });
  });

  document.body.addEventListener('mouseleave', () => {
    gsap.to('.cursor', {
      scale: 0,
      duration: 0.1,
      ease: 'none'
    });
  });

  document.body.addEventListener('mouseenter', () => {
    gsap.to('.cursor', {
      scale: 1,
      duration: 0.1,
      ease: 'none'
    });
  });

  const hoverCursor = document.querySelectorAll('a');

  hoverCursor.forEach((cursor) => {
    cursor.addEventListener('mouseenter', () => {
      gsap.to('.cursor', {
        scale: 2
      });
    });

    cursor.addEventListener('mouseleave', () => {
      gsap.to('.cursor', {
        scale: 1
      });
    });
  });
});





// 






const options = {
  rootMargin: "0px",
  threshold: buildThresholdList()
};

function buildThresholdList() {
  let thresholds = [];
  let numSteps = 10;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}

// ADD DATA ATTRIBUTE TO NAVIGATION ON SCROLL

let colorChangeCallback = entries => {
  const header = document.querySelector("header");
  entries.forEach(entry => {

    if (entry.isIntersecting) {
      let sectionColor = entry.target.getAttribute("data-background");
      let viewport = window.innerHeight;
      let visibleHeight = entry.intersectionRect.height;
      if (visibleHeight / viewport >= 0.85) {
        console.log(entry.target)
        //intersection ratio bigger than 90%
        //-> set header according to target
        header.setAttribute("data-nav-color", sectionColor);
      } else {
        //-> check if element is coming from top or from bottom into view
        if (entry.target.getBoundingClientRect().top < 0) {
          header.setAttribute("data-nav-color", sectionColor);
        }
      }
    }
  });
};

let colorObserver = new IntersectionObserver(colorChangeCallback, options);

document.querySelectorAll("section").forEach(section => {
  colorObserver.observe(section);
  // colorObserver.root.style.border = "2px solid #44aa44";
});

Написано более двух лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 16 часов назад
- 81 просмотр
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 81 просмотр
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1166 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 84 просмотра
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 97 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 210 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 102 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 93 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 172 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Answer 1 · 2022-07-20 07:49:57

Это был настолько распространенный вопрос, что в документации barba.js появился отдельный блок про интегрирование locomotive-scroll. Имеет смысл почитать, и сделать все так, как там написано.

Как устранить ошибку barba.js и locomotive-scroll?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт