09
Сен
2021

Можете подсказать, где ошибка в данном коде? Почему не работает данная анимация? GSAP JS

Я пишу анимацию.

При наведение на ссылку, она начинает двигаться за курсором. Я научился отслеживать курсор, но почему-то при наведение элемент ничего не происходит хотелось бы узнать почему.(Элемент должен тянуться к курсору (magnetic cursor)) Я писал console.log this.links = [...document.querySelectorAll('.c-magnetic')]; почему-то он выводит length 0. Как правильно можно записать все элементы с классом c-magnetic в массив чтобы потом с ним работать? Я работаю на react (create-react-app). Почему-то в codepen все работает как нужно, но в проекте работает только курсор. Ссылка на codepen : https://codepen.io/BakhtiyarUmutbayev/pen/qBjrQwK Я предполагаю, что проблема в React, но не пойму, где она именно т.к. ошибок нет.(Код одинаковый и в codepenio и в проекте)

class MouseCursor {
  constructor() {
    this.page = document.querySelector('#root');

    const cursor = document.querySelector('.c-cursor__pointer');

    gsap.to(cursor, {
      autoAlpha: 0,
    });
  }

  // eslint-disable-next-line class-methods-use-this
  moveMousePos(e) {
    const mousePosX = e.clientX;
    const mousePosY = e.clientY;
    const cursor = document.querySelector('.c-cursor__pointer');

    if (e.target.classList.contains('c-magnetic')) return;

    gsap.to(cursor, {
      duration: 0.5,
      x: mousePosX,
      y: mousePosY
    });
  }

  // eslint-disable-next-line class-methods-use-this
  enterMouse() {
    const cursor = document.querySelector('.c-cursor__pointer');

    gsap.to(cursor, {
      duration: 1,
      autoAlpha: 1
    });
  }

  handleMousePos() {
    this.page.addEventListener('mouseenter', this.enterMouse);
    this.page.addEventListener('mousemove', this.moveMousePos, false);
  }

  // eslint-disable-next-line class-methods-use-this
  updateOnHover(e) {
    const {
      tagName,
      classList
    } = e.target;

    if (tagName === 'LABEL' ||
      tagName === 'A' ||
      tagName === 'BUTTON' ||
      classList.contains('is-cursor-hover') ||
      (e.target.parentElement.tagName === 'A' && e.target.tagName === 'IMG')
    ) {
      document.querySelector('html').classList.toggle('is-hover');
    }
  }

  handleLinkHover() {
    this.page.addEventListener('mouseover', this.updateOnHover.bind(this));
    this.page.addEventListener('mouseout', this.updateOnHover.bind(this));
  }

  render() {
    this.handleMousePos();
    this.handleLinkHover();
  }
}


class MagneticCursor {

  constructor() {
    this.links = [...document.querySelectorAll('.c-magnetic')];
    this.cursor = document.querySelector('.c-cursor__pointer');
    this.pos = {
      x: 0,
      y: 0
    };
  }

  activateMagnetic() {
    this.links.map(link => {
      const that = this;
      link.addEventListener('mousemove', function(e) {
        that.moveTarget(e, this, this.querySelector('span'), 50);
        that.moveCursor(e, this, 1.5);
      });

      link.addEventListener('mouseout', function() {
        gsap.to(this.querySelector('span'), {
          duration: 0.3,
          x: 0,
          y: 0
        });
      });

      return 0;
    });
  }

  moveCursor(e, link, force) {
    var rect = link.getBoundingClientRect();
    var relX = e.pageX - rect.left;
    var relY = e.pageY - rect.top;
    this.pos.x = rect.left + rect.width / 2 + (relX - rect.width / 2) / force;
    this.pos.y = rect.top + rect.height / 2 + (relY - rect.height / 2) / force;
    gsap.to(this.cursor, {
      duration: 0.3,
      x: this.pos.x,
      y: this.pos.y
    });
  }

  moveTarget(e, link, span, force) {
    var boundingRect = link.getBoundingClientRect();
    var relX = e.pageX - boundingRect.left;
    var relY = e.pageY - boundingRect.top;
    gsap.to(span, {
      duration: 0.3,
      x: (relX - boundingRect.width / 2) / boundingRect.width * force,
      y: (relY - boundingRect.height / 2) / boundingRect.height * force
    });
  }

  render() {
    this.activateMagnetic();
  }
}

const mouseCursor = new MouseCursor();
const magneticCursor = new MagneticCursor();

mouseCursor.render();
magneticCursor.render();
 <div id="root">
  <div class="wrap">
    <nav>
        <ul>
          <li>
            <a href="#" class="c-magnetic"><span>Главная</span></a>
          </li>
          
          <li>
            <a href="#" class="c-magnetic is-cursor-hover"><span>links</span></a>
          </li>
        </ul>
    </nav>
    <div class="c-cursor">
      <div class="c-cursor__pointer"></div>
    </div>
  </div>
</div>

Источник: https://ru.stackoverflow.com/questions/1327041/%D0%9C%D0%BE%D0%B6%D0%B5%D1%82%D0%B5-%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B3%D0%B4%D0%B5-%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0-%D0%B2-%D0%B4%D0%B0%D0%BD%D0%BD%D0%BE%D0%BC-%D0%BA%D0%BE%D0%B4%D0%B5-%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D0%B4%D0%B0%D0%BD%D0%BD%D0%B0%D1%8F-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8F

Тебе может это понравится...

Добавить комментарий