diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
index 7831334cc..04b2a32d4 100644
--- a/frontend/src/ts/controllers/input-controller.ts
+++ b/frontend/src/ts/controllers/input-controller.ts
@@ -296,7 +296,7 @@ function handleSpace(): void {
nextTop = 0;
}
- if (nextTop > currentTop && !TestUI.lineTransition) {
+ if (nextTop > currentTop) {
TestUI.lineJump(currentTop);
}
} //end of line wrap
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 422003562..74c87a2d2 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -603,6 +603,8 @@ export function scrollTape(): void {
}
}
+let currentLinesAnimating = 0;
+
export function lineJump(currentTop: number): void {
//last word of the line
if (
@@ -628,29 +630,41 @@ export function lineJump(currentTop: number): void {
);
if (Config.smoothLineScroll && toHide.length > 0) {
lineTransition = true;
- $("#words").prepend(
- `
`
- );
- $("#words .smoothScroller").animate(
- {
- height: 0,
- },
- SlowTimer.get() ? 0 : 125,
- () => {
- $("#words .smoothScroller").remove();
- }
- );
- $("#paceCaret").animate(
- {
- top:
- (document.querySelector("#paceCaret"))?.offsetTop -
- wordHeight,
- },
- SlowTimer.get() ? 0 : 125
- );
+ const smoothScroller = $("#words .smoothScroller");
+ if (smoothScroller.length === 0) {
+ $("#words").prepend(
+ ``
+ );
+ } else {
+ smoothScroller.css(
+ "height",
+ `${(smoothScroller.outerHeight(true) ?? 0) + wordHeight}px`
+ );
+ }
+ $("#words .smoothScroller")
+ .stop(true, false)
+ .animate(
+ {
+ height: 0,
+ },
+ SlowTimer.get() ? 0 : 125,
+ () => {
+ $("#words .smoothScroller").remove();
+ }
+ );
+ $("#paceCaret")
+ .stop(true, false)
+ .animate(
+ {
+ top:
+ (document.querySelector("#paceCaret"))?.offsetTop -
+ wordHeight,
+ },
+ SlowTimer.get() ? 0 : 125
+ );
const newCss: { [key: string]: string } = {
- marginTop: `-${wordHeight}px`,
+ marginTop: `-${wordHeight * (currentLinesAnimating + 1)}px`,
};
if (Config.tapeMode !== "off") {
@@ -660,15 +674,20 @@ export function lineJump(currentTop: number): void {
const newMargin = wordsWrapperWidth / 2;
newCss["marginLeft"] = `${newMargin}px`;
}
- $("#words").animate(newCss, SlowTimer.get() ? 0 : 125, () => {
- activeWordTop = (document.querySelector("#words .active"))
- .offsetTop;
+ currentLinesAnimating++;
+ $("#words")
+ .stop(true, false)
+ .animate(newCss, SlowTimer.get() ? 0 : 125, () => {
+ currentLinesAnimating = 0;
+ activeWordTop = ((
+ document.querySelector("#words .active")
+ )).offsetTop;
- currentWordElementIndex -= toHide.length;
- lineTransition = false;
- toHide.forEach((el) => el.remove());
- $("#words").css("marginTop", "0");
- });
+ currentWordElementIndex -= toHide.length;
+ lineTransition = false;
+ toHide.forEach((el) => el.remove());
+ $("#words").css("marginTop", "0");
+ });
} else {
toHide.forEach((el) => el.remove());
currentWordElementIndex -= toHide.length;