Нужна помощь со скриптом

Привет, набросал тебе пример как это будет работать, не совсем уверен что ты имел в виду под "диагональной" анимацией, диагональ это положение или лучше сказать направления, но судя по всему что-то типо бегущей строки но в диаганальном направлении требовалось.

https://codesandbox.io/s/diagonal-text-animation-4z2mdd?file=/src/index.js

Понятно дело что мы должны использовать requestAnimationFrame для анимации через js, потому что из-за условия что нам нужно остановить её через чистый css не получиться.

Спрашивай если есть вопросы по реализации.

Дублирую код здесь:
document.getElementById("app").innerHTML = `
<h1>Test</h1>
<div id="text">
${"text ".repeat(100)}
</div>
`;

const textEl = document.getElementById("text");
textEl.style.transform = "translate(-100%, 100%)";

let start = null;
const TEXT_SPEED = 0.02;
let currentAnimationFrameId = null;
let progress = null;
const step = (timestamp) => {
if (progress && !start) {
start = timestamp - progress;
}
if (!start) {
start = timestamp;
}
progress = timestamp - start;
const position = Math.min(progress * TEXT_SPEED, 200);
textEl.style.transform = `translate(${position - 100}%, ${100 - position}%)`;
if (position < 200) {
currentAnimationFrameId = window.requestAnimationFrame(step);
}
};

currentAnimationFrameId = window.requestAnimationFrame(step);

textEl.addEventListener("mouseenter", () => {
if (currentAnimationFrameId) {
start = null;
window.cancelAnimationFrame(currentAnimationFrameId);
}
});

textEl.addEventListener("mouseleave", () => {
currentAnimationFrameId = window.requestAnimationFrame(step);
});

Ну это как-нибудь в setInterval впихнуть функцию которая сначала берет у исходной строки первый символ и добавлят после него тег br, потом берет второй символ и впереди ставит код пробела, сзади br, третий символ спереди два пробела сзади br и так далее. Счетчик символа и счетчик пробелов каждый раз увеличивать на один. Теоретически получится строчка которая побуквенно выводится по диагонали. В общем, решение придумать можно

Так у тебя вроде нормально всё работало.
Когда наводим мышкой (onmauseover), то нужно удалить интервал clearInterval(id). Когда мышка ушла с элемента, нужно запустить интервал дальше id = setInterval (frame,40).
Чтобы элемент двигался ровно по диагонали, надо узнать ширину и высоту родителя. Затем поделить, например на 100 - это будет шагом, на который надо увеличивать координату x или y. Чем больше число деления, тем медленней будет анимация. Если квадрат, то шаг для х и у будет одинаковым.
Например, горизонтальный прямоугольник с х=1000 и у=500, то по х надо увеличивать на 10 число, а у на 5. Тогда строка будет двигаться ровно по диагонали. Геометрия средних классов.

чем не подходит мой ответ в предыдущем твоем вопросе ?