ExiZ/GM, окей, или в личку кинь сыль на сайт где это стоит если имееться
Пример кода возможно предоставить, я попытаюсь помочь? Вы смотрели возможно проблема в коде или в js?
Пример - второй скрин, а проблема 100% в js
Попробуйте так но без примера подсказать точно ничего не могу
<?php
var ripplyScott = (function() {
var circle = document.getElementById('js-ripple'),
ripple = document.querySelectorAll('.js-ripple');
function rippleAnimation(event, timing) {
var tl = new TimelineMax();
x = event.offsetX,
y = event.offsetY,
w = event.target.offsetWidth,
h = event.target.offsetHeight,
offsetX = Math.abs( (w / 2) - x ),
offsetY = Math.abs( (h / 2) - y ),
deltaX = (w / 2) + offsetX,
deltaY = (h / 2) + offsetY,
scale_ratio = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
console.log('x is:' + y);
console.log('y is:' + x);
console.log('offsetX is:' + offsetX);
console.log('offsetY is:' + offsetY);
console.log('deltaX is:' + deltaY);
console.log('deltaY is:' + deltaX);
console.log('width is:' + w);
console.log('height is:' + h);
console.log('scale ratio is:' + scale_ratio);
tl.fromTo(ripple, timing, {
x: x,
y: y,
transformOrigin: '50% 50%',
scale: 0,
opacity: 1,
ease: Linear.easeIn
},{
scale: scale_ratio,
opacity: 0
});
return tl;
}
return {
init: function(target, timing) {
var button = document.getElementById(target);
button.addEventListener('click', function(event) {
rippleAnimation.call(this, event, timing);
});
}
};
})();
ripplyScott.init('js', 0.75);
ripplyScott.init('js1', 0.75);
ripplyScott.init('js2', 0.75);
ripplyScott.init('js3', 0.75);
?>
ExiZ/GM, эх, на проверяй, html структуру не видел но по логике должно работать https://gist.github.com/odoveiz/68efc1b14afb1e913f78