Масштабирование относительно курсора только по ширине элемента ⇐ Javascript

[Anonymous]

У меня есть элемент:

Код: Выделить всё

Где «ширина» — константа, а «zoomCoef» — динамическое числовое значение.
Поэтому, когда значение «zoomCoef» изменилось, элемент div сжимается или расширяется. Я хочу, чтобы масштабирование велось плавно и относительно положения курсора.
Для этого у меня есть такие вычисления (написанные ChatGPT)

Код: Выделить всё

const zoomCallback = ({ prevZoom, newZoom, event }: { prevZoom: number, newZoom: number, event: WheelEvent }) => {
const scrollDiv = scrollRef.current;
const container = containerRef.current;
if (!scrollDiv || !container) return;

const rect = container.getBoundingClientRect();
const scrollRect = scrollDiv.getBoundingClientRect();
const zoomDif = newZoom / prevZoom;
const cursorPositionOnView = event.clientX - scrollRect.left;
const cursorX = event.clientX - rect.left;
const newCursorX = cursorX * zoomDif;
const newScrollLeft = newCursorX - cursorPositionOnView;
const animationDuration = 400;
const initialWidth = container.offsetWidth;
const initialScrollLeft = scrollDiv.scrollLeft;
const newWidth = container.offsetWidth * zoomDif;
const startTime = performance.now();
const animate = (currentTime: number) => {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / animationDuration, 1);
const interpolatedWidth = initialWidth + progress * (newWidth - initialWidth);
const interpolatedScrollLeft = initialScrollLeft + progress * (newScrollLeft - initialScrollLeft);
container.style.width = `${interpolatedWidth}px`;
scrollDiv.scrollLeft = interpolatedScrollLeft;
if (progress < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
};

Я использую его со стилями анимации:

Код: Выделить всё

 transition: 0.5s;
transition: width 0.5 linear;

Вроде как работает, но очень плохо (дергается и ездит туда-сюда).
Как это исправить, чтобы добиться плавного и точного поведения?
Пример того, чего я хочу достичь, можно найти в инструментах разработчика браузера>производительность>временная шкала профиля, которую можно прокручивать относительно позиции курсора:



Подробнее здесь: https://stackoverflow.com/questions/793 ... ment-width