Почему не работает '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, });