Почему не работает 'elastic.out(1.1, 0.3)' в GSAP

Я написал небольшую библиотеку для эффекта кнопки, но столкнулся с проблемой, что ease: 'elastic.out(1.1, 0.3)' в GSAP не работает:

gsap.to(item, {
    x: 0,
    y: 0,
    scale: 1,
    ease: 'elastic.out(1.1, 0.3)',
    duration: options.speed,
});

Я не нашел ответа на свой вопрос в Google. Предполагаю, что я где-то допустил ошибку. Я смотрел в документацию GSAP. Там анимация работает так, как мне нужно. Вот ссылка на документацию GSAP eases. Эффект отдачи у кнопки. Вот сама библиотека:

/**
 * 
 * @param {String} container - Element selector 
 * @param {Number} speed - Animation speed
 * @param {Number} scope - Scope of action 
 * @param {Number} scale - Scale on hover
 */

(function() {
  this.MagneticButton = function() {
    let defaults = {
      speed: 1,
      scope: 0.5,
      scale: 1,
    }

    if (arguments[0] && typeof arguments[0] === "object") {
      this.options = extend(defaults, arguments[0]);
    } else {
      throw Error('An error occurred while creating!');
    }

    const options = this.options

    if (typeof options.container == 'string') {
      const items = document.querySelectorAll(options.container);

      if (items.length == 0) {
        throw Error('An error occurred while creating!');
      }

      items.forEach(item => {
        setMagneticButton(item)
      })
    } else {
      const item = options.container;

      if (typeof item !== 'object' || !item) {
        throw Error('An error occurred while creating!');
      }

      setMagneticButton(item);
    }

    function setMagneticButton(item) {
      const handleMouseMove = (e) => {
        render(e)
      }

      window.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('touchmove', handleMouseMove);

      function getDistance(x1, y1, x2, y2) {
        let a = x1 - x2;
        let b = y1 - y2;
        return Math.hypot(a, b);
      }

      function render(e) {
        let mX = e.clientX,
          mY = e.clientY;

        let itemBound = item.getBoundingClientRect();
        let itemHeight = itemBound.height;
        let itemWidth = itemBound.width;

        let docMouseX = 0;
        let docMouseY = 0;
        let docElemX = 0;
        let docElemY = 0;

        let elemScopeDist = itemWidth * options.scope;
        let centerX = itemBound.left + (itemWidth / 2);
        let centerY = itemBound.top + (itemHeight / 2);

        let deltaX = Math.floor((centerX - mX)) * -0.45;
        let deltaY = Math.floor((centerY - mY)) * -0.45;

        docMouseX = mX + window.scrollX;
        docMouseY = mY + window.scrollY;

        docElemX = itemBound.left + itemWidth / 2;
        docElemY = itemBound.top + window.scrollY + itemHeight / 2;

        // Mouse distance to element
        let mouseDistance = getDistance(docMouseX, docMouseY, docElemX, docElemY);

        if (mouseDistance < elemScopeDist) {
          gsap.to(item, {
            y: deltaY,
            x: deltaX,
            scale: options.scale,
            ease: 'power3',
            duration: options.speed,
          });

          item.classList.remove('magnetic-btn-leave')
          item.classList.add('magnetic-btn-active');
        } else {
          gsap.to(item, {
            x: 0,
            y: 0,
            scale: 1,
            ease: 'elastic.out(1.1, 0.3)',
            duration: options.speed,
          });

          item.classList.remove('magnetic-btn-active');
          item.classList.add('magnetic-btn-leave')
        }
      }
    }
  }

  function extend(defaults, options) {
    let extended = {};
    let prop;
    for (prop in defaults) {
      if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
        extended[prop] = defaults[prop];
      }
    }
    for (prop in options) {
      if (Object.prototype.hasOwnProperty.call(options, prop)) {
        extended[prop] = options[prop];
      }
    }
    return extended;
  }
})()

let magneticButton = new MagneticButton({
  'container': '.magnetic-btn',
  'speed': 0.4,
});
.magnetic-btn {
  width: fit-content;
  padding: 1.5rem 3rem;
  border-radius: 10rem;
  color: white;
  background-color: black;
  font-family: 'Roboto', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
<div class="magnetic-btn">Magnet button</div>


Ответы (1 шт):

Автор решения: Philipp

Вы пишется одиночные кавычки, должны быть кавычки «»

Не верно: gsap.to(item, { x: 0, y: 0, scale: 1, ease: 'elastic.out(1.1, 0.3)', duration: options.speed, });

Верно: gsap.to(item, { x: 0, y: 0, scale: 1, ease: «elastic.out(1.1, 0.3)», duration: options.speed, });

→ Ссылка